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:

<label for="{{attribute_name | slugify}}">{{name}}</label>
<select name="attr1" 
        class="form-control" 
        data-attribute-control="{{this_attribute.id}}" 
        onchange="s_e_update_price()">
{% for option in product_attribute_options -%}
<option {% if forloop.first %}selected{% endif %} value="{{option.id}}" 
            data-attribute-price-control="{{option.price_raw}}">
{{option.name}} (+{{this.price.currency_symbol}}{{option.price}})
</option>
{% endfor -%}
</select>

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:

<p class="product-price" 
   data-price-control="{{this.price.price_charge}}" 
   data-currency-control="{{this.price.currency_symbol}}">
   {{this.price.currency_symbol}}{{this.price.price_charge_formatted}}</p>

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.

Product Attribute Layouts allow you to customise the way that you present users with a choice of which variation of a Product they want.

Product Attribute Layouts allow you to customise the way that you present users with a choice of which variation of a Product they want.

Prerequisites

• You have created Products in the Admin

• You have created a Product Detail View

Introduction

This Tutorial will show you how to use Attributes to let Users pick Variants on the Product's automatically-generated Detail Page.

It will cover how to:

• Find where Product layouts are stored on Code Editor

• Develop a my_attribute_layout.liquid file

• Allow the User to select Attribute Options before adding to Cart

Folder Structure

In SITE MANAGER/Code Editor, the folder structure for product attributes layouts is as below:

marketplace_builder
└───views
    └───partials
        └───layouts
            └───modules
                └───module_14
                    ├───product
                    │   collection.liquid
                    │   └───custom_product_layout
                    │       ├───detail
                    │       │   item.liquid
                    │       │   wrapper.liquid
                    │       └───list
                    │           item.liquid
                    │           wrapper.liquid
                    └───product_attributes
                        └───custom_attributes_layout.liquid

See a more complete Cart & Checkout Folder Structure here:

Creating a new set of Product Layouts

To create a new set of Product layouts- create your folder at the level of "name_of_my_layout". Inside that, the folders and files should be created as shown above.

Including a Single Known Attribute on a Detail Page

If you are making a layout where you know exactly which Attribute a Product has, you can include an Attribute layout to display an Attribute with a given name: detail/item.liquid (including a single Attribute)

{% include 'ecommerce/product_attributes'
   name: attribute
   layout: 'demo_site_attributes'
   attribute_name: "Size" 
-%}

Looping Over Multiple Attributes

If your Products have multiple Attributes, or you want to write code which can dynamically display any Attribute given to the Product, you can use liquid to loop over all Attributes. We've recently updated this example to be much simpler and easier to use.

Steps:

1. Loop over all Attribute Options

2. Check if the Attribute is enabled

3. If so, include the relevant Attribute layout, dynamically filling in the "name" parameter.

Full example:

detail/item.liquid -- (looping over all Attributes linked to this Product)

{% for attribute in this.product_attributes %}
  {% if attribute.properties.enabled == true %}
    {% include 'ecommerce/product_attributes'
       name: attribute.properties.name
       layout: 'demo_site_attributes' 
    -%} 
  {% endif %}
{% endfor %}

Attribute Layout Development

There is no need to create a wrapper file for Attributes, as they are already included inside an item.liquid file. Your Attribute layout can be given a name of your choice. Different Attributes for the same Product may use different Attribute layouts, e.g. "Colour" may include colour swatches.

You can output the name of the Attribute that the current Layout displays: {{this_attribute.properties.name}}

The following liquid outputs an array of the options that have been created for this Attribute: {{product_attribute_options}}

You can loop over this array with the following liquid code, (where the example has the variable "option", you could choose any variable name):

{% for option in product_attribute_options -%}
  {{option.name}} ({{this.price.currency_symbol}}{{option.price}})
{% endfor %}

To get the full benefits of Attribute functionality, including the user's choice of Attribute affecting what is added to the Cart, the data-attributes and function calls in the example should be included:

<select name="attr1" class="form-control" data-attribute-control="{{product_attribute_id}}" onchange="s_e_update_price()">
  
{% for option in product_attribute_options %}
    <option value="{{option.id}}" data-attribute-price-control="{{option.price_raw}}">
      {{option.name}} {{this.price.currency_symbol}}{{option.price}})
    </option>
  {% endfor %}
</select>

As you can see in the example, inside the loop it is possible to access the specific Attribute Option in this iteration via the "option" variable you created when setting up the loop, but you can also still access the "this" object specific to the Detail Layout that wraps around and includes the Attribute Layout. See the Product Layout Liquid Reference to see the fields available in the "this" object and those specific to Attributes and Attribute Options.