У моего клиента есть пакет продуктов, который они продают на веб-сайте WordPress / woocommerce. Пакет может содержать до 6 товаров из списка из 10 товаров и имеет базовую цену 40 долларов. Теперь из этих 10 продуктов мой клиент хочет, чтобы один конкретный продукт увеличивал цену упаковки на 1 доллар при добавлении в пакет.
Пример. Допустим, A, B, C, D, E, F, G, H, I, J - это продукты, а «J» добавляет 1 доллар к базовой цене. Любая комбинация от A до I в пакете (6 слотов) будет держать цену на уровне 40 долларов, но если клиент заменит один слот на «J», цена составит 41 доллар.
Список из 10 продуктов управляется JS на внешнем интерфейсе, а базовая цена в 40 долларов - на внутреннем.
И в то же время, когда товар добавляется в корзину, шесть товаров, выбранных внутри упаковки, также должны отображаться в отдельной позиции корзины.
Ожидаемая функциональность примерно такая же, как на этом сайте - https://www.dell.com/en-us/work/shop/dell-laptops-and-notebooks/inspiron-15-7000-gaming/spd/inspiron-15-7567-laptop/cai157w10p7s514, где, по моему выбору вариантов, дополнительная стоимость продолжает прибавляться к базовой цене.
В настоящее время сайт клиента использует «добавить в корзину» через URL, так как тема была специально создана.
Есть ли какой-нибудь код, который я могу эмулировать, или это что-то, что я могу реализовать, используя чистый JS? Любое направление будет полезно.
Кодовый раздел для выбора выпадающего списка ниже
<select class="packItem col-xs-12 col-sm-5" id="packItem5">
<option price="0" selected="" disabled="" value="0" cal="0">Select Pack Item #5</option>
<option price="0" value="Product A" type="soups" cal="88">Product A</option>
<option price="1" value="Product B" type="soups" cal="375">Product B</option>
<option price="0" value="Product C" type="soups" cal="221">Product C</option>
…
</select>
<button pid="1234" class="buyProduct">Buy Now</button>
Функция JS на месте ниже:
$('body').on('click','.buyProduct',function(){ $.get('//domainabc.com/?add-to-cart='+$(this).attr('pid')+'&quantity=1').then((d)=>{ someFunction(d) }) })