고객들이 처음으로 상품을 마주하는 메인과 상품 분류 페이지, 상품 확대 보기, 상세 페이지에서 할인율과 할인 금액을 표시할 수 있어요.
단, 메인이나 상품 목록에 노출되는 상품이 많다면, 할인율 계산으로 인해 페이지 로딩이 느려질 수 있으니 주의해 주세요.
자세히 알아보기
공통 사항
- 스마트디자인 편집 창에서 신규 js 파일을 추가해 주세요.
그다음 아래 소스를 삽입해 주세요.- 위치: /js/module/product/sale_price.js
Note
해당 가이드는 기본 스킨을 기준으로 한 js예요.
표시가 되지 않는다면 페이지에 맞게 커스터마이징해서 사용해 주세요.
예시. 상품 목록 페이지에서 body id="JD_MAIN" 이고, 상품 분류 페이지에서 body id="COMMON" 이라면, 해당 파일에 var mainEl = $("#JD_MAIN, #COMMON"); 으로 변경해 주세요.
EC$(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(' ' + sSaleText + '');
}
}
});
1. 메인 페이지에 노출하기
-
- 상품 메인 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체해 주세요.
- 위치: 상품 메인: 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>
- 위치: 상품 메인: index.html
- 해당 파일의 맨 아래쪽에 아래 소스를 추가해 주세요.
<!--@js(/js/module/product/sale_price.js)-->
- 상품 메인 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체해 주세요.
2. 상품 분류 페이지에 노출하기
- 상품 분류 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체해 주세요.
- 위치: 상품 분류: /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>
<중략>
- 위치: 상품 분류: /product/list.html
- 해당 파일의 맨 아래쪽에 아래 소스를 추가해 주세요.
<!--@js(/js/module/product/sale_price.js)-->
3. 상품 상세 페이지에 노출하기
- 상품 이미지의 확대 파일에 파란색 코드를 삽입해 주세요.
- 위치: 상품 상세: /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>
- 위치: 상품 상세: /product/detail.html
- 해당 파일의 맨 아래쪽에 아래 소스를 추가해 주세요.
<!--@js(/js/module/product/sale_price.js)-->
4. 상품 이미지 확대 페이지에 노출하기
- 상품 이미지의 확대 파일에 파란색 코드를 삽입해 주세요.
- 위치: 상품 이미지 확대: /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>
- 위치: 상품 이미지 확대: /product/image_zoom.html
- 해당 파일의 맨 아래쪽에 아래 소스를 추가해 주세요.
<!--@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;}
-
- <적용 가능 위치 예시>