The Product Kit app has been deprecated. Although support for this app is still granted by VTEX, we strongly recommend you to update your store theme in order to keep up with the framework's evolution!
Description
The VTEX product kit app shows two or more products as a kit. Usually these products are sold together and offer a discount. This app is used by store theme.
Release schedule
Release | Status | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
---|---|---|---|---|---|
[1.x] | Current Release | 2018-11-05 | 2.x | ||
[0.x] | Maintenance LTS | 2018-07-06 | 2018-11-05 | March 2019 | 1.x |
Table of Contents
Usage
This app uses our store builder with the blocks architecture. To know more about Store Builder click here.
We add the product-kit as a block in our Store.
To configure or customize this app, you need to import it in your dependencies in manifest.json
.
_10 dependencies: {_10 "vtex.product-kit": "1.x"_10 }
Then, add product-kit
block into our app theme as we do in our Store theme app.
Now, you can change the behavior of the product-kit
block. See an example of how to configure:
_20"product-kit": {_20 "blocks": [_20 "product-summary"_20 ],_20 "props":{_20 "showArrows": true,_20 "nextArrow": "next",_20 "prevArrow": "prev",_20 "showDots": true,_20 "dots": "dots",_20 "showListPrice": true,_20 "showLabel": true,_20 "showInstallments": true,_20 "showBadge": true,_20 "badgeText": "badge",_20 "showCollections": true,_20 "allowSwap": true,_20 "allowRemoval": true,_20 }_20 }
Blocks API
This app has an interface that describes what rules must be implemented by a block when you want to use the product kit.
_10 "product-kit": {_10 "required": [_10 "product-summary"_10 ],_10 "component": "index"_10 }_10}
The product kit has as a required block the product-summary
. So, any product kit block implementation created must add a product-summary as a block that is inside of product kit. (Similarly, product-summary
has its own inner block structure that can be configured. There is a link to its API in the next section.)
Configuration
Through the Storefront you can change the behavior and interface of ProductKit
. But, you can also make adjusts in your theme app, like Store does.
Prop name | Type | Description | Default Value |
---|---|---|---|
showArrows | Boolean | Show or not the arrows | true |
nextArrow | String | Next arrow icon | '' |
prevArrow | String | Previous arrow icon | '' |
showDots | Boolean | Show or not the slider dots | true |
dots | String | Slider dots icon | '' |
showListPrice | Boolean | Show or not the list price | true |
showLabels | Boolean | Show or not the labels "from" and "to" | false |
showInstallments | Boolean | Show or not the installments | false |
showBadge | Boolean | Show or not the discount badge | false |
badgeText | String | Text of the discount badge | Badge Text/Texto de badge/Texto da badge |
showCollections | Boolean | Show or not the collections badges | true |
allowSwap | Boolean | Allow or not the item swap | true |
allowRemoval | Boolean | Allow or not the item removal | true |
Also, you can configure the product summary that is defined on product-kit. See here the Product Summary API.
Styles API
This app provides some CSS classes as an API for style customization.
To use this CSS API, you must add the styles
builder and create an app styling CSS file.
- Add the
styles
builder to yourmanifest.json
:
_10 "builders": {_10 "styles": "1.x"_10 }
- Create a file called
vtex.product-kit.css
inside thestyles/css
folder. Add your custom styles:
_10.container {_10 margin-top: 10px;_10}
CSS namespaces
Below, we describe the namespaces that are in the ProductKit
.
Class name | Description | Component Source |
---|---|---|
container | A wrapper that envolves all the elements of the product kit, responsible for the main margins and paddings | ProductKitContent |
listContainer | The container for the products and final prices | index |
listDetails | The container for the total price of the kit | ListDetails |
item | The container of one product | ProductKitItem |
Troubleshooting
You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.
Tests
To execute our tests go to react/
folder and run yarn test