When it comes to matrix items, we can configure our products with a wide variety of options like including options for size and color here we are creating a matrix item where can add as many associations as we like.
Let us take Matrix item hat as an example
So, for example, if you sell hats that come in multiple colors and have differing slogans on them, you can set up your item images so that when a shopper selects both a color and a slogan, an image is shown for that specific combination.
So here we are adding a new option for a range of hats that our webstore sells. They already have size and color options, but these new hats also have a range of slogans that we want customers to be able to choose from. Therefore, I’m going to use the field/word ‘slogan’
Create a Custom Item Field:-
Navigate to Customization > Lists, Records & Fields > Item Fields > New. Set it up as follow
- Label: Slogan
- ID: _slogan
- Matrix Option: (checked)
- Type: Multiple Select
- List/Record: (add new)
- Name: Slogans
- ID: _slogans
- Matrix Option List: (checked)
- Values: Great; Amazing
- Applies To: Inventory Item
- Applies To: Select Individual Items
After checking Select Individual Items we must then select some items to apply it to
All other options can be left as default.
Create a Custom Transaction Item Option:-
This is the part that allows the shopper to select additional options when they add to cart.
Navigate to Customization > Lists, Records & Fields > Transaction Item Options > New. Set it up as follows:
- Label: Slogan
- ID: _slogan
- Type: Multiple Select
- List/Record: Slogans
- Applies To: Purchase; Sale; Opportunity; Web Store; Transfer Order; Apply to Kit/Assembly Components
- Applies To > Items: (select the items you want)
- Sourcing & Filtering:
- Source List: Item
- Source From: Slogan
All other options can be left as default.
Set Up a Inventory Item:-
Here we need to add them to at least one product. As these are matrix item options, they are not added like other custom fields; instead, we effectively create new items using them. To keep things simple, in our site, we are going to be modifying an existing matrix parent item and add new options to them.
Go to a product you want to modify, edit it, and then go to the Accounting tab, and then the Matrix Items section.
The first thing we need to do is add the new option to the Matrix Item Name Template. What this value should be depends on how our site is configured; the default is the item ID followed by the item options, with each one contained in curly braces, separated by hyphens. Thus, for our site, we are going to update it to:
{itemid}-{custitem31}-{custitem30}-{custitem_slogan}Next to this will be all the item options that can be added to the product. If this product already has matrix items as children, some options will already be pre-selected and the items will be listed below.
Using CTRL+click, select the option values you want to create child items for; as we’ve only added two options, I’d add them both. When you’ve done that, click the Add Items button — click through the screens to add the new products.
Add/Update Product Imagery
The product is set up. If you want, you could go over to it and take a look at it. Swapping the new option around shouldn’t affect what image is shown. Thus, we need to update the imagery.
If you’re using an existing product then you’ll have imagery associated with it already; this needs to be dealt with. For example, here are the file names of the existing images of the product I’m using
- OL4979.media.black.01.jpg
- OL4979.media.beige.01.jpg
This matches the naming convention I have set up for my site.
I now need to supply new images following this convention. Thus, they are now going to be:
- OL4979.media.black.amazing.01.jpg
- OL4979.media.black.great.01.jpg
- OL4979.media.beige.amazing.01.jpg
- OL4979.media.beige.great.01.jpg
When you have those images, you’ll need to upload them to the file cabinet in the folder where you store your images (eg Web Site Hosting Files > Live Hosting Files > Images) and then deal with the old ones (either making them inactive or just delete them).
Update the Configuration Record
There’s some configuration changes we need to make: one to make it work and the others to improve user experience.
Go to Setup > SuiteCommerce Advanced > Configuration.
Associate the Images
The final piece is to make the frontend part of the application aware of the fact there are new multi-image options.
Go to Shopping Catalog > Multi-Image Option. In the list, add the name of the custom transaction item option we set up
Make the URL Component Friendly
While we’re editing the config record, we should also add a friendly URL parameter name for the option. Adding one would change, for example, it from &custcol_slogan=amazing to &slogan=amazing.
To do this, go to Shopping Catalog > Item Options and add a line into the Item options and custom transaction column fields table. As it’s a simple item option, you only need to add the ID and the name you want to use as a synonym.
Make the Facet Friendly
As you’ve added an item option, this will be added to the search results pages as something that customers can use to filter results by. By default, it will use the ID of the custom item field, which we want to change.
In Shopping Catalog > Facets add a new line to the Facets table. Like the URL component entry, you just need to add data for a basic entry. The ID is the one for the custom item field (eg custitem_slogan),
Save the record.
If you hard refresh the PDP for the item, you should see the new options available and they swap the images when you click them.