스마트디자인 서포트

설명

상품 카테고리명과 관련 네이게이션바 등이 노출됩니다. 어드민에서 입력한 이미지 타이틀 등도 사용할 수 있습니다.

샘플코드

    <div class="path" module="product_headcategory">
        <h2>현재 위치</h2>
        <ol>
            <li class="first"><a href="/">홈</a></li>
            <li class="{$disp_cate_1|display}"><a href="/product/list.html{$param_1}">{$name_1}</a></li>
            <li class="{$disp_cate_2|display}"><a href="/product/list.html{$param_2}">{$name_2}</a></li>
            <li class="{$disp_cate_3|display}"><a href="/product/list.html{$param_3}">{$name_3}</a></li>
            <li class="{$disp_cate_4|display}"><strong><a href="/product/list.html{$param_4}">{$name_4}</a></strong></li>
        </ol>
    </div>

    <div class="title" module="product_headcategory">
        <p class="banner">{$top_image1_tag}{$top_image2_tag}{$top_image3_tag}</p>
        <h2><span>{$title_text_or_image}</span></h2>
    </div>

사용 가능 변수

product_headcategory

모듈명: product_displaycategory

설명

해당 카테고리에 중분류, 소분류, 상세분류가 있을 경우 나열하는 메뉴입니다. 반복구문과 display 사용방법에 주의합니다.

샘플코드

    <ul class="menuCategory">
        <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
        <li module="product_displaycategory" style="display:{$display};">
            <a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="count {$product_count_display|display}">({$product_count})</span></a>
            <ul module="product_children">
                <li>
                    <a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
                    <div class="button">
                        {$children_icon}
                        <ul module="product_children" class="subCategory">
                            <li><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                            <li><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
                    <div class="button">
                        {$children_icon}
                        <ul module="product_children" class="subCategory">
                            <li><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                            <li><a href="/product/list.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li><!-- //참고 -->
    </ul>

사용 가능 변수

product_displaycategory

모듈명: product_listrecommend

설명

카테고리별 추천 상품 목록입니다.

카테고리별 추천 상품 목록의 디자인은 ul과 li의 태그로 작업 되어있습니다.
상품표현영역의 세로값이 고정이라면, li의 height 사이즈를 지정해 주면 되지만, 그렇지 않을 경우엔 1 라인당 ul 태그를 반복시켜 적용합니다. 상품이 중간 중간 빠져보이는 현상을 방지할 수 있습니다.
반복문을 only_html 으로 지정하고, li를 노출되는 상품 갯수에 따라 작성하는 것을 권장합니다.
상품 상세 정보를 입력할때 상품명에 html tag가 (br, b, strong 등) 삽입되어있으면 해당 레이아웃이 틀어질 수 있습니다. 이럴때엔, alt 값을 alt="" 로 수정하시면 됩니다.

샘플코드

<div module="product_listrecommend">
    <!--@css(/css/module/product/listrecommend.css)-->
    <!--
    $count = 4
    $basket_result = /product/add_basket.html
    $basket_option = /product/basket_option.html
    -->
    <div class="title">
        <h2><span>BEST SELLERST</span></h2>
    </div>
    <ul class="prdList column4">
        <li class="item" id="anchorBoxId_{$product_no}">
            <div class="box">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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>

사용 가능 변수

product_listrecommend

모듈명: product_ListItem

설명

상품목록의 표시항목을 어드민의 설정값으로 사용 할 수 있는 모듈로, 상품 목록형 모든 모듈에 사용 할 수 있습니다.

샘플코드

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

사용 가능 변수

product_ListItem

모듈명: product_listnew

설명

카테고리별 신상품 목록입니다.

카테고리별 신상품 목록의 디자인은 ul과 li의 태그로 작업 되어있습니다.
상품표현영역의 세로값이 고정이라면, li의 height 사이즈를 지정해 주면 되지만, 그렇지 않을 경우엔 1 라인당 ul 태그를 반복시켜 적용합니다. 상품이 중간 중간 빠져보이는 현상을 방지할 수 있습니다.
반복문을 only_html 으로 지정하고, li를 노출되는 상품 갯수에 따라 작성하는 것을 권장합니다.
※ 접근성 향상을 위해 alt 값에 상품명 변수값이 삽입되어있습니다.
상품 상세 정보를 입력할때 상품명에 html tag가 (br, b, strong 등) 삽입되어있으면 해당 레이아웃이 틀어질 수 있습니다. 이럴때엔, alt 값을 alt="" 로 수정하시면 됩니다.

샘플코드

<div module="product_listnew">
    <!--@css(/css/module/product/listnew.css)-->
    <!--
    $count = 5
    $basket_result = /product/add_basket.html
    $basket_option = /product/basket_option.html
    -->
    <div class="title">
        <h2><span>NEW ARRIVALS</span></h2>
    </div>
    <ul class="prdList column5">
        <li class="item" id="anchorBoxId_{$product_no}">
            <div class="box">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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>

