store-components
store-components copied to clipboard
Default VTEX store components
π’ Disclaimer Don't fork this project. Use it, contribute to it or open issues through Store Discussion to help us evolve it.
VTEX Store Components
VTEX Store Components is a collection of components that can be used to create/extend others VTEX apps.
-
VTEX Store Components
- Usage
- Styles API
- Components
-
Creating a new component
- Project structure
- Troubleshooting
- Contributing
-
Tests
- Travis CI
- Contributors
Usage
The Store Components collection uses the store
builder with the blocks architecture. Please refer to our Builder documentation to learn more about the store
builder.
To use this app, you must import it as dependency of your project in the manifest.json
file.
"dependencies": {
"vtex.store-components": "3.x"
}
Then, you can start adding components to your store theme app.
Styles API
The Store Components collection 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
:
"builders": {
"styles": "2.x"
}
- Create a file called
vtex.store-components.css
inside thestyles/css
folder. Add your custom styles:
.container {
margin-top: 10px;
}
Components
For more information, check the documentation of all components of the Store Components collection.
- Availability Subscriber
- Back To Top Button
- Buy Button
- 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
- Notification
β οΈ Warning
The following blocks have been deprecated:
Animation
,Categories Highlights
,Collection Badges
,Container
,Discount Badge
,Gradient Collapse
,Greeting
,Slider
. Despite this, support for them is still granted.
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):
This project follows the all-contributors specification. Contributions of any kind welcome!
Upcoming documentation: