List Layouts

similar to webapp list layouts, a product list layout can allow users to browse products it can be filtered and sorted too! 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 {% include 'ecommerce/products' layout "products" category ids current category id type 'list', show pagination 'true' %} 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 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 {% include 'modules/siteglide ecommerce/ecommerce/get/get products' item layout 'item' %} 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 {% include 'modules/siteglide ecommerce/ecommerce/get/get products' item layout 'item' %} 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 {{this\['name']}} {{this price currency symbol}}{{this price price charge formatted}} 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 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 {{this\['name']}} {{this price currency symbol}}{{this price price charge formatted}} 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 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 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 {{this\['name']}} {{this price currency symbol}}{{this price price charge formatted}} {% include 'ecommerce/cart add' %} quantity {% comment %} the following liquid code block loops over all attributes on this product \ {% endcomment %} {% 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 %} {% for category in this category array %} {{context exports categories items\[category] name}} {% endfor %}