website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
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
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
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
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 
37min

List Layouts

Similar to WebApp List Layouts, a Product List Layout can allow users to browse Products. It can be filtered and sorted too!

Document image

Prerequisites

  • You have created Products in the Admin

Getting Started

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

Add a List of Products to a Site

HTML
|

Parameters:

  • 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.
  • use_search - See WebApp Search On The Front-End
  • 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'

Folder Structure

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

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.

List Layout Development

A list view for products is made up of two parts.

wrapper.liquid

wrapper.liquid -- list view example

HTML
|

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:

HTML
|

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

item.liquid -- list view example

HTML
|

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

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 here or you may find it convenient to output the "this" object on the page you are developing:

Output all data available in the "this" object: {{this | json}}

Adding to Cart on the List View

Document image

Update

Previously, adding Products from a List View to the Cart was only partially supported.

What we did support on the List View:

  • Adding one of each Product at a time

What we now also support, with some small code changes:

  • Choosing the Quantity before adding to Cart
  • Choosing Attributes before adding to Cart

Marking Separate Products to support the Advanced Features of Adding to Cart on a Product List View

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.

HTML
|

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.

Adding to Cart on the List View

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 {% include 'ecommerce/cart_add' -%} 

The Quantity Control

HTML
|

This is mandatory, but can be hidden and hard-coded to have a value of 1, if you want to simplify the UI:

HTML
|

Attribute Control As this code can be complex, so please refer to the Attributes Layout doc for further information, or take a look at the full example below.

Full Example: Example of an item.liquid file in a Product Layout which supports Adding to Cart:

HTML
|
Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Detail Layouts
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Getting Started
Add a List of Products to a Site
Parameters:
Folder Structure
Creating a new set of Product Layouts
List Layout Development
wrapper.liquid
item.liquid
Adding to Cart on the List View
Update
Marking Separate Products to support the Advanced Features of Adding to Cart on a Product List View
Adding to Cart on the List View