상품 옵션 가격 자동 계산 (자바스크립트 커스터마이징) 정보
상품 옵션 가격 자동 계산 (자바스크립트 커스터마이징)본문
기본적으로 상품 옵션 선택 시 가격이 자동으로 반영되지만,
직접 가격 계산식을 넣고 싶은 경우 아래처럼 커스터마이징 가능합니다.
$(function() {
function updateTotalPrice() {
var basePrice = parseFloat($("#it_price").text().replace(/[^0-9.-]+/g,""));
var totalOption = 0;
$(".sit_option select").each(function() {
var selected = $(this).find("option:selected");
var optionPrice = parseFloat(selected.data("price")) || 0;
totalOption += optionPrice;
});
var total = basePrice + totalOption;
$("#total_price_display").text(total.toLocaleString() + "원");
}
$(".sit_option select").change(updateTotalPrice);
updateTotalPrice();
});
view.skin.php 상품 가격 아래에 출력될 요소 추가
<p>총 상품 가격: <span id="total_price_display"><?php echo number_format($it['it_price']); ?>원</span></p>
옵션 가격 설정 시, 옵션 이름 뒤에 (+1000) 식으로 붙이지 말고
data-price 값을 select 태그 option에 수동으로 삽입 필요
<option value="옵션1" data-price="1000">옵션1 (+1,000원)</option>
이렇게 하면 옵션 선택에 따라 실시간으로 가격이 바뀌고,
사용자가 더 직관적인 구매가 가능합니다.
2
댓글 1개
감사 합니다.