VTEX Store Components

Description

VTEX Store Components is a collection of components that can be used to create/extend others VTEX apps.

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

Table of Contents

• Usage
  • Styles API
• Components Specs
• Creating a new component
  • Project structure
• Troubleshooting
• Contributing
• Tests

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app, you need to import in your dependencies on manifest.json.

  "dependencies": {
    "vtex.store-components": "3.x"
  }

Then, you can add a component block into your app theme as we do with product-price in our Product Details app.

For example, now you can change the behavior of product-price block that is in the product details. See an example of how to configure:

"product-price": {
  "props": {
    "showListPrice": true,
    "showLabels": false,
  }
}

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.store-components.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

Components Specs

Below we have a README for each component of this project that explains how to use them.

• Animation
• Availability Subscriber
• Back To Top Button
• Buy Button
• Categories Highlights
• Collection Badges
• Container
• Discount Badge
• Gradient Collapse
• Greeting
• Image
• InfoCard
• Logo
• Newsletter
• Product Brand
• Product Description
• Product Images
• Product Name
• Product SKU Attributes
• Product Price
• Product Specifications
• SKU Selector
• Search Bar
• Share
• Shipping Simulator
• Slider
• Notification

Creating a new component

To start your development, create a new folder on react/components. That's where your source code will be stored. Also create a new js file on /react, this file should be used to expose your component, like:

Project structure

Inside your react/components/<component_name> you should have:

• index.js
• README.md
• [Optional] components/
• [Optional] constants/
• [Optional] utils/
• [Optional] queries/
• [Optional] mutations/
• [Optional] styles.css

Next, inside of react/ folder you need to export your component, such as:

import ProductPrice from './components/ProductPrice/index'

export default ProductPrice

Also, all dependencies needed should be inserted inside the react/package.json.

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):

Dan 💻	Jean Nussenzveig 💻	Lucas Antônio Yamamoto Borges 💻	Sebastian Sanchez Vega 💻	Erislandio 💻	Beatriz Miranda 💻	Jayendra 💻
Pierre Grimaud 📖	Igor Poubel 💻	Hugo Costa 💻	Matheus Araujo 📖	Luisa Correa 💻	pmarignan 💻	Rodrigo Muniz 💻
Ovi 💻

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

Upcoming documentation:

• Render logo as amp-img if in AMP page

• Update CSS handles on ProductSpecification

• Including classes on searchBar to identify when is open and/or filled