### VTEX Product Customizer: Available Blocks Reference

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Reference for blocks exported by the `product-customizer` app, detailing their purpose for displaying and customizing product attachments on the Product Detail Page (PDP).

```APIDOC
Block Name: assembly-option-item-image
  Description: Displays the attachment image.
Block Name: assembly-option-item-quantity-selector
  Description: Displays a quantity selector.
Block Name: assembly-option-item-name
  Description: Displays the attachment name.
Block Name: assembly-option-item-price
  Description: Displays the attachment price.
Block Name: assembly-option-item-customize
  Description: Displays the `Customize` button. When clicked, it opens a modal that allows customers to customize the attachment.
Block Name: assembly-option-item-children-description
  Description: Displays a summary with all selected attachments.
```

--------------------------------

### Configure product-assembly-options block with custom props and children

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Demonstrates how to declare the `product-assembly-options` block, including its `props` (e.g., `initiallyOpened`) and multiple children blocks, to customize the display behavior of product attachments according to specific scenario requirements.

```json
"product-assembly-options": {
 "props":{
   "initiallyOpened": "always"
  },
 "children": [
   "flex-layout.row#product-assembly-options",
   "assembly-option-input-values"
 ]
},
```

--------------------------------

### VTEX Product Customizer: product-assembly-options Props

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Documentation for the configurable properties of the `product-assembly-options` block, including their type, detailed description, and default values, to control attachment display behavior.

```APIDOC
Prop Name: initiallyOpened
  Type: enum
  Description: 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`).
  Default value: required
```

--------------------------------

### Declare product-assembly-options block for basic attachment display

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Illustrates the basic declaration of the `product-assembly-options` block, including `assembly-option-input-values` as its child, to enable the display of product attachments on the Product Detail Page (PDP).

```json
  "product-assembly-options": {
    "children": [
      "assembly-option-input-values"
    ]
  },
```

--------------------------------

### Props for assembly-option-input-values component

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Documents the available properties for the `assembly-option-input-values` component, including their type, description, and default value. This component is used to define how pre-defined options for attachments are displayed.

```APIDOC
Component: assembly-option-input-values
Props:
  optionsDisplay:
    Type: enum
    Description: Defines whether a checkbox (box) or a dropdown list (select) will be used to select the attachment pre-defined options.
    Default: select
```

--------------------------------

### Add Product Customizer App to Theme Dependencies

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

This snippet demonstrates how to add the 'vtex.product-customizer' app as a dependency in your theme's 'manifest.json' file. This is the initial step required to enable the Product Customizer functionality in your VTEX store, ensuring the component is available for use.

```JSON
  dependencies: {
+   "vtex.product-customizer": "2.x"
 }
```

--------------------------------

### CSS Handles for Product Customizer Components

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Lists the CSS handles available for styling various elements within the product customizer components. These handles allow developers to apply custom CSS rules for granular control over the appearance of the UI.

```CSS
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
```

--------------------------------

### Add Product Assembly Options Block to PDP Template

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

This configuration shows how to include the 'product-assembly-options' block as a child of the 'store.product' template, which represents the Product Details Page (PDP). Adding this block is sufficient to enable the subscription form functionality provided by the Product Customizer, integrating it seamlessly into your product pages.

```JSON
  "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"
    ]
  },
```

--------------------------------

### Props for assembly-option-item-customize component

Source: https://github.com/vtex-apps/product-customizer/blob/master/docs/README.md

Documents the available properties for the `assembly-option-item-customize` component, specifically focusing on the `buttonProps` object and its nested `collapse` property. This component controls the behavior and positioning of the 'Customize' button.

```APIDOC
Component: assembly-option-item-customize
Props:
  buttonProps:
    Type: object
    Description: Defines the behavior of the Customize button. In addition to the collapse prop, the buttonProps object can include child blocks to build the content of the modal triggered when the button is clicked.
    Properties:
      collapse:
        Type: enum
        Description: Customize button positioning. Possible values are: left or right.
        Default: left
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.