Changing a modifier doesn't seem to update the price

Question

I can't seem to get Store to dynamically update the price on a product when I choose a different modifier option.

I've put store into a sandbox environment with just one product that has 1 modifier: size. There are 2 sizes small and large. Large has a price difference of $10.

When I add the product to the cart the price difference is respected, but I need that price difference to change dynamically when the actual option is selected before being added to the cart.

I have no custom templates of my own just using the supplied example one and issue still happening.

Code:

<div class="control-group">
<label class="control-label">Price</label>
<div class="controls">
  {if on_sale}
    <del>{regular_price}</del><br />
    {price}
    <span class="label label-success">Save {you_save} ({you_save_percent}%)</span>
  {if:else}
    {regular_price}
  {/if}
</div>
</div>

{modifiers}

<div class="control-group">
  <label class="control-label" for="{modifier_input_name}">{modifier_name}</label>
  <div class="controls">
    {if modifier_type == 'var' OR modifier_type == 'var_single_sku'}
      <select id="{modifier_input_name}" name="{modifier_input_name}">
        {modifier_options}
          <option value="{option_id}">
            {option_name} {if price_mod_val} ({price_mod}) {/if}
          </option>
        {/modifier_options}
      </select>
    {if:else}
      <input type="text" id="{modifier_input_name}" name="{modifier_input_name}" value="" />
    {/if}
    <p class="help-block">{modifier_instructions}</p>
  </div>
</div>

{/modifiers}

EECMS version: 1.5.2 Store: 1.6.1 PHP: 5.3.6 Environement: MAMP on OSX

Any help would be gratefully appreciated as this is quite urgent.

Cheers Dan

Answer 1

The dynamic product variables are based on css classes, which tell the built in javascript where to update the price.

https://exp-resso.com/docs/store/tags/product.html#dynamic-product-variables

To get it working, simply wrap your price in a <span> element, like so:

<span class="store_product_price">{price}</span>

Also note there was a bug in 1.6.0 which caused this to break in some situations (though you mentioned you are running 1.6.1 so this shouldn't be an issue).