Extra Options Update Price

1.md

Extra Options Update Price

B@se and JS

Visually update the price on product page when a customer selects an extra option that has additional fees.

2.html

<!-- buying_options.template.html-->
<!-- We need to select a price that updates based on product variation -->

[%if ![@inpromo@]%]
    <input type="hidden" id="productvalue" value="[%FORMAT type:'number' dp:'2'%][@store_price@][%/FORMAT%]"/>
[%else%]
    <input type="hidden" id="productvalue" value="[%FORMAT type:'number' dp:'2'%][@promo_price@][%/FORMAT%]"/>
[%/if%]

<!-- Give the select box a selector-->
[%PARAM *select_option%]
	<select name="extra[@count@]" class="form-control nCustom-extraselect" id="productextra[@count@]" rel="[@SKU@]">
		[@choices@]
	</select>
[%/ PARAM%]

<!-- Give the options data tag for their prices -->
[%PARAM *choices%]
	<option type="text" class="form-control" value="[@option_id@]" data-price="[@price@]">[%nohtml%][@text@][%end nohtml%]
		[%DATA id:'price' if:'!=' value:'0'%]
			(+ [%FORMAT type:'currency'%][@price@][%END FORMAT%])
		[%/ DATA%]
	</option>
[%/ PARAM%]

3.js

// Change product price if selected an extra option with a additional price
$('#_jstl__buying_options').on('change', '.nCustom-extraselect', function(){
	var currentPrice = parseFloat($("#productvalue").val());
	var selectedPrice = parseFloat($(this).find('option:selected').attr('data-price'));
	var newPrice = currentPrice + selectedPrice;
	$('.productprice').html($.formatCurrency(newPrice));
});