[jquery]카페24 쇼핑몰 디자인 수정 - 상품상세페이지 적립금 할인율 표시하기
상품 상세페이지에서 비회원인 경우 적립금표시가 금액(적립율)로 표시가 되지만
회원으로 로그인을 하게 되면 표기방법이 다르게 나온다.
기본적립율과 회원적립율이 개별적으로 나오게 되며
전체 회원등급에 따른 내용이 표기가 되는데
굳이 여러 등급이 필요하지 않은 경우 페이지가 어지럽고 보기 불편하다.
카페24 고객센터에 문의를 하였더니 지원하지 않는 서비스라고 하여
직접 처리를 하게 되었다.
판매가와 할인판매가, 적립금이 있는데 이걸 jquery 로 값을 불러와서
처리를 해주었다.
개발자 도구에서 해당부분을 찾아보면 아래와 같이 나온다.
<span id="span_mileage_text"> 629원</span>
<strong id="span_product_price_text" style="text-decoration: line-through;">69,900원</strong>
<span id="span_product_price_sale">62,910원 <span style="font-size:11px;color:#5b5b5b;">(6,990원 할인)</span> </span>
id 값들만 가져와서 처리하면 되므로 어렵지 않게 처리할 수 있다.
$(document).ready(function(){
function viewDiscount(){
var saleP = $('#span_product_price_sale').text().split("(")[0].replace(/[^0-9]/g,"");
var miles = $("#span_mileage_text").text().replace(/[^0-9]/g,"");
var orgmiles = $("#span_mileage_text").text();
var perView = $("#span_mileage_text").text() + ' (' + Math.ceil((miles/saleP)*100) + '%)';
$("#span_mileage_text").text(perView);
}
viewDiscount();
});
위에서는 할인판매가 기준으로 적립금을 지급하느라 세일가격을 가져왔는데
필요한 부분에 따라 해당 값을 설정하면 간단하게 처리할 수 있다.
위 내용은 따로 js 파일로 작성하여 상세페이지에 import 처리하여 사용하였다.
반응형
'프로그래밍' 카테고리의 다른 글
코틀린(kotlin) 튜토리얼 - 레모네이드 앱(app) 코드 (1) | 2022.10.05 |
---|---|
[jquery]카페24 쇼핑몰 디자인 수정 - 상품상세페이지 쿠폰다운로드 영역 수정하기 (1) | 2022.09.29 |
[Jquery/Javascript]이미지맵을 이용해서 특정위치로 스크롤 이동하기 (2) | 2022.06.28 |
jquery - 배열로 요소 가져와서 데이터 활용하기 each, attr, children 등 사용 (1) | 2022.04.12 |
티스토리 블로그에 네이버 공유하기 버튼 넣기 (2) | 2022.03.21 |
댓글