2.1.15. Product finder

Owned by Karol Schönsee
Last updated: Mar 10, 2022
4 min read

The CC Product Finder component is a great instrument for guiding the customer to a specific product or category. The customer faces several steps with options which he can choose. Depending on his selection, the customer will be guided to a different set of products. All the steps contained in the CC Product Finder selection itself are contained in one URL. The URL change when the specific set of products will be displayed. The technology used for defining the several steps and actions in the admin panel is JSON.

 

When setting up the CC Product Finder component you need to define the layouts of a single step for the specific devices:

 

·       MOBILE LAYOUT: You can display either one, two or three options per row on mobile devices. The amount of rows does depend on the amount of options included in the single step.

·       TABLET LAYOUT: You can display either two, three or four options per row on tablet devices. The amount of rows does depend on the amount of options included in the single step.

·       DESKTOP LAYOUT: You can display either three, four, five or six options per row on desktop devices. The amount of rows does depend on the amount of options included in the single step.[1]

 

Next you can add steps to be included in the CC Product Finder component by clicking the “+” button. You can insert an image for the options included in this step by using the Magento 2 media explorer by clicking INSERT IMAGE.[2] It is recommended to upload one picture per option. In the JSON input field you can define the image to be used for a given option

 

If you already have more than one step in the CC Product Finder component, you can remove it using the “bin” icon. Also you can move the given step by using the “arrow up” and “arrow down” buttons.

 

Next you need to configure the single steps of the CC Product Finder component in the JSON input field on the right-hand side (underneath the INSERT IMAGE button). Following attributes are needed here:

 

  • "id": (required attribute) This is a unique identifier of a step, it is later used to reference options' destinations.

  • "title": (optional attribute) This attribute defines the title of a step, usually displayed as a headline at the top.

  • "description": (optional attribute) This is the description of a step, usually displayed as a paragraph below the headline.

  • "additional_css_class": (optional attribute) This attribute adds an additional class which allows applying custom styles.

  • "options": (required attribute) This is the array containing the actual options of the given step

    • "label": (optional attribute) This is the option label displayed next to the option. It is recommended to use one image and one label per option.

    • "image": (optional attribute) This attribute defines the image URL to be used for the given step. It is recommended to use the Magento 2 media URL variable, i.e. "{{media url=\"filename.png\"}}". It is recommended to use one image and one label per option.

    • "attributes": (optional attribute) This attribute does define with whom product attribute the option should be associated with for searching the desired set of products of the given option. Each step can set either attributes or category ID („category_id“) or both.

      • "code": This attributes defines the Magento 2 product attribute code to be used for searching the desired set of products of the given option (you can find it in admin panel under STORES / ATTRIBUTES / PRODUCT).

      • "values": This attribute defines the values of the product attribute that should be matched to search the desired set of products of the given option. Products that have at least one of given values of above attribute will be matched.

      • "range": This attribute does define a range of numeric values (e.g. price) which the specific set of products should be searched in.

    • "category_id": (optional attribute) This attribute does define the category to search for in the given step. The numeric Magento's category identifier can be found in the category settings under CATALOG / INVENTORY / CATEGORIES next to its name at the top left corner.

    • "next_step": (required attribute) Id of the step to which this step should lead to (“id” attribute of the step). By setting this value to "search" the user will be redirected directly to result search page.

  • "optionsPerRow": (optional attribute) It is possible to provide a custom number of options that will be displayed in each row for mobile and tablet devices (only given breakpoints will be overwritten, rest will stay as default). The values might be e.g. "mobile": 2 or "tablet": 4.

 

Notes:

·       It is not necessary to provide both attributes and categories to search for a specific set of products. It is sufficient to provide only values for "attributes" or "category_id".

·       It is not necessary to provide both images and labels for a given option. However it is recommended to provide a visual differentiation of the option by using different values for both the "label" and “image” attributes.

·       The image filename in the “image” attributes needs to be explicitly the same as the image filename uploaded for the given step.

·       It is possible to add a step which ignores all previously selected attributes and search for a specific category instead. In order to do so you need to add the attribute "category_only": true and the corresponding category ("category_id").

 

On the left-hand side of the JSON input field there is a preview window which shows the JSON input (title, description, image and labels of options) in real-time.

 

 

 

When the settings have been made, click SAVE.

 

 

 



[1] The breakpoints for the devices are: mobile up to 767px, tablet 768 - 1023px, desktop 1024px

[2] It is recommended to use JPG and PNG (RGB format) file types for images