사용 가능 변수

product_listnew

모듈명: product_normalmenu

설명

상품 갯수, 카테고리별 일반상품 정렬 방법, 조건별 검색, 상품비교 버튼(어드민 설정필요) 등을 노출합니다.

샘플코드

    <div module="product_normalmenu">
        <!--
        $compare_page = /product/compare.html
        -->
        <div class="title" id="{$listmenu_position}">
            <h2><span>HIT PRODUCT</span></h2>
        </div>

        <div class="function">
            <p class="prdCount">등록 제품 : <strong>{$total_count}</strong>개</p>
            <ul id="type">
                <li><a href="{$param_3}" {$style_3}>낮은가격</a></li>
                <li><a href="{$param_4}" {$style_4}>높은가격</a></li>
                <li><a href="{$param_1}" {$style_1}>상품명</a></li>
                <li><a href="{$param_2}" {$style_2}>제조사</a></li>
                <li><a href="{$param_5}" {$style_5}>신상품</a></li>
                <li class="{$favor_sort_display|display}"><a href="{$param_6}" {$style_6}>인기상품</a></li>
                <li><a href="{$param_7}" {$style_7}>사용후기</a></li>
            </ul>
            <span class="compare {$product_compare_display|display}"><a href="#none" onclick="{$product_compare_action}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_compare.gif" alt="상품비교" /></a></span>
        </div>

        <fieldset class="condition {$select_search_display|display}">
            <legend>조건별 검색</legend>
            <p>
                <!--@js(/js/module/product/product_selectsearch.js)-->
                <select class="FirstSelect" module="product_FirstSelect">
                    <option value="">-조건선택-</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                </select>
                <select class="SecondSelect" module="product_SecondSelect">
                    <option value="">-조건선택-</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                </select>
                <a href="#SelectSearch" class="SelectSearch"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_list_search.gif" alt="검색" /></a>
            </p>
        </fieldset>
    </div>

사용 가능 변수

product_normalmenu

모듈명: product_listnormal

설명

일반상품을 나열합니다. $cate_no 주석변수를 사용하면 원하는 카테고리 노출이 가능합니다.

카테고리별 신상품 목록의 디자인은 ul과 li의 태그로 작업 되어있습니다.
상품표현영역의 세로값이 고정이라면, li의 height 사이즈를 지정해 주면 되지만, 그렇지 않을 경우엔 1 라인당 ul 태그를 반복시켜 적용합니다. 상품이 중간 중간 빠져보이는 현상을 방지할 수 있습니다.
반복문을 only_html 으로 지정하고, li를 노출되는 상품 갯수에 따라 작성하는 것을 권장합니다.
※ 접근성 향상을 위해 alt 값에 상품명 변수값이 삽입되어있습니다.
상품 상세 정보를 입력할때 상품명에 html tag가 (br, b, strong 등) 삽입되어있으면 해당 레이아웃이 틀어질 수 있습니다. 이럴때엔, alt 값을 alt="" 로 수정하시면 됩니다.

샘플코드

    <div module="product_listnormal">
        <!--
        $count = 12
        $basket_result = /product/add_basket.html
        $basket_option = /product/basket_option.html
        -->
        <ul class="prdList column4">
            <li class="item" id="anchorBoxId_{$product_no}">
            <div class="box">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_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}"><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>

사용 가능 변수

product_listnormal

모듈명: product_normalpaging

설명

상품 목록 페이징입니다. 접근성 향상을 위해 a 태그에 해당 페이지로 이동한다는 안내를 title 태그를 이용해서 사용합니다.

샘플코드

<div module="product_normalpaging">
    <!--@css(/css/module/product/normalpaging.css)-->
    <p class="first"><a href="{$param_first}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_page_first.gif" alt="첫 페이지" /></a> </p>
    <p><a href="{$param_before}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_page_prev.gif" alt="이전 페이지" /></a></p>
    <ol>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
    </ol>
    <p><a href="{$param_next}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_page_next.gif" alt="다음 페이지" /></a> </p>
    <p class="last"><a href="{$param_last}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_page_last.gif" alt="마지막 페이지" /></a> </p>
</div>

모듈명: product_headcategory

설명

샘플코드

사용 가능 변수

모듈명: product_displaycategory

설명

샘플코드

사용 가능 변수

모듈명: product_listrecommend

설명

샘플코드

사용 가능 변수

모듈명: product_ListItem

설명

샘플코드

사용 가능 변수

모듈명: product_listnew

설명

샘플코드

사용 가능 변수

모듈명: product_normalmenu

설명

샘플코드

사용 가능 변수

모듈명: product_listnormal

설명

샘플코드

사용 가능 변수

모듈명: product_normalpaging

설명

샘플코드

사용 가능 변수