카페24 질문입니다
본문
HTML
---------------------------------------------------------------------------------------------------------
<li id="anchorBoxId_{$product_no}">
<div class="prd-item">
<div class="thumbnail">
<div class="prdImg">
<a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span><div class="soldout_icon {$soldout_icon|display}">{$soldout_icon}</div></a>
<div class="wish">
<span class="{$list_wish_icon|display}">{$list_wish_icon}</span>
<span class="{$basket_icon|display}">{$basket_icon}</span>
</div>
</div>
</div>
<div class="displaynone">
<p class="pCustom">{$product_custom}</p>
<p class="pPrice">{$product_price}</p>
<p class="pSale">{$optimum_discount_price}</p>
</div>
<div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<p class="summary {$summary_desc|display}">{$summary_desc}</p>
<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}" rel="{$item_title|striptag}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}" rel="{$item_title|striptag}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
<div class="icon">
<div class="promotion">{$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$today_arrival_icon} {$pickup_icon} {$benefit_icons}</div>
<div class="button">
<div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div>
<div class="option">{$option_preview_icon}</div> {$zoom_icon}
</div>
</div>
</div>
</div>
</li>
<li id="anchorBoxId_{$product_no}">
<div class="prd-item">
<div class="thumbnail">
<div class="prdImg">
<a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span><div class="soldout_icon {$soldout_icon|display}">{$soldout_icon}</div></a>
<div class="wish">
<span class="{$list_wish_icon|display}">{$list_wish_icon}</span>
<span class="{$basket_icon|display}">{$basket_icon}</span>
</div>
</div>
</div>
<div class="displaynone">
<p class="pCustom">{$product_custom}</p>
<p class="pPrice">{$product_price}</p>
<p class="pSale">{$optimum_discount_price}</p>
</div>
<div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<p class="summary {$summary_desc|display}">{$summary_desc}</p>
<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}" rel="{$item_title|striptag}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}" rel="{$item_title|striptag}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
<div class="icon">
<div class="promotion">{$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$today_arrival_icon} {$pickup_icon} {$benefit_icons}</div>
<div class="button">
<div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div>
<div class="option">{$option_preview_icon}</div> {$zoom_icon}
</div>
</div>
</div>
</div>
</li>
---------------------------------------------------------------------------------------------------------
JS
---------------------------------------------------------------------------------------------------------
$(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 = $('.xans-product-detail .prd-price'),
saleNonPriceEl = $('.xans-product-detail .dis-product-custom');
percentageCul(oPriceInfoEl, salePriceEl);
}
/**
* 상품목록/메인진열 - 소비자가 할인표시
var mainEl = $("body");
if (mainEl.length > 0) {
var productListEl = $('.xans-search-result, .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('.spec > li[rel="판매가"]').find('span:eq(1)');
saleNonPriceEl = priceEl.find('.spec > li[rel="소비자가"]');
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 = 0, // 할인율 소수점자릿수
sSaleText = '',
regexp = /\B(?=(\d{3})+(?!\d))/g;
if (iCustomPrice > 0 && iPrice > 0 && iPrice != iCustomPrice) {
if ( target == priceEl ) {
saleNonPriceEl.css({'display':'inline-block'});
}
if (sDisplayAmount == 'p') {
sSaleText = ( ( (iCustomPrice - iPrice) / iCustomPrice ) * 100 ).toFixed(iOfftoFixed);
if ( sSaleText >= 50 ){
salePriceEl.prepend('<span class="ec-sale-rate ec-sale-rate-50"> ' + sSaleText + '<span>%</span></span>');
} else {
salePriceEl.prepend('<span class="ec-sale-rate"> ' + sSaleText + '<span>%</span></span>');
}
} else if (sDisplayAmount == 'w') {
sSaleText = parseInt(iCustomPrice - iPrice).toString().replace(regexp, ',') + '<span>원</span>';
salePriceEl.prepend('<span class="ec-sale-rate"> ' + sSaleText + '</span>');
}
} else if ( iCustomPrice == 0 || iPrice >= iCustomPrice ) {
saleNonPriceEl.remove();
}
}
oPriceInfoEl.remove();*/
calculate_sale_rate();
});
function calculate_sale_rate() {
$(".prdList > li").each(function() {
var pCustom = Number($(this).find(".pCustom").text().replace(/,/g,'').replace(/원/g,''));
var pPrice = Number($(this).find(".pPrice").text().replace(/,/g,'').replace(/원/g,''));
var pSale = Number($(this).find(".pSale").text().replace(/,/g,'').replace(/원/g,''));
console.log(pSale);
var pPer = 0;
if( pCustom > pPrice && pPrice > pSale && pCustom > 0 && pSale > 0 ){
pPer = ((1-( pSale / pCustom )) * 100).toFixed(0);
}else if( pCustom > pPrice && pSale > 0 ){
pPer = ((1-( pSale / pCustom )) * 100).toFixed(0);
}
else if( pCustom > pPrice ){
pPer = ((1-( pPrice / pCustom )) * 100).toFixed(0);
}else if( pPrice > pSale && pSale > 0 ){
pPer = ((1-( pSale / pPrice )) * 100).toFixed(0);
};
var isSale = $(this).find('.spec').find('.discount_percent').length;
if(pPer && !isSale){
$(this).find('.spec').prepend( '<li class="discount_percent">'+ pPer +'%</li>' );
}
/*if(pSale) {
$(this).find('.price').css('text-decoration', 'line-through');
$(this).find('.price_sale ').prepend("최종할인가 : ");
} */
});
}
---------------------------------------------------------------------------------------------------------
세일가(pSale)와 정가(pCustom), 판매가(pPrice)가 있습니다.
만약 세일가가 판매가보다 낮을경우 판매가가 안보이게 설정을 하고싶은데
if (pSale < pPrice)
{
document.getElementById("pPrice").style.display = "none";
}
이렇게는 적용이 안되나봐요 ㅜ
자바스크립트는 처음이라 이해가 잘 되지 않습니다..
도움을 주실 분 있으신가요?
답변 1
"pPrice"는 id가 아니라 클래스로 작성된 것 같습니다.
getElementById는 id값을 선택하는 선택자이니 대신 querySelector 같은 선택자를 이용해서 사용해보세요.