[카페24쇼핑몰] 상품상세 하단영역

티스토리 뷰

웹 코딩/cafe24 - PC디자인

[카페24쇼핑몰] 상품상세 하단영역

nopinokio 2015. 4. 7. 19:10

[카페24쇼핑몰] 상품상세 하단영역

<div module="coupon_productdetail">
    <!--@css(/css/module/coupon/productDetail.css)-->
    <!--
        $coupon_down_result_url = /coupon/coupon_down_result.html
    -->
    <div class="title">
        <h3><span>쿠폰 다운로드</span></h3>
        <p class="button"><a href="#none" id="btn_all_coupondown"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_coupon_down.gif" alt="전체쿠폰다운받기" /></a></p>
    </div>
    <div class="couponSkinArea">
        <!--
            진열 방식에따라 아래의 ul class 변경
            1열 : ul class="grid1"
            2열 : ul class="grid2"
            3열 : ul class="grid3"
        -->
        <ul class="grid3">
            <li>
                <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                    <div class="detail" {$call_coupon_detail}>
                        <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                        <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                        <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                    </div>
                    <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
                </div>
            </li>
            <li>
                <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                    <div class="detail" {$call_coupon_detail}>
                        <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                        <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                        <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                    </div>
                    <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
                </div>
            </li>
        </ul>
    </div>
</div>

변수명	설명
{$coupon_name}	쿠폰명
{$coupon_issue_url}	쿠폰발급 URL
{$download_url}	다운로드 버튼 URL
{$background_class}	사용자지정 이미지(imgCoupon 클래스)
{$call_coupon_detail}	쿠폰정보 상세보기(onclick)
{$background_url}	쿠폰배경이미지 url
{$coupon_content}	쿠폰내용
{$coupon_period}	쿠폰사용기간

