컨텐츠 바로가기

업데이트 상세
제목 coupon_productdetail 모듈
최신소스





coupon_productdetail 모듈



쇼핑몰 데이터는 캐시를 이용해서 속도를 빠르게 할 수 있습니다.


하지만, 개인정보에 해당하는 내용들은

캐시 서버에 개인정보는 저장하지 않는 것이 개인정보 보호를 위해 좋습니다.


- 관련 게시글: ▶ [스마트디자인] 내 쇼핑몰을 빠르게 하고 싶다면? (클릭)








coupon_productdetail 모듈을 활용해서

쿠폰 다운로드 영역을 만들 수 있습니다.





1. PC

(1) html 수정하기

1-1) 쿠폰 영역의 디자인을 따로 관리할 수 있는 새로운 페이지(coupon/coupon_productdetail.html)를 생성합니다.
1-2) 새롭게 생성된 페이지에 아래의 코드를 복사, 저장합니다.

<div module="coupon_productdetailajax">
    <!--
        $coupon_down_result_url = /coupon/coupon_down_result.html
    -->
    <!--@css(/css/module/coupon/productDetailAjax.css)--><!-- 예제이며 원하시는 경로, 파일 이름으로 지정 가능합니다. -->
    <div class="title">
        <h3><span>쿠폰 다운로드</span></h3>
        <p class="button"><a href="#none" id="btn_all_coupondown" class="btnNormal">전체쿠폰다운받기</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>



2) 상품상세(product/detail.html)페이지에서 빨간색 코드(coupon_productdetail 모듈)을 삭제한 뒤, 파란색 코드를 추가합니다.


<div module="product_detail">
    <!--@css(/css/module/product/detail.css)-->
    <!--
$coupon_download_page = /coupon/coupon_productdetail.html
    -->
    <div class="headingArea">
      ...

    <div module="coupon_productdetail">
        <!--
            $coupon_down_result_url = /coupon/coupon_down_result.html
        -->
        <!--@css(/css/module/coupon/productDetail.css)-->
        <div class="title">
           ...
        </div>
        <div class="couponSkinArea">
          ....
        </div>
    </div>
 
    <div class="ec-product-coupon"></div> <!-- 쿠폰 다운로드 영역  -->

  ...
</div>




(2) 디자인 적용하기(css 수정하기)


새로운 css 파일을 생성한 뒤 아래의 코드를 복사하여 넣습니다.

예제로 css/module/coupon/productDetailAjax.css 를 생성하였습니다.

(이 파일은 1-1) 에서 생성한 coupon/coupon_productdetail.html 안에 들어가는 css 파일입니다.)


