Last updated
Was this helpful?
Last updated
Was this helpful?
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:
use_search
- See
use_adv_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.