Changing Price as Attributes are Selected

this article will look in detail at the javascript function which updates the product price as the customer selects attributes prerequisites your ecommerce module should be updated to version 1 0 5 to get the latest version of this feature described by this article earlier versions of the module will have limited support for this feature on product list views you have created attributes on some of your products and included an attributes sub layout nested inside your product layout introduction on the product list and detail views you can provide customers with an option to select product attributes changing features like "size" or "colour", depending on the product this article will look in detail at the javascript function which achieves this and adjusts the displayed price of the product appropriately a note on security the prices we are working with in this topic are cosmetic only there's no need to worry about malicious users "choosing their own prices" at this stage, as prices will be calculated afresh securely on the server if and when an order is created the s e update price() function what it does this function will update the currently displayed price of a product to take into account any selected attributes where it's commonly used to optionally set the initial prices to be displayed on product detail view product list view (support added in ecommerce version 1 0 5) to update the prices to be displayed on product detail view product list view (support added in ecommerce version 1 0 5) arguments and usage optional to display the initial price to display the initial price of a products on the product list, or detail view, on page load, you can run the function within the following event listener no arguments are required \<script> window\ addeventlistener('load', function() { s e update price(); }); \</script> to update the price on attribute select to watch an attribute for change, add the listener onchange="s e update price()" to the \<select> element in your chosen attributes layout {{name}} {% for option in product attribute options %} {{option name}} (+{{this price currency symbol}}{{option price}}) {% endfor %} usage notes the javascript looks for data in the html attributes in order to make its calculations in the usage notes below we'll detail everything you need to provide for this function to do it's work usage note 1 define the element which will dynamically display the product price the purpose of this function is to dynamically update the displayed price, but the choice of where this should be within the layout is up to you to mark an element within the item liquid file as being the element which will receive the dynamic price as its text content when calculated, add the following html attributes data price control data currency control the value of these attributes should be set using liquid to the product's initial price and currency {{this price currency symbol}}{{this price price charge formatted}} in this example above we also add the initial price to the text content of the element using liquid on page load instead, you can run the function on page load to display the initial price, should you choose usage note 2 define the prices of attribute options in order to add the prices of attributes to the base price you'll need to define the prices against the \<option> element that contains a selectable attribute option data attribute price control="{{option price raw}}" for example \<option value="{{option id}}" data attribute price control="{{option price raw}}"> {{option name}} {{this price currency symbol}}{{option price}}) \</option> usage note 3 when using this function on the product list view, add the data product group attribute to your item liquid file if you're using this function on the product list view, you'll need to carry out additional steps to define the container for each product this helps the javascript to smoothly identify relationships between products, their prices and their attributes the html attribute data product group should be added to the highest level html element in your product layout item liquid file which type of tag this element is doesn't matter the important thing is that all prices and attributes related to this product are nested inside this element if you do not add this attribute the javascript will treat the product list like a detail view and you may experience unexpected behaviour like all prices changing at once conclusion this function is useful for updating the displayed price of a product when new attribute options are selected or removed by the user / customer