모바일에서 추가항목을 표시하는 방법
PC화면에서 보여지는 추가정보 항목을 모바일화면에서도 동일하게 표시하는 방법을 소개해보겠습니다.
1. 어드민에서 상품정보의 추가정보 설정하기
상품관리 > 상품표시관리 > 상품정보표시에서 기본 정보 항목들 외에 사용자가 직접 항목을 추가해서 사용할수 있습니다.
사용하고자 하는 항목을 추가하고 "표시함"으로 설정합니다.
표시설정에서 항목을 추가하면, 상품등록, 수정페이지에서 추가항목을 입력할 수 있습니다.
2. 모바일 디자인편집창에서 추가항목 변수를 추가하기
index.html(메인), /product/list_thumb.html(상품목록) 파일을 열어 아래 부분에 파란색 코드를 추가해주세요.
반복되는 상품정보 영역에 동일하게 추가합니다.
{$custom_option숫자|display} 추가정보 표시/표시안함 설정 변수
{$custom_option숫자} 추가정보 변수
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span><span id="span_product_price_text">{$product_tax_type_text}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="{$custom_option1|display}">용량: {$custom_option1}</li>
<li class="{$custom_option2|display}">넓이: {$custom_option2}</li>
<li class="cart">{$basket_icon}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};" {$color_image}></span>
<span class="chips" style="background-color:{$color};" {$color_image}></span>
</div>
</li>
<li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
</ul>
</div>
모바일 화면에서도 추가항목이 동일하게 표시됩니다.