georgebrindeiro / product-customizer

VTEX product customizer app

📢 Don't fork this project. Use, contribute or open issues in Store Discussion

Product Customizer

The Product Customizer allows a product's attachments to be made available and ready to be chosen by users from the product page.

Configuration

1. Add the product-assembly-options block to your store's product page template.
2. According to your store's scenario, declare the desired props.

  "product-assembly-options": {
    "children": [
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  }

Prop name	Type	Description	Default value
optionsDisplay	String	You should choose between “box” or “select”. This will define whether the attachment's pre-defined options will be displayed to be selected in a Checkbox (box) or a dropdown list (select) .	select

Modus Operandi

According to the data entry in the catalog, the Product Customizer takes 3 types of attachments into account when being rendered:

• Free text - Any text can be entered in this field. Users may or may not have a character limit, depending on what was filled in the Maximum Number of Characters field.
• Predefined options - Users can only choose between an attachment's predefined options, according to what's set in the Permitted Values field. The way these options will be displayed can be defined with the optionsDisplay prop.
• Boolean - If the options that are predefined in the Permitted Values field are either true ou false, users can choose the attachment by simply click on a checkbox.

Notice the example below and check out the three attachment types simultaneously displayed for the same product:

Then, check out below how the product attachment was registered in the admin's Catalog:

Notice that when a product's attachment was registered as required, all attachment options will be automatically made available to users. If the product's attachment is not added as required, the Add customization button is rendered, as shown in the example above, giving users the options to add or not to add an attachment to their product.

⚠️ The Product Customizer uses the new Assembly Options API (the traditional Attachments API will be discontinued). As a result, Checkout still doesn't natively render the customized product option previously selected by the user in the product page. For the product to be correctly displayed with the chosen attachment, it's necessary for now to customize the Checkout page interface for it to read the product data in its context and render it.

Customization

The component still doesn't have CSS Handles for its specific customization.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!