SaaS platform for e-commerce

Product types, attributes and filters

☰

← Zurück

Search Filter and Product Types (Product Attributes).

In product cards you can specify attributes that will be additionally displayed in the product description, and which will also be used for searching. To do this, first create a "Product Type".

Creating Product Type and Product Attributes

For example:
Create a "Product Type" - "Sneakers".
"Attribute" - specify several fields, "Multiple choice (Checkbox)" with names: "Color", "Purpose", "Manufacturer".
After saving field names, on the right you will be able to fill in possible options.
Create values.
Color: White, Red, Green.
Purpose: Running, Basketball, Football.
Manufacturer: Adidas, Asics, Nike

Now in the product card on the "Parameters and Attributes" tab, specify the "Product Type" and set the appropriate values.


Creating a search filter for categories.


If you need to create a search filter, in the "My blocks/menu" section, create a "Functional menu" - "Search with Product Type Filter".
This block will be displayed everywhere you enable its display.
To automatically expand the required product type in a specific category, specify the ID of the corresponding product type in the "Functional block/menu" text, and also add the text "autopath" so that when performing a search, it is performed on the same page rather than going to the general site search.
For example, if the ID of a previously created product type was 1123, then the Block/Menu text will be "1123autopath".
Now specify the path on which to display the block/menu with the search filter
"Enter characters upon detection of which to display the Block/Menu:"
/category_name/
Where category_name is the category name, the path where it is located.
To hide the Search filter when viewing a product card, in the "Enter characters upon detection of which NOT to display the Block/Menu:" field, enter
.htm


Search filter example:

To hide the search field above the Product Type, in the Design Editor, in CSS styles, add ".menu_position_left .hotengine-smart_search_input_label { display: none;}"

To hide the Product Type selection search field, in the Design Editor, in CSS styles, add ".menu_position_left .shop_catalog_product_types_id_label { display: none;}"

.menu_position_left - means we are hiding fields in the Left block of the site.


To display the number of products with the specified parameter, you can use the parameter ("count") when creating a Functional Block/Menu with a search filter.
To hide undetected attributes - "hideempty" (described in detail on the Functional Block/Menu creation page).
To display the search filter values selected by the visitor at the top of the page, you can use the parameter "checkedlist". This function can also be activated in the "Mobile menu: Application" section on the "Search filter" tab. It will simplify user access to the selected values for search, which is especially convenient when viewing the site on mobile devices or screens with low resolution. It is enough to enable the function once - either using the "checkedlist" parameter in the "My blocks/Menu" - "Search filter" section, or in the "Mobile menu: Application" section, in the "Search filter" tab.
Demo:
Value1 ×
Value2 ×
Demo 2:
Value 3 ×
Value4 ×

Creating automatic descriptions.

When using product types and attributes, you can create articles and use them to add to product cards. Descriptions will be added depending on the attributes or categories set for the product. Management and detailed instructions are available on the "Store" - "Automatic Descriptions" page.

Inserting a search filter on a regular page.

If you need to place a block with a search filter inside the page text (description, article, content page, etc.), use the following shortcode:
{HOTENGINE-SC:smart_search_widget:PARAM}

Instead of PARAM, specify the parameters that control the operation and display of the filter.

Available shortcode parameters


  • autopath — automatic substitution of the search query submission path
  • checkedlist — add the list of selected filter values at the top of the page
  • hide_input — hide the search query text field (can be hidden with a parameter or using CSS styles)
  • all — do not consider category when searching
  • child_cat — perform search across all child subcategories
  • count — display the number of products
  • count_all — display the number of products without considering the category
  • hideempty — hide the parameter if no products are found for it
  • hideempty_all — hide the parameter if no products are found for it (without considering the category)

All search filter widget settings match the parameters of the functional menu "Search filter".

Parameter format


Parameters can be specified using the "|" symbol

Usage example


{HOTENGINE-SC:smart_search_widget:autopath|count_all|hideempty|Product type ID|checkedlist|all|hideempty_all|pathurl=/ua/pers_shop/snakers/|}

Explanation of the example


  • Product type ID — specifies the identifier of the product type for which the filter should work (required)
  • pathurl=/ua/pers_shop/snakers/ — relative path to the category, where a functional menu block with a search filter is additionally placed

The path /ua/pers_shop/snakers/ is a relative path to the category and is used for correct formation of search queries and links.
← Zurück