Expresso Store: Manually trigger 'store_product_price' recalculation

Question

The class 'store_product_price' is updated by Javascript so that when a customer selects an option with a price variant, the price on display updates to reflect the new price.

This all works brilliantly.

However. We've added a system where by all the colour options for a product are shown as images on the product page. When clicking on one of these images we have got jQuery updating the select box of colour options (as populated by Expresso:Store) to reflect the right colour. However, the price doesn't update. I've tried fiddling with the $('select').change() methods, but I can't get it work.

The jQuery we use to update the select the right option in the select box is:

$('.options select option').removeAttr('selected').filter('option[data-val="'+$(this).attr('data-title')+'"]').attr('selected','selected');

How can use code to trigger a recalculation of the price please?

Thanks!

Tom

Answer 1

I think the problem is that the Store JS code doesn't know the SELECT has changed so doesn't update the price. Setting the selected attribute doesn't fire the change event. You could test this by creating a change event on the select with a debug output to see if it fires.

$(".options select").change( function() {
    console.log("SELECT TRIGGERED ".$(this).val()); //ensure you remove this on live site as crashes IE!
});

Instead of setting "selected" for the OPTION, set the value for the SELECT:

$('.options select'.val( $(this).attr('data-title') ).trigger('change');

Although I think this is more correct for your scenario...

$('.options select'.val( $('.options select option[data-val="'+$(this).attr('data-title')+'"]').attr("value") ).trigger('change');

Update

What's the name of your select and what's the classes on the form element?

This is the line from Store JavaScript:

$(".store_product_price", form).val(price_str).html(price_str).trigger("change");

In the updateSku function.

Also this which attaches the handler the the update event on the select:

$(document).delegate('.store_product_form [name^="modifiers"]:not(:radio)', 'change', lib.updateSku).delegate('.store_product_form [name^="modifiers"]:radio', 'click', lib.updateSku);