<div module="product_additional">
    <!--@css(/css/module/product/additional.css)-->
    <!--@js(/js/module/product/review.js)-->
    <!--@js(/js/module/product/qna.js)-->
    <!-- 상품상세정보 -->
    <div id="prdDetail">
        <ul class="link">
            <li class="selected"><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="cont">
            <h3>상품상세정보</h3>
            {$product_detail}
        </div>
    </div><!-- //상품상세정보 -->
    <!-- 상품결제정보 -->
    <div id="prdPayment">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li class="selected"><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="cont">
            <h3>상품결제정보</h3>
            {$payment_info}
        </div>
    </div><!-- //상품결제정보 -->
    <!-- 배송정보 -->
    <div id="prdDelivery">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li class="selected"><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="cont">
            <h3>배송정보</h3>
            <ul class="delivery">
                <li>배송 방법 : {$shipping_method}</li>
                <li>배송 지역 : {$shipping_area}</li>
                <li>배송 비용 : {$shipping_fee}</li>
                <li>배송 기간 : {$shipping_period}</li>
                <li>배송 안내 : {$shipping_info}</li>
            </ul>
        </div>
    </div><!-- //배송정보 -->
    <!-- 교환 및 반품정보 -->
    <div id="prdChange">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li class="selected"><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="cont">
            <h3>교환 및 반품정보</h3>
            {$exchange_info}
        </div>
    </div><!-- //교환 및 반품정보 -->
    <!-- 서비스문의 -->
    <div id="prdService">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li class="selected"><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="cont">
            <h3>서비스문의</h3>
            {$service_info}
        </div>
    </div><!-- //서비스문의 -->
    <!-- 상품사용후기 -->
    <div id="prdReview">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li class="selected"><a href="#prdReview">상품사용후기</a></li>
            <li><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="board">
            <h3>상품사용후기</h3>
            <p class="desc">상품의 사용후기를 적어주세요.</p>
            <div module="product_review">
                <a name="use_review"></a>
                <p class="noAccess {$deny_display|display}">글읽기 권한이 없습니다.</p>
                <div class="minor {$adult_display|display}">
                    <p><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/ico_under19.gif" alt="" /> <strong>"19세 미만의 미성년자"</strong>는 출입을 금합니다!</p>
                    <p class="button"><a href="/intro/board.html{$returnParam}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_adult_certification.gif" alt="성인인증 하기" /></a></p>
                </div>
                <table border="1" summary="" class="board {$list_display|display}">
                    <caption>상품사용후기</caption>
                    <colgroup>
                        <col style="width:70px;" />
                        <col style="width:auto" />
                        <col style="width:100px;" />
                        <col style="width:80px;" />
                        <col style="width:80px;" />
                        <col style="width:80px;" class="{$use_point_display|display}" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">번호</th>
                            <th scope="col">제목</th>
                            <th scope="col">작성자</th>
                            <th scope="col">작성일</th>
                            <th scope="col">조회</th>
                            <th scope="col" class="{$use_point_display|display}">평점</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{$no}</td>
                            <td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
                            <td>{$member_icon} {$writer}</td>
                            <td class="txtLess">{$write_date|date:Y-m-d}</td>
                            <td class="txtLess">{$hit_count}</td>
                            <td class="{$use_point_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>
                        </tr>
                        <tr>
                            <td>{$no}</td>
                            <td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
                            <td>{$member_icon} {$writer}</td>
                            <td class="txtLess">{$write_date|date:Y-m-d}</td>
                            <td class="txtLess">{$hit_count}</td>
                            <td class="{$use_point_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p class="btnArea">
                <a href="{$review_write}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_board_write1.gif" alt="상품문의하기" /></a>
                <a href="{$review_list}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_board_more.gif" alt="모두 보기" /></a>
            </p>
            <div module="product_reviewpaging" class="paging">
                <p class="first"><a href="first {$param_first}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_comment_first.gif" alt="첫 페이지" /></a> </p>
                <p><a href="{$param_before}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_comment_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_comment_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_comment_last.gif" alt="마지막 페이지" /></a> </p>
            </div>
        </div>
    </div><!-- //상품사용후기 -->
    <!-- 상품 Q&A -->
    <div id="prdQnA">
        <ul class="link">
            <li><a href="#prdDetail">상품상세정보</a></li>
            <li><a href="#prdPayment">상품결제정보</a></li>
            <li><a href="#prdDelivery">배송정보</a></li>
            <li><a href="#prdChange">교환 및 반품정보</a></li>
            <li><a href="#prdService">서비스문의</a></li>
            <li><a href="#prdReview">상품사용후기</a></li>
            <li class="selected"><a href="#prdQnA">상품Q&A</a></li>
            <li><a href="#prdRelated">관련상품</a></li>
        </ul>
        <div class="board">
            <h3>상품 Q&A</h3>
            <p class="desc">상품에 대해 궁금한 점을 해결해 드립니다.</p>
            <div module="product_qna">
                <a name="use_qna"></a>
                <p class="noAccess {$deny_display|display}">글읽기 권한이 없습니다.</p>
                <div class="minor {$adult_display|display}">
                    <p><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/ico_under19.gif" alt="" /> <strong>"19세 미만의 미성년자"</strong>는 출입을 금합니다!</p>
                    <p class="button"><a href="/intro/board.html{$returnParam}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_adult_certification.gif" alt="성인인증 하기" /></a></p>
                </div>
                <table border="1" summary="" class="board {$list_display|display}">
                    <caption>상품 Q&A</caption>
                    <colgroup>
                        <col style="width:70px;" />
                        <col style="width:134px;" />
                        <col style="width:auto" />
                        <col style="width:80px;" />
                        <col style="width:80px;" />
                        <col style="width:55px;" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">번호</th>
                            <th scope="col">카테고리</th>
                            <th scope="col">제목</th>
                            <th scope="col">작성자</th>
                            <th scope="col">작성일</th>
                            <th scope="col">조회</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{$no}</td>
                            <td>{$category_name}</td>
                            <td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
                            <td>{$member_icon} {$writer}</td>
                            <td class="txtLess">{$write_date|date:Y-m-d}</td>
                            <td class="txtLess">{$hit_count}</td>
                        </tr>
                        <tr>
                            <td>{$no}</td>
                            <td>{$category_name}</td>
                            <td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
                            <td>{$member_icon} {$writer}</td>
                            <td class="txtLess">{$write_date|date:Y-m-d}</td>
                            <td class="txtLess">{$hit_count}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p class="btnArea">
                <a href="{$qna_write}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_board_write2.gif" alt="상품문의하기" /></a>
                <a href="{$qna_list}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_board_more.gif" alt="모두 보기" /></a>
            </p>
            <div module="product_qnapaging" class="paging">
                <p class="first"><a href="{$param_first}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_comment_first.gif" alt="첫 페이지" /></a> </p>
                <p><a href="{$param_before}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_comment_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_comment_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_comment_last.gif" alt="마지막 페이지" /></a> </p>
            </div>
        </div>
    </div><!-- //상품Q&A -->
</div>

변수명	설명
{$add_option_name}	추가 옵션명
{$form.add_option}	추가 옵션내용
{$description_mobile}	모바일 상품설명

변수명	설명
{$icon_mobile}	모바일 아이콘
{$review_write}	사용후기 쓰기
{$review_list}	사용후기 전체목록
{$no}	번호
{$btn_cont_id}	게시물ID
{$subject}	제목
{$writer}	작성자
{$write_date}	작성일
{$point}	평점
{$cont_id}	본문ID
{$content}	본문내용
{$use_point_display}	상세페이지 내 평점 기능 사용여부 (class)
{$adult_display}	성인인증하기 화면 보이기
{$deny_display}	읽기 권한이 없음 화면 보이기
{$list_display}	읽기 권한이 있을 경우 화면 보이기
{$returnParam}	성인인증 후 돌아올 URL parameter

변수명	설명
{$param_first}	첫 페이지
{$param_before}	이전 페이지
{$param}	현재 페이지
{$param_next}	다음 페이지
{$param_last}	마지막 페이지
{$param_class}	현재 페이지 (class)

