Documentation
Feedback
Guides

Product Gifts

The Product Gifts app provides blocks responsible for displaying, in the Product Description block, all gifts available for a given product.

A product's gift is configured in a Buy&Win promotion

{"base64":"  ","img":{"width":1848,"height":856,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":375770,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-0.png"}}

Configuration

  1. Add the product-gifts app to your theme's dependencies in the manifest.json. For example:

_10
"dependencies": {
_10
"vtex.product-gifts": "0.x"
_10
}

Now, you are able to use all blocks exported by the product-gifts app. Check out the full list below:

Block nameDescription
product-gifts
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":923,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-1.png"}}
Renders a default Product Gifts block implementation.
gift-text
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":923,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-2.png"}}
Reads Catalog data regarding the product's gifts and provides it to its children.
product-gift-listRenders the available gifts in a list format. It also provides context for its 3 children listed below.
gift-nameRenders the product's gift name.
gift-imageRenders the product's gift image.
gift-descriptionRenders the gift's description provided by the product-gift-list block.
  1. Add the product-gifts block to your store.product template:

_10
"store.product": {
_10
"children": [
_10
// (...)
_10
"product-gifts",
_10
]
_10
}

When added to the store.product template but not declared with any children or prop, the Product Gifts block is rendered even so.

For the rendering, it uses the following block implementation behind the scenes:


_55
{
_55
"product-gifts": {
_55
"props": {
_55
"maxVisibleItems": {
_55
"desktop": 2,
_55
"mobile": 1
_55
}
_55
},
_55
"children": ["flex-layout.row#product-gifts-text", "product-gift-list"]
_55
},
_55
_55
"flex-layout.row#product-gifts-text": {
_55
"props": {
_55
"verticalAlign": "middle",
_55
"colSizing": "auto",
_55
"preserveLayoutOnMobile": true
_55
},
_55
"children": [
_55
"rich-text#product-gifts",
_55
"flex-layout.col#product-gifts-text"
_55
]
_55
},
_55
"flex-layout.col#product-gifts-text": {
_55
"children": ["gift-text"],
_55
"props": {
_55
"verticalAlign": "middle"
_55
}
_55
},
_55
"rich-text#product-gifts": {
_55
"props": {
_55
"text": "**+ GIFT**"
_55
}
_55
},
_55
"gift-text": {
_55
"props": {
_55
"text": "{exceedingItems, plural, =0{ } one {+ # gift} other {+ # gifts}}"
_55
}
_55
},
_55
"product-gift-list": {
_55
"children": ["flex-layout.row#gift"]
_55
},
_55
"flex-layout.row#gift": {
_55
"props": {
_55
"fullWidth": true
_55
},
_55
"children": ["flex-layout.col#gift-name-description", "gift-image"]
_55
},
_55
"flex-layout.col#gift-name-description": {
_55
"props": {
_55
"verticalAlign": "middle",
_55
"rowGap": 3
_55
},
_55
"children": ["gift-name", "gift-description"]
_55
}
_55
}

Advanced configuration

If desired, you can change the Product Gifts default implementation by explicitly declaring the code showed above in your store.product template.

As a result, you will be able to configure the Product Gifts behavior by using all available props for each block:

  • product-gifts

{"base64":"  ","img":{"width":1310,"height":478,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":96037,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-3.png"}}

Prop nameTypeDescriptionDefault value
maxVisibleItemsnumber | "showAll"Maximum number of gifts that will be displayed at once"showAll"
  • gift-text

{"base64":"  ","img":{"width":156,"height":90,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":6067,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-4.png"}}

Prop nameTypeDescriptionDefault value
textStringA translatable string (according to ICU pattern) that has variables that might be used to render any desired text regarding the gifts."{exceedingItems, plural, =0{ } one {+ # gift} other {+ # gifts}}"

You can configure the string received by the text prop using the following variables:

Variable nameDescription
exceedingItemsNumber of items that were not rendered because of the maxVisibleItems prop of product-gifts.
totalGiftsTotal number of gifts available.
visibleItemsNumber of items that are being rendered.
  • gift-name

{"base64":"  ","img":{"width":516,"height":72,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":15366,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-5.png"}}

Prop nameTypeDescriptionDefault value
linkToProductPageBooleanWhether or not the gift-name block should be a link to the gift's product page.false
nameTypeenumName type to be displayed alongside the gift. Possible values are: productName (displays the gift's product name) and skuName (displays the gift's SKU name).skuName
  • gift-image

{"base64":"  ","img":{"width":396,"height":296,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51380,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-gifts-6.png"}}

Prop nameTypeDescriptionDefault value
maxWidthNumber | StringGift image maximum width.125
maxHeightNumber | StringGift image maximum height.125
minWidthNumber | StringGift image minimum width.125
minHeightNumber | StringGift image minimum height.125
imageLabelStringThe label of the image that should be rendered.undefined

If no image label is defined, the gift-image block will use the first available image from the product's SKU.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

Thereafter, you should add a single column table with the available CSS handles for that block:

CSS Handles
giftDescription
giftListItem
giftNameLink
giftNameText
productGiftListContainer
productGiftText
productGiftsContainer
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page