Products with different options

#1

Hi,

We’re building a new site based on Storyblok and it needs to contain a product catalogue.

At it’s simplest it would have a component called products which might have a few simple columns like this…

  • product_name (text)
  • price (number)
  • description (textarea)

There will be many more fields than that but you get the idea.

My question is how to add different fields for different types of products. For example any television will have the following

  • Screen size (number)
  • Display tech (OPtions - LCD, OLED, QLED etc.)

For a full example see here: https://www.currys.co.uk/gbuk/tv-and-home-entertainment/televisions/televisions/301_3002_30002_xx_xx/xx-criteria.html

But a refrigerator might have different options

  • Type (text - e.g. freestanding)
  • Width (number)
  • Brand (text)

Again, see here: https://www.currys.co.uk/gbuk/household-appliances/refrigeration/fridge-freezers/333_3125_30212_xx_xx/xx-criteria.html

So, if I was modelling this in a SQL dabatase I would have a products table with a “product_type_id” column which would link to a product types table (ideally many to many). The product_types table would contain the name of the product type and then there would be another table full of facets (or options), each with a name and type, like this…

product_types

id (e.g. 123)
name (e.g. televisions)

product_type_options

id (e.g. 999)
product_type_id (e.g. 123 for televisions)
name (e.g. screen size)
type (e.g. integer)

Then there would be a table which has the options for each product…

product_options

id
product_id (links to actual product)
product_type_option_id (e.g. 999 for screen size)
value (e.g. 55)

So, the question is how to model this in Storyblok? In an ideal world the editor would enter a product and be able to choose the product type from a drop down list. If they choose Televisions then they would see new questions below that showing all the “product_type_options” for televisions.

Obviously, if that isn’t possible then we could just have a very long list of option for each product with every possible option on it but that would be difficult for the site editor.

Once it’s modeled I would also need to know how to retrieve all the options and values for each product type to make the UI for the filters and how to do a query like “fetch all products which are televisions and have a screen size over 55 inches”. However, we will probably be copying all records to Algolia so may be doing all the retrieval/searching through Algolia.

I realise this is a lot of info for one question and it’s probably pushing the limits of Storyblok but I thought I’d ask on here before tackling the problem because I’m probably not the first person to attempt it.

#2

Hello Jon,

I’ve made a space for showing how you could solve this actually. There are two versions of the content type product:

The first version that uses the rich-text field offers more flexibility when creating the content.
The structure of it is as follows
–> Name, text field
–> Old_Price, number field
–> New_Price, number field
–> Description, rich-text field
–> Category, single option field
–> Image_Gallery, blocks type (array field):

  • contains a component “Product_Image” of the type blocks
  • inside of this component is an image field type
  • for easier work with the gallery I added the following code to the preview option of the component
    {{image(options.Image)/}}
    Bildschirmfoto 2020-02-24 um 10.32.46
    Bildschirmfoto 2020-02-24 um 10.32.46486×765 34.4 KB

–>Image_Gallery_v2, multi assets field

The schema structure:

Bildschirmfoto 2020-02-24 um 10.23.01
Bildschirmfoto 2020-02-24 um 10.23.01486×765 28.4 KB

The version two of the content type products:
The structure of it is as follows
–> Name, text field
–> Old_Price, number field
–> New_Price, number field
–> Category, single option field
–> Product_Characteristics, blocks field and inside of it a component “Fridge”, its schema structure is as follows

  • Capacity_in_litres, numbers field
  • Measurements, text field but can be resolved with a custom field type plugin but more to that at the end of the answer
  • Manufacturer_s_guarantee, single option field with a data-source as source for the option that are available for selecting by the user
  • Energy_Efficiency_Rating, as before
  • Annual_Energy_Consumption_In_KWh, number field
  • Type_Of_Door_Handle, single option field, as before using a data-source for providing values for selection
    Bildschirmfoto 2020-02-24 um 11.56.26
    Bildschirmfoto 2020-02-24 um 11.56.26485×765 31.9 KB

–> Product_Gallery, as before it is a blocks field and contains components of the same kind as in the version 1 of the product content type

Bildschirmfoto 2020-02-24 um 11.56.13
Bildschirmfoto 2020-02-24 um 11.56.13485×765 26.9 KB

The component of the version two of the product content type can be completely or partly replaced by a custom content type plugin. The advantage is that a custom field type plugin makes it easier to structure the content respecting the requirements of your projects.
The tutorial for the creation of your own custom content type plugins can be found here:
https://www.storyblok.com/docs/plugins/introduction
And examples that show what is possible:
https://app.storyblok.com/#!/me/plugins
https://gist.github.com/onefriendaday

There is also the possibility to use relations between content entries that can be used to add data about the category. This could be placed where the “Category” single option is. More about that can be read in the following articles:
https://www.storyblok.com/tp/how-to-build-a-content-relationship



https://www.storyblok.com/tp/global-components-references

1 Like