Documentation
Feedback
Guides

VTEX Product Kit

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-kit-0.png"}}

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

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
[1.x]Current Release2018-11-052.x
[0.x]Maintenance LTS2018-07-062018-11-05March 20191.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 nameTypeDescriptionDefault Value
showArrowsBooleanShow or not the arrowstrue
nextArrowStringNext arrow icon''
prevArrowStringPrevious arrow icon''
showDotsBooleanShow or not the slider dotstrue
dotsStringSlider dots icon''
showListPriceBooleanShow or not the list pricetrue
showLabelsBooleanShow or not the labels "from" and "to"false
showInstallmentsBooleanShow or not the installmentsfalse
showBadgeBooleanShow or not the discount badgefalse
badgeTextStringText of the discount badgeBadge Text/Texto de badge/Texto da badge
showCollectionsBooleanShow or not the collections badgestrue
allowSwapBooleanAllow or not the item swaptrue
allowRemovalBooleanAllow or not the item removaltrue

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.

  1. Add the styles builder to your manifest.json:

_10
"builders": {
_10
"styles": "1.x"
_10
}

  1. Create a file called vtex.product-kit.css inside the styles/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 nameDescriptionComponent Source
containerA wrapper that envolves all the elements of the product kit, responsible for the main margins and paddingsProductKitContent
listContainerThe container for the products and final pricesindex
listDetailsThe container for the total price of the kitListDetails
itemThe container of one productProductKitItem

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

Travis CI

{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/product-kit.svg?branch=master"}}
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGMQERKSVFaZHxv4//RaABF7BF2mRdqxAAAAAElFTkSuQmCC","img":{"src":"https://coveralls.io/repos/github/vtex-apps/product-kit/badge.svg?branch=master","width":99,"height":20,"type":"svg"}}

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