Zmiana wartości ceny produktu zależnie od wybranej opcji dostawy

Question

Cześć, robię sobie stronę typu sklep internetowy i chcę, aby na podstronie danego produktu wyświetlała się cena i cena wraz z dostawą, która będzie zależna od wybranej opcji dostawy przez pola radio. Niestety mój kod nie działa poprawnie i nie wiem jak zrobić to poprawnie. Oto kod:

HTML:

 <!-- product price -->
                <table class="my-3">
                    <tr class="font-rale font-size-14">
                        <td>Cena:</td>
                        <td class="font-size-20 text-danger">$<span class="product_price" data-id="<?php echo $item['item_id'] ?? '0';?>"><?php echo $item['item_price'] ?? 0; ?></span><small class="text-dark font-size-12">&nbsp;&nbsp;Uwzględniając wszystkie podatki</small></td>
                    </tr>
                    <tr class="font-rale font-size-14">
                        <td>Cena z dostawą:</td>
                        <td>$<span class="product_price_with_delivery" data-id="<?php echo $item['item_id'] ?? '0';?>"><?php echo $item['item_price'] ?? 0; ?></span></td>
                    </tr>
                </table>
                <!-- product price -->

                <hr>

                <!-- order-details -->
                <div id="order-details" class="font-rale d-flex flex-column text-dark">
                    <h5 class="font-baloo font-size-20">Opcje Dostawy</h5>
                    <small><input type="radio" class="delivery" name="delivery" value="10"> Paczkomat</small>
                    <small><input type="radio" class="delivery" name="delivery" value="14"> DHL</small>
                    <small><input type="radio" class="delivery" name="delivery" value="13"> DPD</small>
                    <small><input type="radio" class="delivery" name="delivery" value="15"> Fedex</small>
                </div>
                <!-- !order-details -->

 

Js:

let $delivery = $(".delivery");

    $delivery.click(function (e){
        let $input = $(".delivery");
        let $price = $(`.product_price_with_delivery[data-id='${$(this).data("id")}']`);

        $price.text(parseInt($price + $input.val()).toFixed(2));

    });

Jeżeli ktoś byłby w stanie mi w tym pomóc to byłbym bardzo wdzięczny, z góry dzięki.

Answer 1

Zamiast odwoływać się do elementów input typu "radio", każdego z osobna, proponuję skorzystać z event delegation i do elementu div id="order-details" dodać zdarzenie click.

jeżeli chcesz mieć ceny w formacie 0.00 to lepiej jest użyć parseFloat

 

propozycja zmian (dla celów demonstracyjnych usunąłem kod php i  w jego miejsce wstawiłem hipotetyczne dane)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  td small {
    margin-left: 0.75em;
  }
  .product_price,
  .product_price_with_delivery {
    display: inline-block;
    width: 2.3em;
    text-align: right;
  }
</style>
 
<!-- product price -->
<table class="my-3">
  <tr class="font-rale font-size-14">
    <td>Cena:</td>
    <td class="font-size-20 text-danger">$<span class="product_price" data-id="1">2.00</span>
      <small class="text-dark font-size-12">Uwzględniając wszystkie podatki</small>      
    </td>
  </tr>
  <tr class="font-rale font-size-14">
    <td>Cena z dostawą:</td>
    <td>$<span class="product_price_with_delivery" data-id="1">0.00</span></td>
  </tr>
</table>
<!-- product price -->
 
<hr>
 
<!-- order-details -->
<div id="order-details" class="font-rale d-flex flex-column text-dark">
  <h5 class="font-baloo font-size-20">Opcje Dostawy</h5>
  <small><input type="radio" class="delivery" name="delivery" value="0"> Odbiór osobisty</small>
  <small><input type="radio" class="delivery" name="delivery" value="10"> Paczkomat</small>
  <small><input type="radio" class="delivery" name="delivery" value="14"> DHL</small>
  <small><input type="radio" class="delivery" name="delivery" value="13"> DPD</small>
  <small><input type="radio" class="delivery" name="delivery" value="15"> Fedex</small>
</div>
<!-- !order-details -->

window.onload = load;
 
function load() {
  const product_price = parseFloat($('.product_price[data-id]').text()) || 0.00,
        product_price_with_delivery = $('.product_price_with_delivery[data-id]');
 
  //console.log(product_price.text(), product_price_with_delivery.text());
 
  $('#order-details').on('click', calculatePriceWithDelvery);
 
  function calculatePriceWithDelvery(e) {
    //console.log(e.target);
    if (e.target.nodeName == 'INPUT' && e.target.type == 'radio') {
      const delivery_price = parseFloat($('[name="delivery"]:checked').val()) || 0.00;
      //console.log(delivery_price);
      product_price_with_delivery.text((parseFloat(product_price + delivery_price)).toFixed(2));
    }
  }
}

 

 

P.S. żeby "ułatwić" klikanie w radio button-y, dodaj <label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  td small {
    margin-left: 0.75em;
  }
  #order-details small {
    padding-left: 0.8em;
  }
  .delivery {
    margin-right: 0.35em;
  }
  .product_price,
  .product_price_with_delivery {
    display: inline-block;
    width: 2.3em;
    text-align: right;
  }
  label, [type="radio"] {
    cursor: pointer;
  }
</style>
 
<!-- product price -->
<table class="my-3">
  <tr class="font-rale font-size-14">
    <td>Cena:</td>
    <td class="font-size-20 text-danger">$<span class="product_price" data-id="1">2.00</span>
      <small class="text-dark font-size-12">Uwzględniając wszystkie podatki</small>      
    </td>
  </tr>
  <tr class="font-rale font-size-14">
    <td>Cena z dostawą:</td>
    <td>$<span class="product_price_with_delivery" data-id="1">0.00</span></td>
  </tr>
</table>
<!-- product price -->
 
<hr>
 
<!-- order-details -->
<div id="order-details" class="font-rale d-flex flex-column text-dark">
  <h5 class="font-baloo font-size-20">Opcje Dostawy</h5>
  <small><label><input type="radio" class="delivery" name="delivery" value="0">Odbiór osobisty</label></small>
  <small><label><input type="radio" class="delivery" name="delivery" value="10">Paczkomat</label></small>
  <small><label><input type="radio" class="delivery" name="delivery" value="14">DHL</label></small>
  <small><label><input type="radio" class="delivery" name="delivery" value="13">DPD</label></small>
  <small><label><input type="radio" class="delivery" name="delivery" value="15">Fedex</label></small>
</div>
<!-- !order-details -->

window.onload = load;

function load() {
  const product_price = parseFloat($('.product_price[data-id]').text()) || 0.00,
        product_price_with_delivery = $('.product_price_with_delivery[data-id]');

  $('#order-details').on('click', calculatePriceWithDelvery);

  function calculatePriceWithDelvery(e) {
    if (e.target.nodeName == 'INPUT' && e.target.type == 'radio') {
      const delivery_price = parseFloat($('[name="delivery"]:checked').val()) || 0.00;
      product_price_with_delivery.text((parseFloat(product_price + delivery_price)).toFixed(2));
    }
  }
}

 

Comments

Wielkie dzięki za pomoc, rzeczywiście lepszym rozwiązaniem jest odwołanie się do div id="order-details", niż do samych pól radio, dzięki za wszystkie rady.