스마트디자인 서포트

설명

메인 추천 상품 목록입니다.

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

샘플코드

<!-- 추천상품 -->
<div module="product_listmain_1">
    <!--@css(/css/module/product/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}" 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">
                <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_listmain_1

모듈명: product_listmain_2

설명

메인 신상품 목록입니다.

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

샘플코드

<!-- 신상품 -->
<div module="product_listmain_2">
     <!--@css(/css/module/product/listmain_2.css)-->
    <!--
    $count = 8
    -->
    <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}" 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">
                <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_listmain_2

모듈명: product_listmain_3

설명

메인 추가카테고리1 목록입니다.

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

샘플코드

<!-- 추가카테고리1 -->
<div module="product_listmain_3">
    <!--@css(/css/module/product/listmain_3.css)-->
    <!--
    $count = 8
    -->
    <h2>
        <span style="display: {$category_title_text_display};">{$category_title_text}</span>
        <span style="display: {$category_title_img_display};"><img src="{$category_title_img}" alt="{$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}" 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">
                <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><!-- //추가카테고리1 -->

사용 가능 변수

product_listmain_3

모듈명: product_listmain_4

설명

메인 추가카테고리2 목록입니다.

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

샘플코드

<!-- 추가카테고리2 -->
<div module="product_listmain_4">
    <!--@css(/css/module/product/listmain_4.css)-->
    <!--
    $count = 8
    -->
    <h2>
        <span style="display: {$category_title_text_display};">{$category_title_text}</span>
        <span style="display: {$category_title_img_display};"><img src="{$category_title_img}" alt="{$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}" 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">
                <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><!-- //추가카테고리2 -->

사용 가능 변수

product_listmain_4

모듈명: product_listmain_5

설명

추가분류관리(진열순서1) 목록입니다.

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

샘플코드

<!-- 추가분류관리(진열순서1) -->
<div module="product_listmain_5">
    <!--@css(/css/module/product/listmain_5.css)-->
    <!--
    $count = 8
    -->
    <h2>
        <span style="display: {$category_title_text_display};">{$category_title_text}</span>
        <span style="display: {$category_title_img_display};"><img src="{$category_title_img}" alt="{$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}" 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">
                <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><!-- //추가분류관리(진열순서1) -->

사용 가능 변수

product_listmain_5

모듈명: board_list_5

설명

자유게시판 모듈입니다.

샘플코드

<div module="board_listpackage_5">
    <!--@css(/css/module/layout/board_listpackage_5.css)-->
        <h2><span>자유게시판</span></h2>
        <table border="1" summary="">
            <caption>자유 게시판</caption>
            <thead>
                <tr>
                    <th scope="col">제목</th>
                    <th scope="col">날짜</th>
                </tr>
            </thead>
            <tbody module="board_list_5">
                <!--
                $count = 5
                $main_list = yes
                $subject_cut = 25
                $main_list_reply_view = no
                -->
                <tr>
                    <td class="title"><a href="/board/free/read.html{$param_read}">{$subject}</a></td>
                    <td>{$write_date|date:Y/m/d}</td>
                </tr>
                <tr>
                    <td class="title"><a href="/board/free/read.html{$param_read}">{$subject}</a></td>
                    <td>{$write_date|date:Y/m/d}</td>
                </tr>
            </tbody>
        </table>
        <p class="more"><a href="/board/free/list.html?board_no=5"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/layout/btn_board_more.gif" alt="더보기" /></a></p>
    </div>

사용 가능 변수

board_listpackage_5

모듈명: board_list_6

설명

상품 Q&A 게시판 모듈입니다.

샘플코드

<div module="board_listpackage_6">
    <!--@css(/css/module/layout/board_listpackage_6.css)-->
        <h2><span>상품 Q&A</span></h2>
        <table border="1" summary="">
            <caption>상품 Q&A</caption>
            <thead>
                <tr>
                    <th scope="col">제목</th>
                    <th scope="col">날짜</th>
                </tr>
            </thead>
            <tbody module="board_list_6">
                <!--
                $count = 5
                $main_list = yes
                $subject_cut = 25
                $main_list_reply_view = no
                -->
                <tr>
                    <td class="title"><a href="/board/product/read.html{$param_read}">{$subject}</a></td>
                    <td>{$write_date|date:Y/m/d}</td>
                </tr>
                <tr>
                    <td class="title"><a href="/board/product/read.html{$param_read}">{$subject}</a></td>
                    <td>{$write_date|date:Y/m/d}</td>
                </tr>
            </tbody>
        </table>
        <p class="more"><a href="/board/product/list.html?board_no=6"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/layout/btn_board_more.gif" alt="더보기" /></a></p>
</div>

사용 가능 변수

board_listpackage_6

모듈명: product_listmain_1

설명

샘플코드

사용 가능 변수

모듈명: product_listmain_2

설명

샘플코드

사용 가능 변수

모듈명: product_listmain_3

설명

샘플코드

사용 가능 변수

모듈명: product_listmain_4

설명

샘플코드

사용 가능 변수

모듈명: product_listmain_5

설명

샘플코드

사용 가능 변수

모듈명: board_list_5

설명

샘플코드

사용 가능 변수

모듈명: board_list_6

설명

샘플코드

사용 가능 변수