website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ - Categories
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ - WebApps
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ - Liquid
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 

Changing Price as Attributes are Selected

16min

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.

JS
|
<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:

HTML
|
<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:

HTML
|
<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:

JS
|
<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.

Document image


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.

Updated 11 Apr 2023
Did this page help you?
Yes
No
PREVIOUS
Editing the "Subscription User Action Required" System Page and Email
NEXT
Cancelling Subscriptions
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
The s_e_update_price() Function
What it does
Where it's commonly used
Arguments and Usage
Usage Notes
Usage note 1 - Define the element which will dynamically display the product price
Usage note 2 - Define the prices of Attribute Options
Usage note 3 - When using this Function on the Product List View, add the data-product-group attribute to your item.liquid file
Conclusion