Help Center
카페24 소식
[스마트디자인] 상품목록 및 상품상세화면에 쿠폰적용가 표시 기능개선
2013-01-16
안녕하세요, 카페24 운영도우미 입니다.
스마트디자인에 '쿠폰적용가' 표시 및 쿠폰 다운로드 기능 적용 안내드립니다.
직접다운로드 쿠폰이 발급되어 있는 경우
각 상품 별 가장 할인이 많이되는 쿠폰에 대한 할인금액 및 쿠폰적용가가 노출되며,
상품상세화면에서 해당 쿠폰을 바로 다운로드할 수 있게 되어
고객분들이 좀 더 편리하게 구매하실 수 있습니다.
자세한 내용은 아래를 참조해 주세요.
1. 제목 : 상품목록 및 상품상세화면에 쿠폰적용가 표시 기능개선
2. 적용일자 : 2013-01-16 (수)
3. 업데이트 내용
1) 직접다운로드 쿠폰이 발행되어져 있는지 확인합니다.
(쿠폰만들기 : '쇼핑몰어드민 > 프로모션 > 쿠폰관리 > 쿠폰만들기' 화면에서 직접다운로드 쿠폰 선택)
2) '상품관리 > 표시항목관리 > 상세정보 기본표시 설정' 메뉴로 이동하여 추가된 '쿠폰적용가'에 체크합니다.
3) '상품관리 > 표시항목관리 > 목록 기본표시설정' 메뉴로 이동하여 일반상품, 추천상품 등
원하시는 목록에 신규로 추가된 '쿠폰할인'에 체크합니다.
<li> <strong class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</strong> <span class="price">쿠폰할인 : {$c_dc_price}</span> <span class="manu">{$manu_name}</span> </li> <table border="1"> <tr class="{$custom_price_display|display}"> <th scope="row">소비자가</th> <td><strong class="sale">{$product_custom|numberformat}</strong></td> </tr> <tr class="{$c_dc_price_display|display}"> <th scope="row">쿠폰적용가</th> <td> {$c_dc_price_apply}원 ({$c_dc_price} 할인)<br /><a href="#none" onclick="{$c_dc_price_js}"><img src="{$c_dc_price_img}" /></a> </td> </tr> </table> <!--@layout(/layout/basic/popup.html)--> <div class="layInner"> .layPop { background:#b4bdc5; display:inline-block; .display:inline; zoom:1; position:relative; min-width:480px; } .xans-coupon-productpopup .coupon { width:372px; margin:0 auto; } #dCouponDetail { 
4) HTML 수정/추가
① 수정파일 : 메인(indexl.html), 상품목록(product/list.html)
필요한 곳의 상품모듈 안의 ul > li 안에 아래와 같이 파란색 코드를 추가합니다.
▼ 메인화면 적용예시
- 해당 상품 가격에서 가장 할인액이 큰 쿠폰할인이 표시되며, 해당 쿠폰에 설정된 속성과 동일하게
표시됩니다. ( 원 / % )
② 수정파일 : 상품상세(product/detial.html)
아래와 같이 상세정보 내역의 Table 중 필요한 곳에 파란색 코드를 추가합니다.
▼ 상품 상세화면 적용예시
- 쿠폰이 적용된 가격과 함께 할인금액이 표시됩니다.
- 하단의 다운로드 버튼을 클릭하여 쿠폰을 바로 다운로드 할 수 있습니다.
③ 파일추가 : product/coupon_popup.html
위 경로로 html 파일을 추가하신 후 아래 소스를 삽입합니다.
<div module="coupon_productpopup">
<!--@css(/css/module/product/coupon_productpopup.css)-->
<h1><span>최대 할인쿠폰 다운받기</span></h1>
<div class="coupon">
<div class="coupon_content" {$call_coupon_detail} style="background-image:url('{$background_url}')">
<p class="name">{$coupon_name}</p>
<p class="sale">{$coupon_content}</p>
<p class="date">사용기간 : {$coupon_period}</p>
</div>
<p class="btn"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="쿠폰 다운 받기" /></a></p>
</div>
</div>
</div>
④ 파일추가 : CSS/모듈/상품/coupon_productpopup.css
위 경로로 css 파일을 추가하신 후 아래 소스를 삽입합니다.
.layPop .close { position:absolute; right:0; top:0; text-align:right; }
.layPop .close img { cursor:pointer; }
.layPop h1 { color:#272823; font-size:26px; }
.layPop h1 span { display:block; padding:28px 25px 25px; }
.layPop .titleArea h2 { color:#fff; }
.layInner { position:relative; padding:20px 25px 0; background:#fff; color:#000; border-top:1px solid #99a2aa; }
.layPop .btnArea { overflow:hidden; background:#fff; width:100%; padding:30px 30px 30px 27px; margin:0; position:relative; left:-25px; text-align:right; }
.xans-coupon-productpopup .coupon .coupon_content { position:relative; width:352px; text-align:center; height:144px; margin:0 0 10px; border:10px solid #bfbecc; background:url(http://img.echosting.cafe24.com/design/skin/mono/product/bg_coupon1.jpg) 50% 50% no-repeat; cursor:pointer; }
.xans-coupon-productpopup .coupon .coupon_content .name { padding:10px 0; }
.xans-coupon-productpopup .coupon .coupon_content .sale { font-size:40px; padding:15px 0; line-height:normal; letter-spacing:-1px; font-weight:bold; }
.xans-coupon-productpopup .coupon .coupon_content .date { position:absolute; top:125px; left:0; width:100%; color:#666; font-size:.9em; }
.xans-coupon-productpopup .coupon .btn { text-align:right; }
position: relative; background:#fff; overflow:hidden; width:372px; margin:-20px 0 0 -40px; padding:10px; border:1px solid #7d7c8b;
/* Opera */ box-shadow:5px 5px 5px #d3d3d3;
/* Firefox */ -moz-box-shadow:5px 5px 5px #d3d3d3;
/* Safiri, Chrome */ -webkit-box-shadow:5px 5px 5px #d3d3d3;
/* IE */ filter:progid:DXImageTransform.Microsoft.Shadow(color=#d3d3d3,direction=135, strength=10);
}
#dCouponDetail h3 { float:left; padding:0 0 10px; color:#34a7b3; }
#dCouponDetail ul { clear:both; padding:10px; margin:10px 0; background:#f1f1f1;}
#dCouponDetail ul li { line-height:18px; font-size:11px; }
#dCouponDetail img { float:right; }
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]