How can I update the store_product_price with JS

Question

Okay so I have a grid of photos thumbnails that are for sale via a single product that is setup in Store. That product has two sizes, small and large. The large has a modifier that increases the price when selected.

I'm using JS to remove and then clone the modifier group of to the one of the thumbnails that is selected by the user, effectively turing it into the single product on the page.

My problem is that when I remove and clone over the modifiers that the price remains the same as what was selected when the last product was added to the cart.

So and example:

User chooses thummb#1 with a large modifier (+$20) selected and adds it to the cart (AJAX). Then when she chooses thumb#5 the modifier is set back to small but the price still reflects the large one.

Since this is all done via JS without a page reload how can I reset the store_product_price?

ajax : function(){
if( !$( '#product_form' ).size() ) return;

$( '#product_form' ).submit( function(){
    $( '.card .add_to_cart' ).val( 'Processing...' );
    var url = $( this ).attr( 'action' );
    var data = $( this ).serialize();
    $.post( url, data, function(){
        $( '#sidebar-cart' ).load( '/store/cart/' );
        $( '.card .add_to_cart' ).val( 'Add to Cart' );
        $( '.selected' ).removeClass( 'selected' );
        $( '.not-selected' ).removeClass( 'not-selected' );
   } );
        return false;
} );
},

Answer 1

I'm not entirely sure what you mean by 'remove and clone the modifiers' - are you creating a new small/large dropdown for each thumbnail? In that case how does it know which one to submit with the form?

It may be easier to create a new product form for each thumbnail, then use JS to hide/show the modifiers as needed.

In any case, if you want to stick with the way things are, you can take a look at themes/third_party/store/store.js to see how the store_product_price class is implemented (I assume you have already added the store_product_price class to your price, although you didn't mention it). If you set $debug = 1 in your index.php then it will load the unminified version of the javascript by default, making it easier for you to step through and see where it's getting stuck.