컨텐츠 바로가기

스마트디자인 팁 상세
제목 [스마트디자인][메인] 메인 페이지에 카테고리 추가 적용하기
작성자 대표 관리자 (ip:) 작성일 2015-02-12 18:11:02 조회수 5731


메인 페이지에 카테고리 추가 적용하기!


메인에 노출하는 카테고리를 추가하여, 노출되는 상품을 다른 디자인으로 관리하고 싶은 경우 활용 할 수 있는 팁입니다.












1. 쇼핑몰 어드민의 상품관리 > 상품표시관리 > 상품 진열관리 '메인분류관리' 버튼을 클릭합니다.
'추가'버튼을 클릭하여 새로운 분류를 생성합니다. (모듈코드는 저장하면 자동 생성됩니다.)









2. 메인에 노출하고 싶은 상품을 상품관리 > 상품목록에서 선택하여 메인진열을 설정합니다.









3. 디자인 편집창 > 메인(index.html)에서 원하는 위치에 아래 코드를 넣고, 영역을 클릭합니다.
*product_listmail_8은 step1에서 생성된 모듈코드 입니다. 해당 카테고리의 모듈코드와 동일한 번호로 넣어주세요.

       

<div module="product_listmain_8"> </div>










4. 편집 버튼을 클릭하여 꾸미기를 선택한 후 원하는 디자인을 적용합니다.









5. 디자인 적용 후에 편집창을 저장하면 프론트 화면에서 추가한 카테고리가 노출되는 것을 확인할 수 있습니다.













위와 같은 방법이 어렵게 느껴진다면, 이 방법으로 따라해보세요.
디자인 편집창에서 원하는 위치에 모듈을 추가합니다. (해당 소스는 메인 모듈 가이드에서도 확인 하실 수 있습니다.)
3단형~5단형으로 선택하여 추가할 수 있습니다.









추가된 모듈의 html을 다음과 같이 변경합니다.

HTML과 CSS 파일의 모듈 번호는 추가한 메인분류의 모듈코드(step1참고)로 수정합니다. ( HTML : product_listmain_1  CSS : .xans-product-1 )

* step1에서 생성한 카테고리의 모듈코드는 product_listmail_8 이기 때문에, 1을 8로 변경해줍니다.


       

<div module="product_listmain_1">

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

    <!--

        $count = 8

        $basket_result = /product/add_basket.html

        $basket_option = /product/basket_option.html

    -->

    <h2><span>{$category_title_text}</span></h2>

    <ul class="prdList column4">

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

            <div class="box">

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

                <div class="status">

                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>

                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>

                </div>

                <p class="name">

                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>

                </p>

                <ul module="product_ListItem">

                    <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>

            </div>

        </li>

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

            <div class="box">

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

                <div class="status">

                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>

                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>

                </div>

                <p class="name">

                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>

                </p>

                <ul module="product_ListItem">

                    <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>

            </div>

        </li>

    </ul>

</div>



       

  /* 공통 */

.xans-product-1 { margin:22px 0 0; }

.xans-product-1 h2 { margin:0 0 16px; font-weight:normal; font-size:20px; font-family:Arial, "돋움", Dotum, sans-serif; color:#2e2e2e; text-align:left; border-top:1px solid #e8e8e8; padding:40px 0 0; text-indent:5px; }

.xans-product-1 img { vertical-align:middle; }

.xans-product-1 ul.prdList { display:table; width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; }

.xans-product-1 ul.prdList li.item { display:inline-block; margin:20px 0; color:#757575; vertical-align:top; *display:inline; *zoom:1; }

.xans-product-1 ul.prdList li.item .box { margin:0 auto; font-size:12px; line-height:18px; text-align:center; }

.xans-product-1 ul.prdList li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; }

.xans-product-1 ul.prdList.column3 li .color { width:176px; }

.xans-product-1 ul.prdList.column4 li .color { width:116px; }

.xans-product-1 ul.prdList.column5 li .color { width:76px; }

.xans-product-1 ul.prdList li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }


.xans-product-1 ul.prdList .thumb { margin:0 0 10px; border:1px solid #ececec; }

.xans-product-1 ul.prdList .name { text-align:left; }

.xans-product-1 ul.prdList .name a { color:#2e2e2e; }

.xans-product-1 ul.prdList .name .title { font-weight:normal; }

.xans-product-1 ul.prdList .status { margin:0 0 16px; padding:0 80px 4px 0; border-bottom:1px solid #e8e8e8; text-align:right; line-height:0; *zoom:1; }

.xans-product-1 ul.prdList .status:after { content:""; display:block; clear:both; }

.xans-product-1 ul.prdList .icon { float:left; text-align:left; }

.xans-product-1 ul.prdList .icon img { margin:0 -3px 6px 0; }

.xans-product-1 ul.prdList .button { margin:0 -80px 0 0; *zoom:1; }

.xans-product-1 ul.prdList .button img { margin:0 0 6px -3px; cursor:pointer; }

.xans-product-1 ul.prdList .button .option { display:inline; position:relative; *zoom:1; }

.xans-product-1 ul.prdList .mileage { display:block; }

.xans-product-1 ul.prdList span.grid { display:block; }


.xans-product-listitem li { text-align:left; }


/* 진열방식 */

.xans-product-1 ul.column3 li.item { width:33.33%; }

.xans-product-1 ul.column3 li.item .box { width:324px; }

.xans-product-1 ul.column3 li.item .thumb { width:322px; height:322px; }

.xans-product-1 ul.column4 li.item { width:25%; }

.xans-product-1 ul.column4 li.item .box { width:240px; }

.xans-product-1 ul.column4 li.item .thumb { max-width:238px; }

.xans-product-1 ul.column5 li.item { width:20%; }

.xans-product-1 ul.column5 li.item .box { width:189px; }

.xans-product-1 ul.column5 li.item .thumb { max-width:187px; }


/* module="product_ListItem" */

.xans-product-1 .xans-product-listitem { margin:0; }

.xans-product-1 .xans-product-listitem li .title { font-weight:normal; vertical-align:top; }

.xans-product-1 .xans-product-listitem li .title span { vertical-align:top; }


/* 할인기간 레이어 */

.xans-product-1 .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; *zoom:1; *display:inline; }

.xans-product-1 .discountPeriod .edge { position:absolute; left:50%; top:-6px; width:10px; height:6px; margin:0 0 0 -5px; font-size:0; line-height:0; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/ico_tip_edge.gif") no-repeat 0 0; }

.xans-product-1 .layerDiscountPeriod { display:none; position:absolute; left:50%; top:26px; width:247px; margin:0 0 0 -124px; border:1px solid #565960; font-size:12px; background-color:#fff; }

.xans-product-1 .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; }

.xans-product-1 .layerDiscountPeriod .content { padding:9px 10px 12px 14px; font-family:Verdana, "돋움", Dotum, sans-serif; }

.xans-product-1 .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; color:#000; line-height:16px; color:#757575; letter-spacing:-1px; }

.xans-product-1 .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; }

.xans-product-1 .layerDiscountPeriod .content p strong span { font-size:11px; }

.xans-product-1 .layerDiscountPeriod .close { position:absolute; right:14px; top:14px; }

.xans-product-1 .layerDiscountPeriod .close img { cursor:pointer; }
첨부파일
목록 관리자게시 삭제 수정

최근본모듈

이전 모듈다음 모듈