Store Components

Description

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

Travis CI

Table of Contents

• Usage
• Components Specs
• Creating a new component
  • Project structure
  • Working on your src/index.js
• Testing

Components Specs

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

• Buy Button
• Collection Badges
• Discount Badge
• Footer
• Logo
• Product Description
• Product Images
• Product Name
• Product Price
• Quantity Selector
• Search Bar
• Share
• Shipping Simulator
• SKU Selector
• Slider
• Technical Specifications
• Availability Subscriber

Usage

To import a component of this project follow the instructions below.

You need to add into the dependencies of your manifest.json and use it like a npm module.

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

And to import it into your code, for example:

import ProductPrice from 'vtex.store-components/ProductPrice'

Creating a new component

To start your development, create a new folder on react/components. Thats 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] global.css

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

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

export default ProductPrice

Working on your index.js

All the css needed and used on the component should be inside of a global.css and it should be imported by the index.js file like:

import './global.css'

All dependencies needed should be inserted inside the react/package.json

Testing

To test your code you should run on your workspace:

vtex link