VTEX Store Framework
Framework that is used by all ecommerce stores build on VTEX IO.
Table of Contents
Description
Store Framework is responsible for defining the basic structure of any ecommerce store of the platform. With this app, we want to provide an abstraction for our clients and partners not worry about SEO and fetch basic data from VTEX. Any account has this app installed.
This project has the following capabilities:
- Setup metatags for all pages.
- Fetch product and products search data from VTEX APIs
- Dispatch view events to analytics tools.
- Define the necessary interfaces and routes of the store.
Release schedule
Release | Status | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
---|---|---|---|---|---|
[2.x] | Current Release | 2018-11-28 | 2.x | ||
[1.x] | Maintenance LTS | 2018-08-21 | 2018-11-28 | March 2019 | 1.x |
See our LTS policy for more information.
Store Builder
VTEX IO created a powerful way to configure the behavior React components yielding the basic building blocks for a web app.
IO store builder is a opinionated way to use IO capabilities to quickly build store components that can be reused across ecommerce stores and interact seamlessly with its APIs and existing components.
Overview
The Store builder allows you to extend existing blocks, like the ones provided by the Store Framework, allowing them to replace the blocks they extend via the VTEX IO Content Management System (CMS). They also allow you to build new blocks that provide functionality specific to your business needs and, then, create templates to insert those new blocks in your clients' ecommerce store while still benefiting from the continuous progress made by the native store components and it's extensions on the other parts of your store.
Blocks Language
Blocks are instances of configured React components that follow a defined contract - or interface. Blocks can be shared between apps and can contain other blocks. They can be used to create simple widgets like buttons and forms, ready to use features like a review system or whole web pages.
To create web pages - or templates, a block must be acessible by a route. Routes associate blocks with paths that can be used to match URLS. These templates are configurable in VTEX IO CMS.
Apps can also insert its blocks on specific page components as soon as the app is installed, via plugins. Plugins provide an easy way to add specific functionality in a plug and play fashion to any store - e.g. Visa Checkout button on the shopping cart, 360º image on the product galery.
To ensure that blocks would be reusable across stores, any VTEX IO store contain a set of interfaces which blocks must implement. Interfaces are contracts that define the block component and which interfaces it may contain, among other constraints.
The store builder validates and exports blocks, routes, interfaces and plugins defined in the app.
This allows the admin CMS and the store to use them. The configuration files which declares those
components must be in the store/
folder on the root of the app.
The following sections we detail more about this concepts.
Interface Structure
[TODO] Explain interface structure, how it make stores "compatible" and its components reusable.
Recipes
[TODO]
How to extend VTEX Store interfaces?
How to create a block / interface / route / plugin?
Examples, examples, examples...
Blocks Reference
Please refer to Blocks
Pixel Architecture
-
Home:
homeView
event. -
Product:
productView
event. -
Department:
departmentView
event. -
Category:
categoryPath
event. -
Internal Site Search:
internalSiteSearchView
event. -
Other:
otherView
event.
Enhanced Ecommerce
-
Measuring Additions to a Shopping Cart:
addTocart
event. -
Measuring Removals from a Shopping Cart:
removeFromCart
event.