.xans-coupon-productdetailajax  { clear:both; overflow:hidden; }
.xans-coupon-productdetailajax  > .title { position:relative; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; }
.xans-coupon-productdetailajax  > .title h3 { padding:0 0 0 9px; font-size:12px; color:#008bcc; line-height:39px; }
.xans-coupon-productdetailajax  > .title .button { position:absolute; top:7px; right:0; padding:0 0 0 7px; background:#fff; }

.xans-coupon-productdetailajax  .couponSkinArea { padding:30px 0 0; text-align:center; }
.xans-coupon-productdetailajax  .couponSkinArea ul { zoom:1; margin:0 auto; padding:0; }
.xans-coupon-productdetailajax  .couponSkinArea ul:after { content:""; display:block; clear:both; }
.xans-coupon-productdetailajax  .couponSkinArea ul li { display:inline; float:left; width:216px; padding:0; list-style:none; }
.xans-coupon-productdetailajax  .couponSkinArea ul.grid1 { width:216px; }
.xans-coupon-productdetailajax  .couponSkinArea ul.grid2 { width:472px; }
.xans-coupon-productdetailajax  .couponSkinArea ul.grid2 li { margin:0 10px; }
.xans-coupon-productdetailajax  .couponSkinArea ul.grid3 { width:708px; }
.xans-coupon-productdetailajax  .couponSkinArea ul.grid3 li { margin:0 10px; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon { width:216px; height:105px; margin-bottom:20px; font-size:12px; line-height:1.5; text-align:center; background-repeat:no-repeat; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon img { border:0; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon p { margin:0; padding:0; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon .title { display:block; padding:8px 0 0; font-size:10px; line-height:15px; text-align:center; font-weight:normal; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon .discount { font-size:18px; line-height:28px; font-weight:bold; text-align:center; text-decoration:none; letter-spacing:-1px; text-decoration:none; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon .discount span { font-size:22px; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon .period { font-size:11px; line-height:13px; font-weight:bold; text-align:center; letter-spacing:-1px; }
.xans-coupon-productdetailajax  .couponSkinArea .coupon .button { margin:5px 0 0; text-align:center; }
.xans-coupon-productdetailajax  .couponSkinArea .imgCoupon .title,
.xans-coupon-productdetailajax  .couponSkinArea .imgCoupon .discount,
.xans-coupon-productdetailajax  .couponSkinArea .imgCoupon .period,
.xans-coupon-productdetailajax  .couponSkinArea .imgCoupon .button { display:none; }
.xans-coupon-productdetailajax  .couponSkinArea .imgCoupon .detail { height:100%; }
.xans-coupon-productdetailajax .couponSkinArea .discount { text-decoration:none; }

/* 쿠폰정보 레이어 */
#dCouponDetail { overflow:hidden; position:relative; width:398px; border:1px solid #757575; background:#fff; box-shadow:5px 5px 5px #d3d3d3; }
#dCouponDetail h3 { height:35px; padding:0 35px 0 19px; color:#fff; font-size:14px; line-height:35px; background:#495164; }
#dCouponDetail h3 + a { position:absolute; right:20px; top:10px; }
#dCouponDetail ul { padding:16px 10px 17px 20px; margin:25px 19px; background:#f5f5f5; }
#dCouponDetail ul li { margin:7px 0 0; color:#2e2e2e; line-height:18px; }
#dCouponDetail ul li:first-child { margin-top:0; }
#dCouponDetail ul + a { display:block; padding:12px 0; text-align:center; border-top:1px solid #d7d5d5; background:#fbfafa; }




2. 모바일

(1) html 수정하기

1-1) 쿠폰 영역의 디자인을 따로 관리할 수 있는 새로운 페이지(coupon/coupon_productdetail.html)를 생성합니다.
1-2) 새롭게 생성된 페이지에 아래의 코드를 복사, 저장합니다.


<div module="coupon_productdetailajax" class="ec-base-fold theme1 selected eToggle">
    <!--@css(/css/module/product/productDetailAjax.css)--> <!-- 예제이며 원하시는 경로, 파일 이름으로 지정 가능합니다. -->
    <div class="title">
        <h2>쿠폰 다운로드</h2>
    </div>
    <ul class="contents">
        <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>




2) 상품상세(product/detail.html)페이지에서 빨간색 코드(coupon_productdetail 모듈)을 삭제한 뒤, 파란색 코드를 추가합니다.


<!--@layout(/layout/basic/layout.html)-->
<div module="product_detail">
    <!--@css(/css/module/product/detail.css)-->
    <!--@js(/js/module/product/detail.js)-->
    <!--
$coupon_download_page = /coupon/coupon_productdetail.html
    -->
    <div id="titleArea">
     ...

    <div module="coupon_productdetail" class="ec-base-fold theme1 selected eToggle">
        <div class="title">
           ...
        </div>
        <ul class="contents">
           ...
        </ul>
    </div>

    <div class="ec-product-coupon"></div> <!-- 쿠폰 다운로드 영역 -->
     ...
</div>




(2) 디자인 적용하기(css 수정하기)


새로운 css 파일을 생성한 뒤 아래의 코드를 복사하여 넣습니다.

예제로 css/module/product/productDetailAjax.css 를 생성하였습니다.

(이 파일은 1-1) 에서 생성한 coupon/coupon_productdetail.html 안에 들어가는 css 파일입니다.)



/* 쿠폰 */
.xans-coupon-productdetailajax.ec-base-fold { margin:0 7px 7px; }
.xans-coupon-productdetailajax .contents { background:#fff; }
.xans-coupon-productdetailajax .contents li { padding:14px; border-top:1px solid #ececec; }
.xans-coupon-productdetailajax .contents li:first-child { border-top:0; }
.xans-coupon-productdetailajax .coupon { width:216px; height:105px; margin:10px auto; font-size:12px; line-height:1.5; text-align:center; font-family:Dotum, sans-serif; background-repeat:no-repeat; }
.xans-coupon-productdetailajax .coupon .title { display:block; padding:8px 0 0; font-size:10px; line-height:15px; text-align:center; font-weight:normal; font-family:Arial, sans-serif; }
.xans-coupon-productdetailajax .coupon .discount { font-size:18px; line-height:28px; font-weight:bold; text-align:center; letter-spacing:-1px; font-family:Dotum, sans-serif; text-decoration:none; }
.xans-coupon-productdetailajax .coupon .discount span { font-size:22px; font-family:Verdana, sans-serif; }
.xans-coupon-productdetailajax .coupon .period { font-size:11px; line-height:13px; font-weight:bold; text-align:center; font-family:Dotum, sans-serif; letter-spacing:-1px; }
.xans-coupon-productdetailajax .coupon .button { margin:5px 0 0; text-align:center; }




위와 같이 쿠폰다운로드를 적용하면

캐시 서버에 저장하지 않고, 안전하고 빠른 쇼핑몰 운영이 가능합니다.
목록 관리자게시 삭제 수정

최근본모듈

이전 모듈다음 모듈