할인된 금액보다는
얼마나 할인되었는지가 중요하다!
할인은 고객을 끌어들이는 좋은 방법의 하나입니다.
하지만 무조건 싼 것보다는
얼마나 할인된 것인지가 더 중요할 수 있다는 사실!
할인이 얼마큼 적용되었는지 보여준다면
고객들의 구매 욕구를 더 높일 수 있겠죠?
고객들이 처음으로 상품을 마주하는 메인과 상품 분류 페이지는 물론
상품 확대 보기 및 상세 페이지에서 할인율/할인 금액을 표시하는 방법을 소개해드립니다.
※ 단, 메인이나 상품 목록에 노출되는 상품이 많을 경우 할인율 계산으로 인해 페이지 로딩이 느려질 수 있습니다.
공통 사항
1. 스마트디자인 편집장에서 신규 js 파일 추가 후 아래 소스 삽입
- 위치: /js/module/product/sale_price.js
※ 해당 가이드는 기본 스킨을 기준으로한 js 이므로 표시가 안 될 경우 페이지에 맞게 커스터마이징해 사용하기 바랍니다.
예시) 상품목록 페이지에서 body id="JD_MAIN" 이고 상품분류 페이지에서 body id="COMMON" 일 경우
해당 파일에 var mainEl = $("#JD_MAIN, #COMMON"); 로 변경
$(document).ready(function() { var filter = "win16|win32|win64|mac|macintel";
var device = "pc";
if (navigator.platform) {
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) { device = "mobile"; }
}
/**
* 상품상세, 상품 확대보기(팝업) - 소비자가 할인표시 */
var oPriceInfoEl = $('#ec-product-price-info');
if (oPriceInfoEl.length > 0) {
var salePriceEl = $('#span_product_price_text');
percentageCul(oPriceInfoEl, salePriceEl);
}
/**
* 상품목록/메인진열 - 소비자가 할인표시*/
var mainEl = $("#main");
if (mainEl.length > 0) { var productListEl = $('.xans-product-listmain, .xans-product-listrecommend, .xans-product-listnew, .xans-product-listnormal');
for (var i = 0; i < productListEl.length; i++) {
var prdListEl = productListEl.eq(i).find('.prdList > li');
for (var j = 0; j < prdListEl.length; j++) {
var priceEl = prdListEl.eq(j).find('.description'),
salePriceEl = priceEl.find('.xans-product > li').eq(1).find('span:eq(1)');
if (device == "mobile") {
salePriceEl = priceEl.find('.spec >li.price');
} percentageCul(priceEl, salePriceEl);
}
}
}
function percentageCul(target, salePriceEl) {
var iCustomPrice = parseInt(target.attr('ec-data-custom')),
iPrice = parseInt(target.attr('ec-data-price')),
sDisplayAmount = 'p', // p:할인율, w:할인금액
iOfftoFixed = 1, // 할인율 소수점자릿수
sSaleText = '',
regexp = /\B(?=(\d{3})+(?!\d))/g;
if (iCustomPrice > 0 && iPrice > 0 && iPrice != iCustomPrice) {
if (sDisplayAmount == 'p') {
sSaleText = (((iCustomPrice - iPrice) / iCustomPrice) * 100).toFixed(iOfftoFixed) + '% OFF';
} else if (sDisplayAmount == 'w') {
sSaleText = parseInt(iCustomPrice - iPrice).toString().replace(regexp, ',') + '원 OFF';
}
salePriceEl.append('<span class="ec-sale-rate"> ' + sSaleText + '</span>');
}
}
});
|
메인 페이지에 노출하기
1. 상품 메인 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체
- 상품 메인: /product/index.html
<div class="description"> <div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}"> <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"> <span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong> <ul module="product_ListItem" class="spec"> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
|
2. 해당 파일 최하단에 아래 소스 추가
<!--@js(/js/module/product/sale_price.js)--> |
상품 분류 페이지에 노출하기
1. 상품 분류 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체
- 상품 분류: /product/list.html
<중략> <div class="description"> <div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}"> <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"> <span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong> <ul module="product_ListItem" class="spec"> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<중략>
|
2. 해당 파일 최하단에 아래 소스 추가
<!--@js(/js/module/product/sale_price.js)--> |
상품 상세 페이지에 노출하기
1. 상품 상세 파일에 파란색 코드 삽입
- 상품 상세: /product/detail.html
<div module="product_action"> <div id="ec-product-price-info" class="displaynone" ec-data-custom="{$product_custom}"ec-data-price="{$product_price}"></div> <div class="ec-base-button gColumn"> <a href="#none" class="btnSubmit sizeL {$buy_display|display}" onclick="{$action_buy}"> <span id="{$btn_buy_id}">바로 구매하기</span>
|
2. 해당 파일 최하단에 아래 소스 추가
<!--@js(/js/module/product/sale_price.js)--> |
상품 이미지 확대 페이지에 노출하기
1. 상품 이미지 확대 파일에 파란색 코드 삽입
- 상품 이미지 확대: /product/image_zoom.html
<div module="product_action"> <div id="ec-product-price-info" class="displaynone" ec-data-custom="{$product_custom}"ec-data-price="{$product_price}"></div> <div class="ec-base-button gColumn"> <a href="#none" class="btnSubmit sizeL {$buy_display|display}" onclick="{$action_buy}"> <span id="{$btn_buy_id}">바로 구매하기</span>
|
2. 해당 파일 최하단에 아래 소스 추가
<!--@js(/js/module/product/sale_price.js)--> |
디자인 TIP
원하는 css 파일 최하단에 아래 소스를 삽입하면 위 이미지 속 디자인으로 노출되며
별도로 제작한 디자인을 적용할 수 있습니다.
<적용 가능 위치 예시>
/css/module/product/detail.css
/css/module/product/menupackage.css
/css/module/product/zoomPackage.css
/* 소비자가 기준 할인가 */ .xans-product-detail .ec-sale-rate { display:inline-block; margin-left:10px; border:1px solid #df6c6c; border-radius:3px; color:#fff; background:#df6c6c; text-align:center; padding:4px 6px; font-weight:normal; font-size:10px;}
|
