Message # 1 | 12:52 PM
Main definitions


  • Category is a category of the Online Shop.
  • End category is a category of the Online Shop without any subcategories.
  • Product group or global category are sections of the ready-to-use product descriptions. They can be created by the user as well.
  • Specification is a set of the features with configured values.
  • Global description is a ready-to-use specification for the certain product model. When such a description is connected to a product, a name, brand, image, and product group of this description are connected as well.
  • Feature is a parameter of the product. For example, for the Phones product group it can be a diagonal of the screen.
  • Feature value is a value of the product parameter. For example, for the Phones product group it can be a length of the diagonal in inches.
  • User (in this guide) is a shop administrator or it can be any other profile with the right to edit all of the products.
  • Control Panel is a Control Panel of the website, a page of the Online Shop module. Usually, it looks like this http://yoursitename/panel/?a=shop.


  • Main features


    Allow users to compare products by feature values
    Allow users to filter products by feature values

    Prerequisites


    It is expected that a shop administrator already has a set of products divided by categories. Within the uCoz system, features belong to the product groups. That’s why it’s necessary to set up what product group products from the category will belong to. This connection can be specified in the Control Panel. To do so, go to the category management page: http://yoursitename/panel/?a=shop;l=cats.



    Next, click on the edit button next to the desired category:



    In the image above the red square indicates the field where the connection is specified. Only the end category can be connected to the product group.

    Once the necessary product group is chosen, the category can be saved. After this, the Product filter block with the $SPEC_FILTER$ code will be available on the category page. More on how to create and edit personal product groups will be described further in the post. After these actions have been taken, all products belonging to the category connected to the product group will have the Specification tab with specific content. For the user the tab will show up like this:



    The content of the tab can be broken down into 3 blocks:
    • Block 1: Notifications containing informative alerts. For example, in the picture, you can see that the product is connected to the specification of the Cameras product group.
    • Block 2: Duplication of several features. The Сurrent product group is the duplication of the feature to create a connection between the Global description and the Category, which we’ve reviewed earlier. The Global description is a duplication of the feature from the editing form.
    • Block 3: Specification in the editing mode. Here, a user can specify feature values, create his own features and values.


    Products filtering


    A shop customer can filter products by features with the help of the filter block. This block is displayed only on the category page connected to the global description. The filter block looks like this:



    There’s a difference between how users and customers view the filter block. Users can manage the appearance of filter elements with the help of control elements that look like this:



    They allow to display the feature as collapsed or expanded or hide it.

    In the first case, all collapsed features and values will be moved under the More element. When a value is selected, all products will be filtered by this parameter. When several values of one feature are selected, all the products having the feature with one of the selected values will be displayed.

    When several values from different features are selected, all the products with values matching the selected ones will be displayed.

    Whether the filter results are saved or not depends on the Display product filters in the address bar option on the settings page: Control Panel > Online Shop > Module settings (http://yoursite/panel/?a=shop;l=setup). In case the option is disabled, filter values will be saved in cookies of the user’s browser. If the option is enabled, then the value will be displayed in the address bar. This link can be shared with customers, as it will take them directly to the filter results.

    Adding your own product groups, features, and values


    In the case when the ready-to-use product groups, features, and values don’t suit the user, the preferred ones can be added. However, there is a number of limitations. It’s not allowed to add new product groups to the end product groups. Although, it’s possible to add a new child product group to the already existing parent one. It’s not allowed to edit the system product groups, features, and values. The elements that users create are available only to them until the moderator approves them. After the moderation, these elements are available to everyone. The processes of creating, editing, and deleting elements are quite similar.

    Now we will talk about how to create a parent feature with subfeatures. You can create and edit features on the product’s specification page. However, editing it will affect the whole product group. To add a root feature, click on the plus icon next to Add specification:



    In the window that appears, complete the Name field:



    We’ll skip completing the Value field. This will allow us to create a child feature. Click Save and you’ll see a new feature on the page:



    Next, you need to click on the plus icon next to the feature name. In the window that appears, fill out the name and value fields for the child feature:



    Here’s how your result may look like:



    As described before, to create a root feature with values, you need to complete value fields when creating a feature. Editing and deleting is performed in the window that appears after this button has been pressed:



    Adding, editing, and deleting product groups is done in a similar way. The adding window appears after the corresponding item from the drop-down menu has been pressed:



    Editing/deleting is available after you’ve chosen your own product group. In this case, the corresponding elements will be displayed:



    Important! The shop.css file (Online Shop -> CSS) must be updated for the new features to be displayed correctly.