Здравствуйте. Задача следующая, есть некий товар у которого может быть множество опций, каждая опция может изменять цену другой или же вовсе ее скрывать, одна опция может влиять на множество опций. Соответственно нужно сделать подсчет стоимости товара в зависимости от выбранных опций. Все должно быть динамически, как только что то изменил на сайте все должно меняться
Подскажите пожалуйста как это можно сделать? Задача не сложная но уже неделю с ней сижу((
Вот код который у меня сейчас есть
function calcPrice(event, isDropDown = false) {
let $form = $('#form-product-' + $('.header__link.active').data('id')),
$productPriceBlock = $form.find('.product__price'),
productPrice = $productPriceBlock.data('product_price'),
$target = $(event.target)
//console.clear()
setDefaultValue($form)
// Если это ДропДовн переопределяем $target
if ( isDropDown ) {
$target = $form.find(`option[value="${$target.parent().data('id')}"]`)
}
if ( $target.data('price_field') || $target.parent().data('price_field') ) {
console.log('Data attr price_field was found', $target.text())
$target.data('price_field').forEach( (item) => {
let $field = $form.find(`input[value="${item.id}"]`)
$field.attr('data-amount', item.price)
// Смена текста для радио
if ( $field.attr('type') == 'radio') {
$field.siblings().find('.radio-button__price').text(`$${item.price}`)
}
// Смена текста для чекбокса
if ( $field.attr('type') == 'checkbox') {
$field.siblings().find('.c-accent').text(`$${item.price}`)
}
// Смена для ДропДовн
if ( $form.find(`.select-button__list-item[data-id="${item.id}"]`) ) {
let $select = $form.find(`option[value="${item.id}"]`)
$select.attr('data-amount', item.price)
$select.attr('data-price', item.price)
$form.find(`.select-button__list-item[data-id="${item.id}"] span:nth-child(2)`).text(item.price)
}
})
}
// Скрываем поля
if ( $target.data('field_hidden') && !isDropDown ) {
console.log('Data attr field_hidden was found', $target.text())
$target.data('field_hidden').forEach( (item) => {
$form.find(`input[value="${item}"], option[value="${item}"]`).parent().toggle()
})
} else if ( $target.parent().data('field_hidden') && isDropDown ) {
if ( Number.isInteger($target.parent().data('field_hidden')) ) {
$form.find(`input[value="${$target.parent().data('field_hidden')}"], option[value="${$target.parent().data('field_hidden')}"]`).parent().hide()
} else {
let t = $target.parent().data('field_hidden').split(',')
t.forEach( (item) => {
$form.find(`input[value="${item}"], option[value="${item}"]`).parent().hide()
})
}
}
var data = $form.serializeArray();
$.each(data, function() {
applyPriceRule($form, this.value)
let fieldInputByVal = $form.find(`input[value="${this.value}"], option[value="${this.value}"]`),
fieldInputByDataName = $form.find(`input[data-name="${this.name}"]`),
fieldInputByName = $form.find(`input[name="${this.name}"]`)
let amount = fieldInputByVal.data('amount') ? fieldInputByVal.data('amount') : 0,
p = fieldInputByDataName.val() ? Number( fieldInputByDataName.val() ) : 0,
duoSlideData = fieldInputByName.data('values_amout') ? fieldInputByName.data('values_amout') : 0,
duo = 0
if ( duoSlideData ) {
duoSlideData.forEach( (item) => {
let o = item.name.replace(' - ', ';')
if ( this.value == o ) {
duo = Number(item.price)
}
})
}
if (!p) {
p = 0
}
if (!duo) {
duo = 0
}
productPrice = Number(productPrice) + Number(amount) + Number(p) + Number(duo)
// console.log(`${this.name} = ${this.value} type = ${$(event.target).data('price_field')}`);
});
$productPriceBlock.text(`$${productPrice}`)
$('input[name="product_price"]').val(productPrice)
}
function setDefaultValue($form) {
let data = $form.serializeArray();
$.each($form.find(`input`), function(i, el) {
//console.log( $(el) )
let v = $(el).val(),
d = $(el).data('default_price')
$(el).attr('data-amount', d)
if ( $(el).attr('type') == 'radio') {
// console.log('Is radio')
$form.find(`input[value="${v}"]`).siblings().find('.radio-button__price').text(`$${d}`)
}
if ( $(el).attr('type') == 'checkbox') {
// console.log('Is checkbox')
$form.find(`input[value="${v}"]`).siblings().find('.c-accent').text(`$${d}`)
}
})
// Стандартные значения для DropDown
$form.find(`.select-button__list-item`).each( function(i, el) {
$(el).find("span:nth-child(2)").text(`$${$(el).data('default_price')}` )
$form.find(`option[value="${$(el).data('id')}"]`).data('amount', $(el).data('default_price') )
})
}
// Смена цены полей
function applyPriceRule($form, fieldId) {
let $inputs = $form.find(`input[value="${fieldId}"], option[value="${fieldId}"]`)
if ( $inputs.data('price_field') ) {
let price_field = $inputs.data('price_field')
price_field.forEach( (item) => {
let $field = $form.find(`input[value="${item.id}"]`)
$field.attr('data-amount', item.price)
// Смена текста для радио
if ( $field.attr('type') == 'radio') {
// console.log('Is radio', 'Id: ', item.id, $field.attr('data-amount'))
$field.attr('data-amount', item.price)
$field.siblings().find('.radio-button__price').text(`$${item.price}`)
}
// Смена текста для чекбокса
if ( $field.attr('type') == 'checkbox') {
//console.log('Is checkbox')
$field.siblings().find('.c-accent').text(`$${item.price}`)
}
if ( $form.find(`.select-button__list-item[data-id="${item.id}"]`) ) {
let $select = $form.find(`option[value="${item.id}"]`)
$select.attr('data-amount', item.price)
$select.attr('data-price', item.price)
$form.find(`.select-button__list-item[data-id="${item.id}"] span:nth-child(2)`).text(`$${item.price}`)
}
})
}
}
