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 
31min

How can I set up Product grouping and allow customers to switch views to another Product in the group?

Prerequisites

In this tutorial we'll be using both Categories and Collections, if you're unfamiliar with either of these we'd recommend refreshing your memory:

  • Categories - Introduction
  • Webapp Collections

Introduction

Often in eCommerce, you will have Products that are similar to one another. e.g. You might have a brand of chocolate with certain different flavours available. Or you might have different sized packs.

What are Product Attributes?

On Siteglide, we provide the Attributes feature- which allows you to merge these multiple varieties into a single Product with options. Users choose which Attributes to select as they add the Product to the Cart, and the Price can be adjusted accordingly. Follow these links to find out more about managing Attributes in the Admin, or outputting them as options Front End.

What was Product Grouping?

Adobe Business Catalyst, on the other hand, also allowed Users to "group" these similar Products instead. Product Grouping treated the Product variations as separate entities which could show up in Product Lists independently. Meanwhile, the Product Detail Page for one variation would display a list of alternate Products in the group, allowing you to switch to view the different information. Many partners have expressed an interest in re-creating this Product Grouping feature on their Siteglide Site.

There are several ways to achieve this:

  • Use Categories to group the Products
  • Use Datasources to build a relationship between a Product and similar Products in the Group
  • Convert an existing Product Grouping setup to use single Products with Attributes instead.

In this Article, we'll demonstrate how to group the products using Categories.

How to use Siteglide Categories to build a Product Grouping eCommerce Site

Step 1) Create a Category for the Group

First, create a Category that will link the products together. If you will also have some non-grouped Products, you may wish to create a "Product Groups" Category as well as a parent to organise all your product grouping Categories inside- bellow I'll explain how you can ensure that only Categories within the parent Category are used. Here's how I've structured my Categories, "Chocolate" and "Crisps" each represent separate groups of Products, the parent Category "Product-group" will be used to identify them as Product grouping Categories, allowing you to keep them separate from the other Categories your Products may have:

Document image

Now let's look at how we can ensure only the Categories within "Product-group" are used when outputting our related Products. First I assign an object containing all the Categories on my Site (this gives us access to all the Categories fields, rather than just the ID): {% assign categories = context.exports.categories.items %} Next loop over all of our Products categories, at each iteration we'll store the "full_slug" of the Category (this will include the parent Categories slug, which we can use to check the Category is being used for Product grouping).

Note: "this" contains one of the Category IDs assigned to our Product, we then use that ID to find all of the Categories details in "context.exports.categories.items":

HTML
|

We've now created an array of all the individual "parameters" in our "full_slug" field, next we'll loop over this and check none of the parameters equal "product-group"- if they do then we know that Category is being used for Product Grouping and store its ID. Add this code to the for loop above:

HTML
|

This will check all of the parameters, make sure you replace "product-group" with whichever slug your wrapping Category is using. If it is a Product grouping Category, we store the ID in the variable "group_category". We'll use this ID later to output our Related Products.

Step 2) Add the Group Category to all Products in the Group

Now add all the related Products to this Category. You can do this in the Categories tab when editing your Product. In this example- we'll be selecting the "Crisps" Category to add to our "Ready Salted" flavour Product.

Document image

Repeat step 2 for all the Products you'd like to be linked together.

Step 3) Output the Related Products on the Product Detail Page

On the Detail Page of each Product in the group, we'll next need to List the other Products in the group. There are now two ways we could output the related Products. You can choose one of the following methods:

  • Include the other Products in group by nesting a filtered Product List Layout inside the Product Detail Layout.
  • Keep all the code tidy inside the Detail Layout using a Collection to fetch the same data.

We'll demonstrate how you can use method 3) b).

Option 3) a) Output the Related Products within a List Layout

If you'd like to use a separate Layout to output your products, add this include to the Layout you're working in:

HTML
|

...where group_category contains the ID of the category containing the related Products. In your chosen Layout, you would be able to add Content regarding the Related Products.

Option 3) b) Output the Related Products within a Collection

Now we know which Products are related to one another, we can output them. For this demo, I'll be outputting them within the Detail Layout. To do this we'll use a Collection (read more here: Collections) which will be filtered by the parameter "category_id", meaning only items within the specified category are included (please follow step 1 for instructions on how we can do this dynamically).

HTML
|

If you're in a Detail layout, make sure to include the type: 'list' parameter. Also, ensure collection: 'true' is added to the include, along with your Category ID.

Create an object containing the included Products

The Collection will call all the specified items into {{context.exports}}, to save us writing the whole path to the item each time we output something, we'll store them in an Object: {% assign items = context.exports['module_14/product'].data.result.items %}

Now loop over the object, at each iteration we'll check that the ID doesn't equal the ID of the Product being displayed on the Detail Page (this will stop the Product on the Detail page being displayed as related). We'll use {{this.id}} to do this:

HTML
|

Step 4) Optional - Output the Related Products within a dropdown

Many partners who have expressed interest in the Product Grouping feature have also requested a demonstration of how to include a dropdown menu which allows easy access to links to other products in the Product group. As always when using custom JavaScript, you may wish to adjust the simplified examples in order to add in improvements to SEO and accessibility.

Option 4) a) Using a Collection method if you followed step 3) a) above

For this demo, I've chosen to output my Related Products using <select> & <option>, and some Javascript that will redirect the Page.

JS
|

This will output ---Select alternative Product--- as the placeholder for the options, then will loop over all the items in the Object we've just created, each iteration will output another <option> where the value contains a relative link to that Products Detail Page. Lastly, we'll need to add the Javascript for the "handleOption" function above, this will simply redirect to the slug within the options value attribute:

JS
|

Option 4) b) Including a separate Product List Layout if you followed step 3) b) above

If you used the method 3) b) above, you'll need to move some of the code from 4) a) inside the products Layout.

Wrapper

Make sure your Wrapper still includes the items inside the <select> element:

JS
|

Item

The HTML and Liquid for each option should then be included inside the item.liquid file: <option value="/{{item['module_slug']}}/{{item['slug']}}">{{item.name}}</option>

Add JavaScript

As above, you'll need to include a JavaScript function to make the dropdown functional.

JS
|

The Solution

Alright, that's everything we need to link our Products. Here is a screenshot of the solution:

Document image
Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
How to format price and output currency?
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
What are Product Attributes?
What was Product Grouping?
How to use Siteglide Categories to build a Product Grouping eCommerce Site
Step 1) Create a Category for the Group
Step 2) Add the Group Category to all Products in the Group
Step 3) Output the Related Products on the Product Detail Page
Option 3) a) Output the Related Products within a List Layout
Option 3) b) Output the Related Products within a Collection
Create an object containing the included Products
Step 4) Optional - Output the Related Products within a dropdown
Option 4) a) Using a Collection method if you followed step 3) a) above
Option 4) b) Including a separate Product List Layout if you followed step 3) b) above
Wrapper
Item
Add JavaScript
The Solution