컨텐츠 바로가기


스마트디자인 팁 상세
제목 [스마트디자인] 모바일에서 메인, 상품목록에 추가항목 표시하는 방법
작성자 대표 관리자 (ip:) 작성일 2017-03-30 14:28:16 조회수 10202

모바일에서 추가항목을 표시하는 방법



 

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>










모바일 화면에서도 추가항목이 동일하게 표시됩니다.



첨부파일
목록 관리자게시 삭제 수정