VTEX Product Kit

⚠️ 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.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

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

See our LTS policy for more information.

Table of Contents

• Usage
  • Blocks API
    • Configuration
  • Styles API
    • CSS namespaces
• Troubleshooting
• Contributing
• Tests

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.

  dependencies: {
    "vtex.product-kit": "1.x"
  }

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:

"product-kit": {
    "blocks": [
      "product-summary"
    ],
    "props":{
      "showArrows": true,
      "nextArrow": "next",
      "prevArrow": "prev",
      "showDots": true,
      "dots": "dots",
      "showListPrice": true,
      "showLabel": true,
      "showInstallments": true,
      "showBadge": true,
      "badgeText": "badge",
      "showCollections": true,
      "allowSwap": true,
      "allowRemoval": true,
    }
  }

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.

  "product-kit": {
    "required": [
      "product-summary"
    ],
    "component": "index"
  }
}

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.

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

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

2. Create a file called vtex.product-kit.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are define 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.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!