Skip to main content

How to Configure Products

Product Options​

In the configurator, there are no traditional variants, but rather options linked to the product's store attributes.
In Composer, when editing a product, you can select store attributes (e.g., color). By clicking on "options from store," you will see the options associated with the attribute (e.g., "yellow," "red").

Data Structure in Composer​

The structure saved in Composer is organized into groups and includes:

  • Groups
  • Steps
  • Attributes
  • Options

These data are transferred to the theme via the Groups variable. Once retrieved using the useZakeke() hook, the rendering method is at the developer's discretion.

SelectOption and Selection Management​

The configuration saved in Composer contains groups, steps, attributes, and options, structured to provide a comprehensive configuration experience. However, the actual selection that impacts the configuration is based on the options selected by the user through SelectOption.

The SelectOption function manages the selection of options and activates the associated actions. Each option can include a series of actions, such as show, hide, or other actions that adjust the configuration according to the option's selected state. These actions allow, for example, showing or hiding other elements of the configuration depending on the chosen option's value.

In practice, when an option is selected via SelectOption, all actions defined for that specific option are triggered, and the configurator responds by updating the view or available options. The handling of groups, steps, and attributes serves to structure the data, but it is the selection of the option that drives the actual configuration manipulation.