상세 컨텐츠

본문 제목

[카페24 쇼핑몰] 상품분류 모듈(module), 변수

쇼핑몰 코딩정보/카페24

by Web lover 2020. 1. 5. 18:53

본문

안녕하세요 ^^

카페24 쇼핑몰에서 상품분류페이지가 중요합니다.

상품이미지, 상품명, 소비자가격, 판매가격 등등 여러가지 나오는 페이지인데요

카페24 쇼핑몰 코딩 초보자 기본요약 두번째 글에서 간략하게 설명을 했지만 

상황에 따라서 수정할수있는 부분이 달라질수 있기 때문에 세세하게 알려드릴려고 합니다.

 

상품분류가 나오는페이지는 쇼핑몰메인(index.html), 상품분류(/product/list.html), 상품검색(/product/search.html) 입니다.

상품분류(/product/list.html)을 기준으로 제가 생각하기에 중요한 부분이라고 생각하는 부분을 설명해 드리겠습니다.

 

상품분류

 

상품분류 HTML

위의그림은 기본 디자인의 상품분류페이지 html입니다.

 

1) module="product_listnormal" : 상품분류 모듈코드입니다. 

 

모듈코드에 따라 쇼핑몰 메인, 상품분류, 상품검색의 기능을 정합니다.

 

module="product_listmain_1" : 메인상품진열관리 > 메인분류관리버튼시 메인분류관리팝업에서 모듈코드를 확인하실수있습니다.

module="Search_Result" : 상품검색 모듈코드입니다.

 

2) class="ec-base-product"

상품분류 클래스명입니다.

 

스마트디자인 편집창

스마트 디자인 편집창 왼쪽부분에 ec-base-product을 검색하시면 css파일을 검색하실수있습니다.

이파일에서 수정해주세요.

 

3) $count = 12 : 12개의 리스트가 나옵니다.

 

4) grid2 : 가로사이즈가 50% 두개씩나옵니다. ec-base-product.css에서 확인할수있습니다.

ec-base-product.css

5) {$link_product_detail} : 상품상세URL 변수명

 

6) {$image_medium} : 상품분류 이미지 변수명

 

7) {$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$today_arrival_icon} {$pickup_icon} {$benefit_icons} : 각각 아이콘의 변수명입니다. 여기서 중요한 부분은 {$product_icons} 이변수는 상품등록시 아이콘을 직접 등록할때 나오는 부분입니다.

 

8) {$option_preview_icon} : 옵션미리보기 아이콘 변수명

 

9) {$basket_icon} : 장바구니 아이콘 변수명

 

10) {$zoom_icon} : 이미지확대 아이콘 변수명

 

11) {$product_name_display|display} : 상품관리 > 상품표시관리 > 상품정보표시 설정에서 상품명을 표시안함으로 하면 안보이게 하는 변수명입니다.

 

12) {$product_name_title_display|display} : 상품정보표시설정에서 항목명 표시설정을 표시안함으로 하면 안보이게 하는 변수명입니다.

 

13) 

<ul module="product_ListItem" class="spec">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title}</strong>{$item_content}</li>
<li class="{$item_display|display}"><strong class="title{$item_title_display|display}">{$item_title}</strong>{$item_content}</li>
</ul>

상품관리 > 상품표시관리 > 상품정보표시 설정에서 상품명을 빼고 나머지항목들이 표시설정에 의해 나오게 되는 통합모듈소스입니다.

이부분은 간단하게 쓸때에는 좋은데 디자인에 따라서 달라지는 부분들이 있기때문에 세분해서 변수명을 넣어야합니다.

 

ex)

<div class="simple {$simple_desc|display}">{$simple_desc}</div>
<div class="price_box">
<span class="strike {$product_custom|display}">{$disp_product_custom}</span><span class="price">{$disp_product_price}</span>
</div>
<div class="summary {$summary_desc|display}">{$summary_desc}</div>
<div class="icon">{$product_icons}</div>

A. 상품간략설명 : {$simple_desc}

 

B. 소비자가격 :

{$disp_product_custom} -> 5,000원

{$product_custom} -> 5000원

 

C. 판매가격 :

{$disp_product_price} -> 5,000원

{$product_price} -> 5000원

 

D. 상품요약설명 : {$summary_desc}

 

E. 상품아이콘 : {$product_icons}

 

 

 

제가 평소에 중요하다고 생각하고 잘사용하고 있는 상품분류모듈의 변수명을 설명해 드렸는데요 

아래의 링크는 카페24에서 제공하는 모듈코드에 따른 사용가능한 변수을 설명한 페이지입니다.

제가 설명한 부분이외에 필요한부분이 있으시면 찾아보시길 바랍니다. ^^

찾아보는것도 하나의 공부니까요~ ^^

 

http://sdsupport.cafe24.com/product/%ED%95%9C%EA%B5%AD%EC%96%B4-%EC%83%81%ED%92%88%EB%AA%A9%EB%A1%9D/3822/

 

한국어 상품목록

모듈 가이드 참고 방법 모든 모듈은 무료로 제공되는 표준 디자인을 기준으로 제작되었으며 어떤 페이지에도 자유롭게 사용하실 수 있습니다. 왼쪽의 카테고리 구분은 제공되는 표준 디자인을 기준으로 제작되었으며 검색이 편리하도록 그루핑 된 것이니 참고하시길 바랍니다. 검정색 라인 기능 모듈입니다. 각 라인별 검정색 배경의 태그에 모듈명이 정리되어있습니다. 주황색 라인 편집창에서 꾸미기를 위한 여러 모듈의 묶음(package)이며 다른 기능은 없습니다. ※ 모듈

sdsupport.cafe24.com

 

관련글 더보기

댓글 영역