• PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
    • 이 상품은 해외배송이 가능한 상품입니다

    [ 27 INFINITE ] 메인 상품진열, 배치 순서 변경하기품절
    메인 페이지의 코드 및 상품 진열, 그리고 섹션의 순서들을 조절하는 방법에 대한 안내입니다.
    기본 정보
    [ 27 INFINITE ] 메인 상품진열, 배치 순서 변경하기
    메인 페이지의 코드 및 상품 진열, 그리고 섹션의 순서들을 조절하는 방법에 대한 안내입니다.
    사용후기 0
    수량 수량증가수량감소
    타임세일

    카드혜택안내 미확인 입금자

    개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다.
  • 상품 수량
    수량
    증가 감소
    상품 옵션
    옵션 선택

  • 수량을 선택해주세요.

    옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.

    최소주문수량 1개 이상 / 최대주문수량 0개 이하입니다.

    상품 목록
    상품명 상품수 가격
    [ 27 INFINITE ] 메인 상품진열, 배치 순서 변경하기 수량증가 수량감소 0 (  )
  • TOTAL PRICE 0 (0개)

    할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • 공급사 바로가기

시즌 7에서는 이전의 코드와 달리 메인페이지의 모든 섹션들이 묶음 처리 되어 있습니다.

때문에 블럭을 위로 옮기고 내리는 작업 자체가 수월해졌고, 개별 관리하기가 좋게 설계 됐습니다.

기본적으로 메인페이지 코드 자체에 설명문이 모두 들어가있으며, 이 메뉴얼은 추가로 가시적인 설명입니다.




1. 메인 섹션의 위아래 순서 변경하기


코드가 묶음화 되어 있기 때문에 아래의 이미지처럼 단순히 코드를 복사 + 붙여넣기를 통해 순서를 변경할 수 있습니다.

주의할점은 묶음 코드 안쪽에 들어가서 그 속의 코드의 위치를 바꿀땐 조심하셔야 합니다.


제공되는 묶음 코드 정도에서만 상하로 위치를 이동하시는것을 추천합니다. * 물론 개발자는 마음대로 하셔도 됩니다.






2. 사용하지 않을 코드를 숨겨두기 / 혹은 제거하기


* 가급적 메인페이지의 코드는 삭제를 하지 않으시길 권장합니다. ( 나중에 코드를 사용할 수 있으므로 )


2-1. 코드상으로 숨기기

만약 아래의 카테고리 디자인을 숨김처리 한다면


<!-----------------------------------------------------------------------------------------------

    [ 탭 ] 카테고리 디자인

------------------------------------------------------------------------------------------------>

<!--@import(/_sp/cafe24/include/index/tab_product.html)-->


아래처럼 처리하시면 됩니다.


<!-----------------------------------------------------------------------------------------------

    [ 탭 ] 카테고리 디자인

------------------------------------------------------------------------------------------------>

<!--import(/_sp/cafe24/include/index/tab_product.html)-->


@ 부분만 제거하시면 해당 섹션 자체를 서버가 인식하지 않기 때문에

속도도 빨라지며, 코드 관리가 아주 간결하게 하실 수 있습니다.


2-2. 상품 진열 코드 숨기기


기본적으로 상품 진열은 관리자에서 해당 상품 카테고리의 상품을 모두 빼주시면 자동으로 숨겨집니다.

하지만 상품이 너무 많거나, 혹은 즉각적으로 숨겨야 한다면 아래의 방법을 사용하세요.


<!-----------------------------------------------------------------------------------------------

    [ 상품 ] 메인상품 진열관리

------------------------------------------------------------------------------------------------>

<div class="sp--width" scope="box" module="product_listmain_99999">

    <!--

        $count = 4

    -->

    <!--@import(/product/inc/product_title.html)-->

    <div class="sp__product sp--box" grid="4" gap="2xl" control="false" mobile="2" tablet="3">

        <!--@import(/product/inc/product.html)-->

    </div>

</div><!-- // -->


이 방법은 그리 권장하진 않지만, ( 어쨌거나 이 방법은 서버가 인식은 합니다 )

99999라는 상품진열 코드는 없으니 강제로 진열이 없는 쪽으로 연결해서 숨기는 방식입니다.


가급적 상품을 모두 제거하는 방법을 권장합니다.





3. 메인상품 진열관리 수정하기


먼저 카테고리 번호를 얻는 방법부터 설명합니다.


 

메인 진열 카테고리 번호를 얻으셨다면,

이제 모든 메인진열을 자유롭게 관리할 수 있습니다.


아래는 메인상품 진열을 하는 기본적은 코드 입니다.

한개의 묶음이라고 이해하시면 되시고, 늘 함께 복사해서 사용하시면 됩니다.



 기본적인 코드

<!-----------------------------------------------------------------------------------------------

    [ 상품 ] 메인상품 진열관리

------------------------------------------------------------------------------------------------>

<div class="sp--width" scope="box" module="product_listmain_3">

    <!--

        $count = 20

    -->

    <!--@import(/product/inc/product_title.html)-->

    <div class="sp__product sp--box" grid="4" gap="2xl" control="false" mobile="2" tablet="3">

        <!--@import(/product/inc/product.html)-->

    </div>

</div><!-- // -->




_3 / 위에서 얻은 카테고리 번호를 입력하세요.

$count = 20 / 상품을 몇개 가져올지 결정합니다. 숫자형식으로 입력하세요. ( 50개 미만 권장 )

grid="4" / 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10 을 지원합니다.

gap="2xl" / 상품 이미지 사이의 여백을 결정합니다. xs, sm, md, lg, xl, 2xl, 3xl 를 지원합니다.

mobile="2" / 모바일 환경이 되면 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10 을 지원합니다.

tablet="3" / 테블릿 환경이 되면 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10 을 지원합니다.


이 다섯가지 규칙만 이해하면 거의 대부분을 컨트롤 할 수 있습니다.

더 많은 옵션 ( 예를 들어 리모컨, 상품 비교 , 타임세일 등 ) 이 있지만, 개발자의 영역으로 생각하고

간략한 5가지 옵션만 정리해서 알려드리오니 참고 부탁드립니다.





4. 배너 삭제하거나, 숨기기


배너역시 2번 항목처럼 강제숨김 처리를 할 수 있지만,


시즌 7 스킨은 "판다씨 배너매니저"를 지원하므로,

관리자 > 앱 스토어 > 마이앱 > 판다씨 매너매니저


경로로 접속하셔서 원치 않으시는 배너를 " 사용안함 " 하시면 됩니다.


이 방법에 대해서 [ 27 INFINITE ] 시즌 7 간편 주요 메뉴얼

이 메뉴얼을 확인하시면 많은 도움이 됩니다.





















  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

REVIEW

게시물이 없습니다

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

Q & A

게시물이 없습니다