2026, 새로운 도약을 시작합니다.

상품 옵션 가격 자동 계산 (자바스크립트 커스터마이징)

· 5개월 전 · 622 · 1

기본적으로 상품 옵션 선택 시 가격이 자동으로 반영되지만,
직접 가격 계산식을 넣고 싶은 경우 아래처럼 커스터마이징 가능합니다.

$(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>
 

이렇게 하면 옵션 선택에 따라 실시간으로 가격이 바뀌고,
사용자가 더 직관적인 구매가 가능합니다.

|

댓글 1개

감사 합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

영카트5 팁자료실

번호 제목 글쓴이 날짜 조회
441 3주 전 조회 239
440 1개월 전 조회 189
439 1개월 전 조회 291
438 1개월 전 조회 459
437 2개월 전 조회 658
436 2개월 전 조회 270
435 2개월 전 조회 382
434 3개월 전 조회 536
433 3개월 전 조회 368
432 3개월 전 조회 338
431 3개월 전 조회 443
430 3개월 전 조회 407
429 3개월 전 조회 359
428 3개월 전 조회 368
427 4개월 전 조회 509
426 4개월 전 조회 536
425 4개월 전 조회 353
424 4개월 전 조회 629
423 4개월 전 조회 600
422 4개월 전 조회 520
421 5개월 전 조회 572
420 5개월 전 조회 489
419 5개월 전 조회 571
418 5개월 전 조회 514
417 5개월 전 조회 623
416 5개월 전 조회 429
415 6개월 전 조회 564
414 6개월 전 조회 567
413 6개월 전 조회 661
412 7개월 전 조회 552
🐛 버그신고