안녕하세요, 카페24 운영도우미 입니다.

상품 진열 설정 시 HTML로 원하는 상품 수 만큼 추가하던 부분을
주석변수 (예: <!-- $count = 50 --!>)로 진열 수를 조정 가능하도록 하여
하단의 예제와 같이 상품리스트가 보기 좋게 정렬되도록 업그레이드 되었습니다.

자세한 내용은 아래를 참조해 주세요.

아래의 내용을 참고하시어 적용예제 및 코드 수정부분을 확인해 주세요.

[적용예제]

아래 코드를 참고 하시면, 상품리스트 화면에 적용하실 수 있습니다.

또는 첨부된 js파일을 다운로드 받으셔서 사용하시면 됩니다. [☞ 첨부파일 다운로드하기]

표준스킨에서는 아래와 같은 파일이 추가 및 수정되었습니다.

/index.html

/product/list.html

/product/search.html

<!--@js(/js/module/product/listmain_1.js)-->

<!--@js(/js/module/product/listmain_2.js)-->

<!--@js(/js/module/product/listmain_5.js)-->

<!--@js(/js/module/product/listmain_6.js)-->

<!--@js(/js/module/product/listmain_7.js)-->

<!--@js(/js/module/product/listnew.js)-->

<!--@js(/js/module/product/listnormal.js)-->

<!--@js(/js/module/product/listrecommend.js)-->

!--@js(/js/module/product/search_result.js)--


[HTML예제]

<div module="product_listmain_1">

<!--@css(/css/module/product/listmain_1.css)-->

<!--@js(/js/module/product/listmain_1.js)-->

    <!--

    $count = 8

    $basket_result = /product/add_basket.html

    $basket_option = /product/basket_option.html

    -->

    <h2><img src="http://img.echosting.cafe24.com/design/skin/mono/h2_product_1st.gif" alt="{$category_title_text}" isModify="1" /></h2>

    <ul class="prdList">

        <li id="anchorBoxId_{$product_no}">

            <a name="anchorBoxName_{$product_no}" href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="" /></a>

            ..........

        </li>

        <li id="anchorBoxId_{$product_no}">

            <a name="anchorBoxName_{$product_no}" href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="" /></a>

            ..........

        </li>

    </ul>

</div>

[JS예제]

* 새파일 생성: /js/module/product/listmain_1.js

$(document).ready(function() {

    setTimeout(function() {$('.xans-product-listmain-1').productResize() }, 300);

});

※ TIP
  - .xans-product-listmain-1 부분에 적용하게 되는 셀렉터를 삽입합니다.
     예제에서는 메인 추천상품이 치환된 클래스를 넣었습니다.

     실제 적용하고 싶은 class나 치환된 class를 삽입해주세요.

  - 코드 제일 뒤에 있는 300이라는 숫자는 시간 설정하는 부분입니다.

  - 시간을 각각 틀리게 설정하여 js들이 충돌하지 않게 설정 합니다.

  - 페이지 상품리스트(추천, 신상품)가  2개인 경우, 각각의 js파일에 시간 설정값을 다르게 반영합니다.

[js파일 시간 설정 예제]

  - 추천상품

   $(document).ready(function() {

       setTimeout(function() {$('.xans-product-listrecommend').productResize() }, 300);

   });

  - 신상품

   $(document).ready(function() {

       setTimeout(function() {$('.xans-product-listnew').productResize() }, 600);

   });


[적용 예제화면]

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]