My client has a product pack that they sell on a WordPress/woocommerce powered website. The pack can take in up to 6 products from a list of 10 products and has a base price of $40. Now out of those 10 products, my client wants that one particular product should increase the pack price by $1 when added into the pack.
Example: Let's say A, B, C, D, E, F, G, H, I, J are the products and "J" adds $1 to the base price. Any combination A to I within the pack (6 slots) will keep the price at $40, but if the customer replaces one slot with "J" price will be $41.
The list of 10 products is managed by JS on the frontend and the base price of $40 is managed in the backend.
And at the same time, when product is added to the cart, the six products that are selected inside the pack should also be displayed in the cart's line item.
The expected functionality is something like there on this site - https://www.dell.com/en-us/work/shop/dell-laptops-and-notebooks/inspiron-15-7000-gaming/spd/inspiron-15-7567-laptop/cai157w10p7s514 where, by my choice of options the additional cost keeps adding to the base price.
Currently, the client's site uses "add to cart" via URL as the theme was custom built.
Is there any code I can emulate or is it something I can implement using pure JS? Any direction would be helpful.
Code section for dropdown selection of pack products is below
<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 function in place is below:
$('body').on('click','.buyProduct',function(){ $.get('//domainabc.com/?add-to-cart='+$(this).attr('pid')+'&quantity=1').then((d)=>{ someFunction(d) }) })
