Outputting Related Products

how to use module custom fields to output similar, related products pre requisites your ecommerce module is updated to at least version 1 2 0 you have already created ecommerce products and outputted them in list or detail layouts on the site introduction 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 step by step step 1) add a new custom field to products 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 step 2) add related products to a product 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 by clicking in the select box and starting to type "crow" i should be able to find other products with a similar name to this band easily 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 step 3) from the product detail layout access the related product ids 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 related products {{this\['related products']}} 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"] step 4) convert the related product ids to a comma separated string format 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 %} tag's item ids parameter expects a comma separated string we can change the type by assigning a new variable {% assign related products = this\['related products'] | join "," %} step 5) add a product list layout which datasources to the related products next, we need to output a product list, nested within our existing product detail layout related products {% assign related products = this\['related products'] | join "," %} {% include 'ecommerce/products' layout 'default' per page '3' show pagination 'false' sort type 'properties name' sort order 'asc' datasource 'true' item ids related products %} 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) step 6) hide content when no related products exist 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) {% if this\['related products'] size > 0 %} related products {% assign related products = this\['related products'] | join "," %} {% include 'ecommerce/products' layout 'default' per page '3' show pagination 'false' sort type 'properties name' sort order 'asc' datasource 'true' item ids related products %} {% endif %} step 7) optional develop a custom layout for the related products you can style and write liquid for the related products list layout in the same way you do for any product list for example, you could provide a link to the detail pages of those related products using the slug property you've now completed the step by step guide for adding related products