The Product Customizer component can be used on the Product Details Page (PDP) to display attachments and/or a subscription form.
An attachment is the optional and cost-free customization of a product.
Example of a PDP with the Product Customizer component displaying the product's attachments.
Product subscriptions facilitate recurring sales by automatically scheduling the purchase of a specific product at the frequency requested by the customer.
Example of a PDP with the Product Customizer component displaying the product subscription.
Before you start
- If you'll use the Product Customizer component to display attachments, set up Assembly Options.
- If you'll use the Product Customizer component to display a subscription form, set up Subscriptions. The Product Customizer's integration with the Subscription module is native and automatically enabled when subscriptions settings are detected.
Configuration
- Add the
product-customizer
app to your theme's dependencies in themanifest.json
, for example:
dependencies: {
+ "vtex.product-customizer": "2.x"
}
- Add the
product-assembly-options
block as a child of thestore.product
template (PDP template). This is enough to enable the subscription form.
"store.product": {
"children": [
"flex-layout.row#product-breadcrumb",
"flex-layout.row#product-main",
"flex-layout.row#description",
"shelf.relatedProducts",
"product-reviews",
"product-questions-and-answers",
+ "product-assembly-options"
]
},
- Declare the
product-assembly-options
props according to your scenario.
Displaying attachments (Optional)
- Declare the
product-assembly-options
block and add theassembly-option-input-values
block as its child to display the attachments of a product on the PDP.
"product-assembly-options": {
"children": [
"assembly-option-input-values"
]
},
- Use the blocks exported by the
product-customizer
app to build the most suitable solution for your scenario.
Block name | Description |
---|---|
assembly-option-item-image | Displays the attachment image. |
assembly-option-item-quantity-selector | Displays a quantity selector. |
assembly-option-item-name | Displays the attachment name. |
assembly-option-item-price | Displays the attachment price. |
assembly-option-item-customize | Displays the Customize button. When clicked, it opens a modal that allows shoppers to customize the attachment. |
assembly-option-item-children-description | Displays a summary with all attachments selected. |
- Declare the props for the chosen blocks according to your scenario. For example:
"product-assembly-options": {
"props":{
"initiallyOpened": "always"
},
"children": [
"flex-layout.row#product-assembly-options",
"assembly-option-input-values"
]
},
While building your solution, notice that you can receive inputs from three types of attachments:
- Predefined options - Predefined attachment options set in the
Permitted Values
field. Set up theoptionsDisplay
prop from theassembly-option-input-values
block to define how these options are displayed. - Free text - Text input. Depending on the Maximum Number of Characters field in the attachment settings, shoppers may or may not face a character limit.
- Boolean - Boolean attachment options set in the
Permitted Values
field. Shoppers can select the attachment by simply clicking on a checkbox.
Check the following example where the three attachment types are implemented:
Check out below how the product attachment displayed above was registered in the Catalog:
It's worth noting that when an attachment is registered as required, all attachment options are automatically made available to shoppers. If an attachment is not required, the Add customization
button is rendered as in the example above, giving shoppers the option to add or not an attachment to their product.
Also, keep in mind that the Checkout doesn't natively display the customized product option selected by the shopper. To display the product in the Checkout with the selected attachments, it's necessary to customize the Checkout page, allowing it to read and render product data.
Props
product-assembly-options
props
Prop name | Type | Description | Default value |
---|---|---|---|
initiallyOpened | enum | Defines whether the customization box will be opened even if an attachment is not required (always ) or if the customization box will be opened only if the attachment is required (required ). | required |
assembly-option-input-values
props
Prop name | Type | Description | Default value |
---|---|---|---|
optionsDisplay | enum | Defines whether a Checkbox (box ) or a dropdown list (select ) will be used to select the attachment's pre-defined options. | select |
assembly-option-item-customize
props
Prop name | Type | Description | Default value |
---|---|---|---|
buttonProps | object | Defines the behavior of the Customize button. In addition to the collapse prop, the buttonProps object also receives child blocks to build the content of the modal triggered when the button is clicked on. | undefined |
buttonProps
object:
Prop name | Type | Description | Default value |
---|---|---|---|
collapse | enum | Customize button positioning. Possible values are: left or right . | left |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.
CSS Handles |
---|
booleanInputValue |
inputValueOptionBox |
itemContainer |
modalViewDoneButton |
modalViewProductContainer |
modalViewProductImage |
modalViewProductInfos |
modalViewProductName |
multipleItemQuantitySelector |
optionsInputValue |
optionsInputValueDropdown |
optionsInputValueLabel |
optionsInputValueLabelContainer |
optionsInputValueOptionBoxContainer |
productAssemblyGroupName |
productAssemblyGroupNameRow |
productAssemblyGroupRequiredTag |
productAssemblyOptionItemCustomize |
productAssemblyOptionItemCustomize__label |
productAssemblyOptionItemImage |
productAssemblyOptionItemName |
textInputValue |