Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Customise the way Products look on their automatically generated Detail Pages and add functionality for adding the Product to the Cart.
You have created Products in the Admin
This Tutorial will show you how to output information about a Product on its automatically-generated Detail Page.
It will cover how to:
Find where Product layouts are stored on Code Editor
Develop a wrapper.liquid file
Include an item.liquid file
Add functionality for a User to add the Product to Cart
In SITE MANAGER/Code Editor, the folder structure for eCommerce layouts is as below:
layouts
modules
module_14
product
name_of_my_layout
list
wrapper.liquid
item.liquid
detail
wrapper.liquid
item.liquid
product_attributes
my_attribute_layout.liquid
See more:
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.
As with list views, the detail folder inside your new layout folder should contain a wrapper.liquid and an item.liquid file. Refer to the folder structure at top of the document for reference. You also have the option of creating an attribute layout which can be included inside your item.liquid file to show Product Variations.
wrapper.liquid -- detail view example
This is the file for the main section code e.g. a section title or padding. You will need to use the following liquid to include your item.liquid file inside the wrapper and give it access to information about the Product:
item.liquid -- detail view example
Unlike the List View, the code in the item.liquid file in the Detail folder will only be displayed once instead of looped. Inside the item.liquid file, you'll have access to the "this" object, which contains the fields you'll need. See reference for available fields or output {{this | json}} in the item.liquid file to see the exact data available to you.
To create a button to add the current Product to the Cart use the following Liquid code
See more:
In order to use the "Add to Cart" Button, you'll also need to have an input element where Users can select the quantity they'd like to add. Make sure it has the correct data-attribute.
While building Product and Attribute Layouts, a large range of dynamic data is available- here is a full reference guide.
The "this" object can be accessed on Product detail/item.liquid, list/item.liquid and attribute layout files. It contains the properties of the current Product and contains further relevant objects e.g. Price.
The entire "this" object can be outputted on the page for reference: {{this | json}} The following fields are available:
Custom Field Set data linked to Products is available in Product detail/item.liquid, list/item.liquid and attribute layout files.
Any Custom Field Sets that have been associated with the product will be stored under: {{this.cfs_data}}
You can output the above liquid in the item.liquid file to see all of Custom Field Sets associated with the Product. Each of these will have the key "cfs_1", "cfs_2" etc. For example, a developer has created just one Custom Field Set to store information about the Guarantee on the Product. The field can be accessed via: {{this.cfs_data.cfs_1.Guarantee}}
See more information about Custom Field Sets here.
The Price object contains all the information you need to display the Product's price in the format you want. It is available in Product detail/item.liquid, list/item.liquid and attribute layout files.
The Inventory object contains the fields related to the current Inventory of this Product. It is available in Product detail/item.liquid, list/item.liquid and attribute layout files.
These are available once Attributes have been added against the Product in Admin and you are inside a detail/item.liquid file or an Attribute layout file.
You can access the Attributes Object via the following liquid output: {{ this.product_attribute_options }}
Inside the Attribute Layout, you can access just the Options for that specific Attribute: {{ product_attribute_options }}
You can also access the name of the Attribute this Layout is currently displaying: {{this_attribute.properties.name}}
As explained in the Attributes Layout Doc, we recommend you loop over the object and access the fields via the "option" liquid variable.
Assuming the above example liquid forloop has been implemented, you can access the fields in the table below. Remember the "option" liquid variable can be renamed, so if you have done this, replace "option" with the name you have given the variable. The Object contains Attribute Options and each of these contains information on the Attribute it is linked with.
Information about how to output information about volume pricing can be found here:
Similar to WebApp List Layouts, a Product List Layout can allow users to browse Products. It can be filtered and sorted too!
You have created Products in the Admin
This Tutorial will show you how to output a list of Products on your site.
It will cover how to:
Find where Product layouts are stored on Code Editor
Develop a wrapper.liquid file
Develop an item.liquid file
layout - choose the layout file for this list.
category_ids - filter the List by these category ids
sort_type - the field you wish the sort by
sort_order - 'asc' or 'desc' - the order you wish to sort by.
type - Should be list, for a List View layout. This can also be used to display different types of layouts, like a Cart in a different context.
show_pagination - if pagination should be displayed after the products. Default is 'true'
If you need to refer to the folder structure for where layout files should go, refer to this:
To create a new set of Product layouts- create a new folder bearing the name of your layout, and create within it:
product
name_of_my_layout
list
wrapper.liquid
item.liquid
detail
wrapper.liquid
item.liquid
A list view for products is made up of two parts.
The wrapper contains the code for the main part of the section you are building. For example, the section title or some margin or padding that separates your list from other sections.
In the wrapper.liquid file, it is important to include the liquid file which loops over the Product items:
The item_layout parameter should be the name of a liquid file in the same folder as the current file. Usually this will be "item", but you could have an alternative Layout.
item.liquid -- list view example
This file contains the code for each iteration of the loop that displays the Products. You should expect this code to be rendered multiple times; once for each product displayed in the list. (Hint: Try not to run any GraphQL calls inside a loop or item.liquid file, as they would have an impact on performance. It is better to run these inside the wrapper.)
Output all data available in the "this" object: {{this | json}}
In order to help the JavaScript understand which Quantity and Attribute Control belongs to which Product, we've added a new requirement to Product List Layouts. Please add the following data-attribute on the highest-level HTML element in your item.liquid file.
In this example, the highest level element in the file is a <div> element which is wrapped around the rest of the content in the file, but yours could be any element. The important thing is that this element is wrapped around any controls in the File.
For old sites which do upgrade the eCommerce Module, but do not add this data-attribute, we'll add a console log in dev-tools to act as a reminder, but any functionality which worked previously will continue to work.
As with Detail Layouts, you'll need to include the following Liquid and HTML code within the item.liquid file. It's also now important that these elements lie within the element with the data-product-group Attribute, when you're building a List Layout. See the section above for details.
The "Add to Cart" Button
For more on developing the Add to Cart Button:
The Quantity Control
This is mandatory, but can be hidden and hard-coded to have a value of 1, if you want to simplify the UI:
Attribute Control
Full Example: Example of an item.liquid file in a Product Layout which supports Adding to Cart:
This Article explains how to output a Discount Codes Layout in either Basic Payment Form, Cart, Checkout or Subscription Layouts
Discount Codes allow your Client to provide special offers to their customers.
You can learn how to here.
The role of a Discount Code Layout is to give the customer an opportunity to enter and apply a Discount Code on your Site. Additionally, once a code is applied, the Layout will give the customer information about how their code has been applied along with any terms and conditions, and the opportunity to remove the code.
This Article will explain how you can include a Discount Codes Layout in either your:
Cart wrapper.liquid file
Checkout Form Layout (Discount Code Layouts for the Cart and Checkout will have the same syntax).
Basic Payment Form Layout - This will have slightly different syntax due to the unique properties of Basic Payment Forms, but we'll cover this below.
Subscription Form Layout - This will have slightly special considerations because the discount has the potential to be applied to all invoices for a specified number of months. It's also possible to use Subscription Discount Codes to take 100% off the price giving a free trial.
Once a customer uses the button in the Layout to successfully add a Discount Code, this will be stored in their session alongside any Cart Data. We'll store one code at a time for each payment type, with Basic Payment Forms storing their codes in {{context.session.basic_payment_discount}}, Cart saving its codes in {{context.session.cart_discount}} and Subscriptions saving their codes in {{context.session.subscription_discount}}.
When a customer completes a Payment Form, the Server-side checks will apply the code and reduce the amount they are charged. This means your Site will be secure and safe against malicious users choosing their own discounts.
The screenshot below shows how the Discount Code Layout can be nested inside the Cart. However, step 1 also applies in all kinds of Layout.
The following Liquid will add the Layout:
The only parameter you'll need will be layout which refers to the file name of the Layout. We'll look at where to create the Layout files in Step 2.
In order to better support adding Discount Code Layouts on Forms, we've added the option to reload just the Layout, instead of the whole Page. The main benefit of this is that Users will not have to refill their form data after adding a Discount Code. We'll discuss this more in Step 3) b)
For now, you can add the data-attribute data-s-e-refresh-layout-discount-code to the element which serves as a wrapper for your Layout e.g.
In a Cart Layout, you may also wish to set prices to automatically update when the discount code is added.
You can add the following data-attributes:
data-s-e-live-cart-currency - the element will be filled dynamically with the Cart currency when the Layout refreshes
data-s-e-live-cart-total - the element will be filled dynamically with the updated Cart Total Price.
e.g.
A Discount Code Layout will typically contain:
An input field for the customer to enter a discount code
A button which allows them to submit the code
A button which allows them to remove a code (if perhaps the code is no longer valid and blocking payment).
Feedback to the user regarding successful and unsuccessful attempts to apply their discount code.
Essential HTML, JavaScript and Liquid which controls functionality
Discount Code Layouts will be stored here, inside: layouts/modules/module_14/discount_code
You'll just need a single Liquid file with the same name as your Layout. Optionally, you can use folders to organise Layouts of different types.
If you haven't already, make sure your layout parameter in the Liquid tag matches the name of your Layout File. Any custom folders like 'cart/' should also be added to the layout parameter path.
As there are subtle differences in implementation depending on the type of payment, we've created three different default layouts to help you get started:
"basic_payment/default"
"cart/default"
"subscription/default"
For steps 3 and onwards, you may find it easier to copy and edit the code from the default Layout, but we'll break this down into steps here so you can see all the elements you'll need.
HTML Attributes Explained:
{{discount\_code}}" or
| If a code is already successfully added, it will be autofilled. or Any successful code is autofilled and the current field value is readonly until removed in step b) | One of these |
When adding the 'Apply' button, you can customise how the JavaScript will behave on successful and unsuccessful attempts to add a Discount.
In the examples below, we'll show the basic options recommended for different types of Layout, then explain the full range of options you have for JavaScript behaviour.
Note
We recommend hiding the apply button after the Subscription Order has been created and the Discount Code has been redeemed. See Subscription Specific Instructions.
At this stage, you have a choice about whether you'd like the whole Page to reload after a successful Discount Code is added, or whether you'd like to only reload the Discount Code Layout itself.
We'd strongly recommend that for Layouts on Forms that you set reload: false as this will prevent the User having to re-enter their Form data, and will preserve any custom amount chosen on the Basic Payment Form.
Note also that the value of spend will be different for Basic Payment Forms:
Basic Payment Forms store the spend value in document.querySelector('#s_e_amount').value - as this can be dynamically changed by JavaScript, there is no Liquid value for it.
Cart and Checkout Forms can use the Liquid value: '{{context.exports.cart_base_price.data | json}}'
Subscriptions store the spend in {{spend}}
'{{context.exports.cart_base_price.data | json}}'
'{{spend}}' | Required - no default | Basic Payment Forms use spend: document.querySelector('#s_e_amount').value - as this can be dynamically changed by JavaScript, there is no Liquid value for it. Cart and Checkout Forms can use the Liquid value:spend: '{{context.exports.cart_base_price.data | json}}' | | reload: * true
false | default: true | Setting true will refresh the entire Page. Setting false will refresh the Discount Code Layout only. We'd strongly recommend that for Layouts on Forms that you set reload: false as this will prevent the User having to re-enter their Form data, and will preserve any custom amount chosen on the Basic Payment Form. If you select false, you must add the data-attribute data-s-e-refresh-layout-discount-code to the element which wraps around the Layout see Step 1) b) | | error_cb: * custom JavaScript function name (don't call the function yet!) error_cb: myErrorFunction | default: * A JavaScript alert message will display the error. | For arguments and how to customise your own function, head to step 6. | | success_cb: * custom JavaScript function name (don't call the function yet!) success_cb: mySuccessFunction | default: * Depending on the reload option, will reload the Page or Layout
If reload is false and the Payment Type is Checkout, will update the total Price by running the s_e_cart_update_prices(); | For arguments and how to customise your own function, head to step 7. |
You can optionally add a button to the Layout which will allow the customer to remove a Discount Code that has already been applied.
The Liquid IF statement helps make sure the button is only displayed if there is a code present to be removed.
The JavaScript function will make the button functional.
false | default: true | Setting true will refresh the entire Page. Setting false will refresh the Discount Code Layout only. We'd strongly recommend that for Layouts on Forms that you set reload: false as this will prevent the User having to re-enter their Form data, and will preserve any custom amount chosen on the Basic Payment Form. If you select false, you must add the data-attribute data-s-e-refresh-layout-discount-code to the element which wraps around the Layout see Step 1) b) ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | success_cb: | Default: Depending on how you set the refresh setting, will refresh the Page or the Layout. | For arguments and how to customise your own function, head to step 8. |
Why is this helpful? Although we check Discount Codes are valid when they are added, there are cases where the code is no longer valid by the time the customer reaches the Checkout, for example:
The User may have adjusted the quantity of items in the Cart, causing the spending amount to drop lower than the minimum payment allowed by the Discount Code.
The Code may have been close to expiry.
Adding a "remove" button gives the User a clear way to solve any problems stopping them from completing their purchase.
Note
You cannot remove a Subscription Discount Code after the Subscription Order has been created and the Discount redeemed. See Subscription Specific Instructions.
On Page refresh (or if you've chosen reload: false on Layout refresh), after a successful Code is applied, the following Liquid will explain the minimum spend needed and the discount available.
Depending on where your Layout is, different syntax may be needed to fetch the currency to display.
On Subscription Layouts it is important to know whether or not the Subscription Order has been created, if it has, then the Discount will already be redeemed. The difference in display needs to account for the fact that a redeemed discount is time-limited.
For both situations, we can use the fields inside the discount variable to access details on the Discount.
*Before the Subscription Order is Created *At this stage, we can use general details of the discount which is applied, but not yet redeemed, from the this object.
*After the Subscription Order is Created and the Discount Redeemed *At this stage, we can use details of the actual discount code stored against the Subscription Order. As this is time limited, we may also wish to give details of how much longer the Discount will be active for and the specific Subscription Order will provide these details.
The following code can be used to display the minimum spend needed to keep using the discount:
The following code can be used to display the minimum spend needed to keep using the discount:
It's probably only really necessary to display the minimum spend before the Subscription Order is created and the Discount redeemed. Once the discount is redeemed, the amount spent will be fixed.
This code will display a message if the minimum spend is not set strictly enough and the resulting payment total is below that allowed by the Payment Gateway.
discount_saving_maximum_reached will always return false for Subscriptions and these allow any size of Discount (controlled only by the Partner and Client setting Minimum Spend values on each Discount Code in the Admin.) Therefore, it's not necessary to add this code to a Discount Code Layout for a Subscription.
discount_code is a variable which contains the Discount Code successfully applied after page refresh
discount_minimum is a variable which contains the minimum spend needed for this Discount Code to be valid.
discount_amount is a variable which stores the calculated saving on the current Cart value.
{{context.exports.cart_currency.data}} will output the currency symbol on Cart and Checkout Layouts
`
` will output the currency symbol on Basic Payment Layouts
`
You can use this Liquid tag to format any Liquid price variable with the correct decimalisation. To use, set theprice_data` parameter to the variable you wish to format.
discount_saving_maximum_reached - if true, the Minimum Amount for the Discount Code has not been set strictly enough and the total Payment Due is below that allowed by the Payment Gateway. You can use this to display a warning message that it has not been possible to apply the full discount.
There are lots of reasons why the customer may enter a code but be refused a discount. For example, the code may have expired, or the Cart's value may not be above the minimum spend.
You can start with the JavaScript function below and make your own changes to decide how these errors are displayed to the customer:
As the comments in the example mention, each error returned from a failed discount code will give both a code and a default message. You can choose which one you will use.
Here are the full list:
If you want to change the message, you can use logic to display different messages using the error code:
Once you've created your function, use the error_cb option in step 3) b) and pass it your function name. e.g. error_cb: myErrorFunction
Setting reload to either true or false in the s_e_cart_discount_code function will both effectively refresh your Discount Code Layout and the Liquid will update with new values, so most use-cases will not need a custom success function. However, if you do need to make changes, you can use the function below as a starting point:
Once you've created your function, use the success_cb option in step 3) b) and pass it your function name. e.g. success_cb: mySuccessFunction
Setting reload to either true or false in the s_e_cart_discount_code function will both effectively refresh your Discount Code Layout and the Liquid will update with new values, so most use-cases will not need a custom success function. However, if you do need to make changes, you can use the function below as a starting point:
Once you've created your function, use the success_cb option in step 3) b) and pass it your function name. e.g. success_cb: mySuccessFunction
Note
We recommend for Subscriptions to add some logic checking whether a Subscription Order has already been created and if so, to hide the apply button. This is because once the Subscription Order is created- any Discount Code already applied will be redeemed.
At this point it's not possible to apply or change the Discount Code, only display details of the Order that's active. The purpose of the Form at this point is actually to allow Users to edit their payment details only.
You could add this logic around the whole Layout (as in the default Layout), or just around individual components. For the sake of clarity, in the "subscription/default" Layout, we've opted to wrap the logic around the whole Layout, creating two distinctly separate blocks of Liquid for before and after redemption.
You can also add the statement to check if the Discount will apply to the next invoice or if the Discounted period of months is over.
How to use Module Custom Fields to output similar, related products
Your is updated to at least version 1.2.0
You have already and outputted them in List or Detail Layouts on the Site
Module Custom Fields allow a wide range of use cases for connecting up different areas of your Site. In this Article we'll look at how you can create a new Custom Field for your eCommerce products to store similar, related Products which could be displayed on the Product's Detail Page.
You could of course use this same technique with the Blog Module or any other Module or WebApp.
To add a Custom Field to Products, first select Edit Module Structure from the Products List in Admin.
At the bottom of the available fields, you can find the Custom Fields section, and press the "Add new field" button.
The name of your field can be whatever you want, here we'll call it Related Products. The Datasource Multi type prompts us to choose a Module or WebApp that we will be able to select Items from.
When you're ready, press save and your new Custom Field will be set up. You'll then be able to use this field when creating and editing Products.
In this example, we'll edit the new Custom Field on an existing Product to create a relationship with another Product. From the Product Edit Page, select the Custom Fields tab:
As we used the Datasource Multi field type and selected Products as the Module to be linked to, Siteglide knows what we're trying to do and will help us find the related Items.
Select as many as you need. Each Product's unique ID will be stored in array format in your Custom Field.
When you're ready, save the Product.
For the next steps (3 - 6), we'll be navigating to Code Editor to develop custom Layouts to display the Related Products Front End. We'll start by working in the "item.liquid" file of the Layout you're using for the Product Detail View. We'll nest a new List of Related Products inside this Detail Layout.
Inside the item.liquid file, we can access the Custom Field by name:
It is sometimes more reliable to access a field by its ID, in case the name is changed in future. E.g. {{this.properties.module_field_custom_14/product_1}}
This outputs an array of the IDs of each of the related Products stored against our current Product. It should look something like this: ["55","75","147"]
In Step 5, we'll need to nest a new List Layout of Products inside the Detail Layout and filter this by the IDs of our Related Products. However, the IDs are currently in an Array format and the include Liquid tag's item_ids parameter expects a comma separated String.
We can change the type by assigning a new variable:
Next, we need to output a Product List, nested within our existing Product Detail Layout.
Item Ids Parameter
Without the item_ids parameter, our List outputs only the first few Products alphabetically, instead of fetching our dynamic Related Products.
We can change that by adding the item_ids parameter and feeding in our comma-separated String of IDs (that we stored in a new Liquid variable):item_ids: related_products
Datasource Parameter
datasource: 'true' When you output an include inside a Detail Layout, by default Siteglide will try to fetch a Detail Layout. This is one reason why it's important to set the datasource: 'true' parameter, which will then cause Siteglide to look for a List type Layout.
Another benefit of the datasource: 'true' parameter is that if no Related Product IDs are available, the List will return empty, instead of returning an unfiltered List. This prevents the List from showing unrelated Products in this situation.
Per Page Parameter
per_page: '3' In the example, the per_page has been set to 3. In some cases, you may wish to limit the number of "related" results in this way, so they don't distract from the main subject of the Page. It is completely optional.
Layout Parameter Select the name of a Product List Layout you'll use to style how the dynamic Related Products List will look (see Step 7).
Optionally, you can add Liquid logic to only display the subtitle and Related Products content when the field is not empty. As the field contains an array, a safe way to check if it holds a value is to check its size (Liquid for the length of the array).
You've now completed the Step by Step guide for adding Related Products.
Wondering how to adjust the Product Detail Page based on Category?
As a User navigates to your Product Detail Page, Siteglide will load the Detail View you have specified in your eCommerce Settings. However, it is perfectly possible to customise this based on , using Liquid logic! You can read more about using Categories on the Layout of the WebApp or Module Item they belong to .
In this example, you'd need to know the ID of a category you want to display; this can be found in Admin when you select a category. E.g. let's say we want to display something special when something has the category "Featured" and you know it has an ID of "111111":
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.
You have in the Admin
You have
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
In SITE MANAGER/Code Editor, the folder structure for product attributes layouts is as below:
See a more complete Cart & Checkout Folder Structure here:
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.
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)
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.
Loop over all Attribute Options
Check if the Attribute is enabled
If so, include the relevant Attribute layout, dynamically filling in the "name" parameter.
detail/item.liquid -- (looping over all Attributes linked to this Product)
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):
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:
Customise the "Add to Cart" button to keep customers on the Page or redirect them straight to the Checkout Flow with a "Buy Now" button.
This Article assumes you've already:
Added a "cart_add" button to a Layout.
If you've not already done this, you can read the following Articles to learn more:
Although we've had an "Add to Cart" button for a while now, we've recently added the ability to add a custom Layout for this component.
This will allow you to:
Change the style of the button
Change the style of the button when the Product is out of stock
Change the behaviour of JavaScript when adding to the Cart is successful
You can add a Layout to the Cart Add Button by adding a component_layout parameter to the Liquid:
<div data-gb-custom-block data-tag="include" data-0='ecommerce/cart_add' data-1='custom_layout' data-2='custom_layout'></div>
This feature is backwards compatible, so if you have a Site which does not specify a Layout for these buttons, the default Layout will be chosen automatically- and this will be identical to the style and behaviour you are used to.
We store these Layout files at the following path: layouts/modules/module_14/components/add_to_cart_button/my_custom_layout.liquid
You can either edit the default Layout or create your own by right-clicking on the "my_custom_layout" folder.
Looking at the default layout, you can see that it has some key characteristics you may wish to keep in your new Layout:
Checking if the Product is in stock
Running the JavaScript function
You can use a Liquid If Statement to check if the Product is in stock.
To achieve the functionality of adding a Product to the Cart, you'll need to run a JavaScript function when the button is clicked. The first argument is mandatory- you must pass in the ID of the Product using Liquid: onclick="s_e_cart_add({{this.id}})"
The second argument in the JavaScript function is optional. If you like, you can add in the name of a function you've defined on your Page. This will run instead of the default "alert" message when a Product is successfully added:
As in the example above, you can use this to add a different alert message with a different message. Or you could run any other JavaScript you like instead.
Remember, you also have access to the function: s_e_live_cart_update()which will return the number of Items now in the Cart. You could incorporate this number into the message.
Some eCommerce Sites require a "Buy Now" button which adds the Product to the Cart and then sends them directly into the Checkout Flow. You can turn your "Add to Cart" button into a "Buy Now" button using customisation options:
This Article will look in detail at the JavaScript function which updates the Product price as the customer selects Attributes.
Your 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 on some of your Products and nested inside your Product Layout.
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.
This function will update the currently displayed price of a Product to take into account any selected Attributes.
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)
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.
To watch an Attribute for change, add the listener: onchange="s_e_update_price()"to the <select> element in your chosen Attributes Layout:
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.
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:
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.
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:
item.liquid fileIf 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.
This function is useful for updating the displayed price of a Product when new Attribute Options are selected- or removed- by the User / Customer.
use_search - See
As it is inside the loop, the item.liquid file has access to the "this" object and dynamic information specific to an individual product. A full reference for the fields you can use can be found or you may find it convenient to output the "this" object on the page you are developing:
As this code can be complex, so please refer to the doc for further information, or take a look at the full example below.
Read more about the
For Subscriptions, your Layout will inherit the variables of the Layouts it's nested within- meaning it will inherit variables from the Subscription Detail Page, then the Subscription Form. See details of these objects . e.g. {{this.price.currency_symbol}}
- Adding and editing Discount Codes in the Siteglide Admin
You can style and write Liquid for the Related Products List Layout in the same way you do for any . For example, you could provide a link to the Detail Pages of those Related Products using the Slug property.
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 to see the fields available in the "this" object and those specific to Attributes and Attribute Options.
Field Name
Liquid Tag
Description
Item Name
{{this.name}}
The Product's name
Item Slug
{{this.slug}}
The part of the URL for this Product's Detail Page which refers directly to this Product
Creation Date
{{this.create_date}}
The date the Product was created in Admin
Last Edit Date
{{this.last_edit_date}}
The date this Product was last edited in Admin
Release Date
{{this.release_date}}
The date this Product is scheduled for release, or was first released on the Site. (A Product will not appear in the list if it has not been released.)
Expiry Date
{{this.expiry_date}}
The date this Product will be no longer visible on the Site. (A Product will not appear in the list if it has expired.)
Enabled
{{this.enabled}}
A "true" or "false" boolean value. If "false", the Product will not appear in the list.
Category Array
{{this.category_array}}
An array of ids of categories associated with this Product.
Description
{{this.Description}}
A description of the Product.
Image
{{this.Image}}
This is the main image for the Product, but more can be added with Custom Field Sets.
Field Name
Liquid Tag
Description
Price ID
{{this.price.id}}
The unique ID of this Product's price.
Product ID
{{this.price.product_id}}
The unique ID of the Product this Price belongs to.
Currency
{{this.price.currency}}
The currency code for the currency used by this Product e.g. "GBP".
Price Charge
{{this.price.price_charge}}
The price of the Product as an integer e.g. for the price "£200.00" this field will display "20000"
Display Price
{{this.price.price_display}}
If the optional field Display Price was filled out when the Product was created, this will show that price as an integer, else, it will output null. This could be for example the RRP or price before tax.
Currency Symbol
{{this.price.currency_symbol}}
The HTML entity for the currency symbol. e.g. "£" outputted on the page will display "£" when HTML is rendered.
Price Display Formatted
{{this.price.price_display_formatted}}
If the optional field Display Price was filled out when the Product was created, this will show that price as an decimal number, else, it will output null. This could be for example the RRP or price before tax.
Price Charge Formatted
{{this.price.original_price_charge_formatted}}
This is the price that will be charged to the user, formatted into dollars and cents.
Price Charge Before Tax Formatted
{{this.price.price_charge_before_tax_formatted}}
This is the price before any tax is applied, formatted into dollars and cents.
Field Name
Liquid Tag
Description
Inventory ID
{{this.inventory.id}}
The unique ID of the object containing the Product's Inventory.
Enabled
{{this.inventory.enabled}}
A "true" or "false" boolean, defaults to true.
Product ID
{{this.inventory.product_id}}
The unique ID of the Product this Inventory Object belongs to.
Quantity
{{this.inventory.quantity}}
The number of products in the inventory.
Inventory Type
{{this.inventory.inventory_type}}
The type of Inventory. Currently, only "Global" is available.
Display Type
{{this.inventory.display_type}}
This stores the policy on what to do when the Inventory reaches zero. Either the Product can not be ordered, or it should be hidden from view.
Field Name
Liquid Tag
Description
Attribute Option ID
{{ option.id }}
The unique ID of this Attribute Option
Attribute Option Name
{{ option.name }}
The name of this Attribute Option
Attribute Option Chargable Price
{{ option.price_charge }}
Chargable price for this Attribute Option
Attribute Option Chargable Price Formatted
{{ option.price_charge_formatted }}
Formatted chargable price for this Attribute Option
Attribute Option Display Price
{{ option.price_display }}
Display price for this Attribute Option
Attribute Option Display Price Formatted
{{ option.price_display_formatted }}
Formatted display price for this Attribute Option
Attribute Option Image
{{ option.image}}
The image for this Attribute Option
Attribute ID
{{ option.product_attribute.id }}
The Unique ID of this Attribute
Attribute Name
{{ option.product_attribute.name }}
The Name of the Attribute e.g. Size or Colour
Attribute
{{ option.product_attribute.product_id }}
The Unique Product ID that this Attribute is associated with.
Code | Purpose | Required |
data-s-e-discount-code | Attribute should be added to input field | Yes |
value=" |
Option | Required / Default | Notes |
spend: * document.querySelector('#s_e_amount').value |
Option | Required / Default | Notes |
reload: * true |
error.type | error.message | Notes |
no_code | Error: This Discount Code does not exist. |
expired | Error: This Discount Code has expired. |
below_min_spend={min-spend} | Error: This Discount Code has a minimum spend of {min-spend} |
used_up | This Discount Code has already been used the maximum number of times. |
incorrect_type | Error: This Discount Code does not apply to this kind of payment. It may apply in another area of the Site. | By default, Discount Codes are only redeemable on Cart / Checkout flow. You can change this for an individual code in the Admin using the "Valid on Payment Form Type" field. |
Argument | Example | Purpose |
reload default: true | The value of the reload setting passed into the function. Defaults to true for backwards compatibility. |
discount | An object containing details of the newly applied discount code. |
payment_type | 'Checkout' or 'Basic Payment' | Can be used in logic |
refreshed_discount_layout | A DOMstring containing the HTML generated by the refreshed Discount Code Layout | This can be used to refresh only the Discount Code Layout, if you choose. |
Argument | Example | Purpose |
reload default: true | The value of the reload setting passed into the function. Defaults to true for backwards compatibility. |
payment_type | 'Checkout' or 'Basic Payment' | Can be used in logic |
refreshed_discount_layout | A DOMstring containing the HTML generated by the refreshed Discount Code Layout | This can be used to refresh only the Discount Code Layout, if you choose. |
Shipping Options let customers choose how fast they'd like eCommerce Products delivered and prices are added onto the price at Checkout.
Shipping Options let customers choose how fast they'd like eCommerce Products delivered and prices are added onto the price at Checkout.
Here's what it does:
Admin Users can add and remove Shipping Options e.g. "Free Delivery", "Premium"
You can output the Shipping Options in your Cart with their own sub-layout
Once chosen, the Shipping Option will be saved alongside the customer's Cart and the price of shipping will be added to the total price displayed.
When an Order is made, the customer will pay for the price of Shipping and the option chosen will be displayed against their Order in the Admin.
You can add, edit and remove Shipping Options in the Admin. Go to ECOMMERCE/Shipping Options in the left-hand menu.
The Options are designed to be included in an HTML Select box in the Cart.
You'll need to add the following Liquid where in your Cart you want to include your Shipping sub-layout: <div data-gb-custom-block data-tag="include" data-0='ecommerce/shipping_option' data-1='siteglide_example'></div>
The only parameter you'll need to include is your Layout.
You won't need to do anything else to implement this feature. Any options selected by the customer will have their prices added to the price total in Checkout.
Include your Custom Layout alongside my_layout:
layouts
modules
module_14 (eCommerce)
shipping_option
siteglide_example.liquid
my_layout.liquid
Here's an example:
Some key points to note from the example:
You'll need to put the onchange attribute on the HTML Select element itself and use the Siteglide function.
You'll need to loop over the shipping_options array we've created for you to build your HTML Option elements.
You can use a Liquid if statement to mark an option as the Shipping Option currently selected by the User: `
`
