Product Summary Shelf by vtex

The Product Summary Shelf is the main block exported by the Product Summary app. It includes the child blocks required to display the Product Summary component in your store.

{"base64":" ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":543765,"url":"https://user-images.githubusercontent.com/40380674/96649443-7d21d480-1307-11eb-9100-534fa9e70ca6.png"}}

)

Configuration

Import the vtex.product-summary app to your theme's dependencies in the manifest.json:

  dependencies: {
    "vtex.product-summary": "2.x"
  }

Add the product-summary.shelf block as a child of the list-context.product-list block :

   "list-context.product-list": {
+     "blocks": ["product-summary.shelf"]
   },

Declare the product-summary.shelf block, passing the desired blocks exported by the Product Summary app in order to build your Product Summary component. For example:

{
+ "product-summary.shelf": {
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-rating-inline",
+      "product-summary-space",
+      "product-summary-price",
+      "product-summary-buy-button"
+    ]
+ }
}

Remember to define the other Product Summary blocks in your theme as well, otherwise the component will not be displayed.

Prop name	Type	Description	Default value
`priceBehavior`	`enum`	Whether the component should fetch the most up-to-date price (`async`) or not (`default`). Remember to also set the Search Result's`simulationBehavior` prop to `skip` and use the Product Price's `product-price-suspense` block to render a loading spinner while the price data is being fetched.	`default`
`trackListName`	`boolean`	Whether the component should send the list name to the product page when the product summary is clicked. Disabling it will prevent the `productDetail` GTM event sent on the PDP to identify from which list the user navigated from.	`true`

Customization

The Product Summary Shelf merely establishes the block structure to render the Product Summary component. Therefore, this block doesn't have CSS Handles for its specific customization.

Instead, you should use its child block's Handles.