Customizing the product list grid

Sometimes the customer has specific needs for the product list view. In this guide you will learn how to create a new, customized, product list view based on the existing product list grid view – but using the same guide you will also have the basis for creating greater variations, like table or list based product lists.

We will cover the following topics:

1. How to create a custom view
2. How to add a minor feature to a view

Both of these tasks start with the same basic thing – copying an existing item type and the template associated with it and giving it a custom prefix. This ensures that if you later want to upgrade to a newer version of Swift, you won’t have to be careful not to overwrite customized system templates when you merge in the new content. It also provides you with full control over the whole view, which is often necessary even for small changes as you often need to finetune adjacent elements when adding an element.

To copy the item type and template:

1. Go to /Files/System/Items and copy the ItemType_Swift_ProductListGridView.xml file – call it ItemType_Swift_ProductListGridView_Custom.xml
2. Open the new xml-file and change the Name and System name to something appropriate
3. Go to Files/Templates/Designs/Swift/Paragraph and copy the Swift_ProductListGridView.cshtml template – give it the same name as the new item type

Now you must make it possible for the new item type to be used in Swift by allowing it as a child of the Product list page item type:

1. Log into the backend and navigate to Settings > Item types > Swift > Product list
2. Open the Restrictions modal and check the new item type under Allowed children (Figure 1.1)
3. Save

To make sure the system loads the new item types and restrictions open the Settings > Item types view and click Refresh in the toolbar (Figure 1.2).

Finally, you should add the new column to a page on the solution, so you can see how it’s being rendered – this makes it much easier to develop your custom content:

1. Log into the backend and navigate to the Content area
2. Open the page which will render the product list – on the example website this is the Products page
3. Remove the grid currently being used (Figure 1.3)
4. Add the new column and configure it

You can now start creating the custom feature or view and see it rendered in the visual editor or frontend.

After following the instructions in the previous section you’re ready to create a custom product list grid– this is done by editing the template you just copied. In our example we will simply change the grid from using 3 columns to using 2 columns – this will put a lot more focus on each product – and a couple of minor changes which will make the 2-column grid look better:

1. Open the Paragraphs/Swift_ProductListGridView_Custom.cshtml template in an editor of your choice – we recommend using Visual Studio with Intellisense as this is really the only way you will know which properties are available to you
2. Locate the grid column implementation and replace “col-6 col-lg-4” with “col-12 col-lg-6”
3. You should also change the size of the product images used in the grid to match the new layout. To do so locate the section with ImagePath-variables and chance the images sizes used (Figure 2.1)

While doing this, you should keep a tab with the product list in frontend or in the visual editor open at all times so you can see the effects of your changes.

If you want to add a new minor feature to an existing view the procedure is pretty much identical – we still recommend that you create custom item type and a custom template, the only difference is the nature of what you change. While this may seem a little extreme – surely a minor change does not warrant a completely custom template? – it stems from the fact that even small changes often require you to finetune other elements in the view, and before you know it you’ve more or less customized the whole template anyway, especially if multiple people work on the same design over an extended time period.

In the long run it is much better to acknowledge this and ensure that you have full control over what’s going on.

In this example we will make a minor change – we will add the manufacturer logo to each product in the grid:

1. Open the custom ProductGrid template in the editor of your choice – again, we recommend using Visual Studio with Intellisense as this is the easiest way for you to know which data is available
2. Locate the area where you want to render the manufacturer logo
3. Write your code for rendering the manufacturer logo for the product – here’s a bit of code for reference:

As you can see, you’ve got access to the manufacturer logo via the ProductViewModel – alongside a lot of other properties belonging to the manufacturer, e.g. name, phone, web address. Of course, the product must have a manufacturer set – and the manufacturer must have the relevant properties – you can read about manufacturers here.

If everything is done correctly, you will get something like this on the product list: