Изменение цены при выборе опции

Question

Сайт на опенкарт, тема стандартная. Хочу сделать, чтобы при выборе опции (к примеру размер S, M, L, изменялась цена на товар, с коробки оно сделано немного не очень)

Хочу сделать это посредством js.

Логика проста - я беру цену товара, беру цену опции - делаю с ними определенные действия для адекватной цены и вывожу все. То-есть у меня есть кнопки радио, я вешаю на них событие - при клике я получаю значения, изменяю и вывожу.

Код php

 <div class="radio">
                  
 <input  type="radio" class="radio__input" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" price="<?php echo $option_value['price']; ?>"
 onclick="priceProduct()" />

 <label class="radio__label" for="option-value-<?php echo $option_value['product_option_value_id']; ?>">

...

Код JS

function priceProduct() {
    let lengthPrice = 4;
    let priceOld;
    if (typeof(priceOld) == 'undefined') {
         let priceOld = 0; //если переменная не объявлена, объявим её, переменная нужна для фиксации цены выбранной опции, что-бы было можно "откатиться назад" при выборе другой опции
       }        
    let currentPrice = parseInt(document.querySelector('.product__price').textContent);
    console.log(currentPrice);

    let optionPrice = document.querySelector('.radio__input').getAttribute('price');

На данный момент вся проблема в последней строке. Я беру атрибут price из input, в котором указана цена опции, но у меня 2 -3 кнопки, а значение берется только 1. Как указать что значение нужно брать с того input где произошел клик? Дeмаю нужно как-то указывать this, но знаний не хватает...

Answer 1

Вам нужно получить атрибут price из отмеченного радио или из того радио, по которому только что произошел клик? Если второе, то вам точно нужны радио - может быть, лучше юзать чекбоксы с единственным возможным выбором?

let optionPrice = document.querySelector('.radio__input:checked').getAttribute('price');

В случае, если вы все-таки будете использовать радио, в optionPrice попадет значение price из первого по ДОМу отмеченного инпута, если же чекбоксы, то, соответственно, из единственного.
Если вам нужны именно радио и именно тот из них, что только что был кликнут, то нужно юзать обработчик клика и event.target

БЛОГ НА HUSL

Изменение цены при выборе опции

Ответы (1 шт):