변수명	설명
{$icon_mobile}	모바일 아이콘
{$qna_write}	Q＆A 쓰기
{$qna_list}	Q＆A 전체목록
{$no}	번호
{$btn_cont_id}	게시물ID
{$subject}	제목
{$writer}	작성자
{$write_date}	작성일
{$hit_count}	조회수
{$cont_id}	본문ID
{$content}	본문내용
{$use_point_display}	상세페이지 내 평점 기능 사용여부 (class)
{$adult_display}	성인인증하기 화면 보이기
{$deny_display}	읽기 권한이 없음 화면 보이기
{$list_display}	읽기 권한이 있을 경우 화면 보이기
{$returnParam}	성인인증 후 돌아올 URL parameter

변수명	설명
{$param_first}	첫 페이지
{$param_before}	이전 페이지
{$param}	현재 페이지
{$param_next}	다음 페이지
{$param_last}	마지막 페이지
{$qna_list}	Q＆A 리스트 페이지 링크
{$qna_write}	Q＆A 쓰기 페이지 링크
{$param_class}	현재 페이지 (class)

<div module="product_relation" id="prdRelated">
    <!--@css(/css/module/product/relation.css)-->
    <ul class="link">
        <li><a href="#prdDetail">상품상세정보</a></li>
        <li><a href="#prdPayment">상품결제정보</a></li>
        <li><a href="#prdDelivery">배송정보</a></li>
        <li><a href="#prdChange">교환 및 반품정보</a></li>
        <li><a href="#prdService">서비스문의</a></li>
        <li><a href="#prdReview">상품사용후기</a></li>
        <li><a href="#prdQnA">상품Q&A</a></li>
        <li class="selected"><a href="#prdRelated">관련상품</a></li>
    </ul>
    <div class="relation">
        <h3>관련상품</h3>
        <div module="product_relationlist">
            <ul class="prdList">
                <li class="item">
                    <div class="box">
                        <a href="/product/detail.html{$param}"><img src="{$img_small}" alt="" class="thumb" /></a>
                        <p><a href="/product/detail.html{$param}">{$name}</a></p>
                        <strong>{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
                    </div>
                </li>
                <li class="item">
                    <div class="box">
                        <a href="/product/detail.html{$param}"><img src="{$img_small}" alt="" class="thumb" /></a>
                        <p><a href="/product/detail.html{$param}">{$name}</a></p>
                        <strong>{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

변수명	설명
{$param}	페이지 전달 값
{$img}	상품 이미지(소)
{$img_small}	상품 이미지(중)
{$img_medium}	상품 이미지(대)
{$img_big}	상품 이미지(확대)
{$img_add_tiny1}	추가 이미지1(소)
{$img_add_medium1}	추가 이미지1(중)
{$img_add_big1}	추가 이미지1(대)
{$img_add_tiny2}	추가 이미지2(소)
{$img_add_medium2}	추가 이미지2(중)
{$img_add_big2}	추가 이미지2(대)
{$img_add_tiny3}	추가 이미지3(소)
{$img_add_medium3}	추가 이미지3(중)
{$img_add_big3}	추가 이미지3(대)
{$img_add_tiny4}	추가 이미지4(소)
{$img_add_medium4}	추가 이미지4(중)
{$img_add_big4}	추가 이미지4(대)
{$link}	링크
{$name}	상품명
{$product_code}	상품번호
{$product_price}	판매금액
{$price_unit_head}	판매금액 단위(앞)
{$price_unit_tail}	판매금액 단위(뒤)
{$product_price_text_use}	판매가 대체 문구 사용여부
{$product_price_text}	판매가 대체 문구
{$mileage}	마일리지
{$rel_option_name}	옵션명
{$form.rel_option}	옵션정보
{$rel_add_option_name}	추가옵션명
{$form.rel_add_option}	추가옵션정보
{$form.quantity}	수량
{$quantity_up_class}	수량증가 class명
{$quantity_down_class}	수량감소 class명
{$form.checkbox}	체크박스
{$action_basket}	장바구니담기 액션
{$btn_basket_display}	체크박스담기 표시여부

변수명	설명
{$param}	페이지 전달 값
{$img}	상품 이미지
{$name}	상품 명
{$soldout_icon}	품절 아이콘
{$recommend_icon}	추천 아이콘
{$new_icon}	신제품 아이콘
{$product_icons}	상품 아이콘
{$benefit_icons}	혜택 아이콘
{$price_unit_head}	결제 화폐 표시 앞부분
{$product_price}	판매금액
{$price_unit_tail}	결제 화폐 표시 뒷부분
{$mileage_icon}	적립금 아이콘
{$mileage_value}	적립금액

저작자표시 비영리 동일조건

'웹 코딩 > cafe24 - PC디자인' 카테고리의 다른 글

[카페24쇼핑몰] 상품상세 검색 (1)	2015.04.07
[카페24쇼핑몰] 최근 본 상품 목록 (0)	2015.04.07
[카페24쇼핑몰] 이미지 확대보기 팝업 (0)	2015.04.07
[카페24쇼핑몰] 최대할인쿠폰 다운받기 팝업 (0)	2015.04.07
[카페24쇼핑몰] 상품조르기 팝업 (0)	2015.04.07

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

💸원 and beyond

티스토리 뷰

[카페24쇼핑몰] 상품상세 하단영역

'웹 코딩 > cafe24 - PC디자인' 카테고리의 다른 글

티스토리툴바