VTEX Store Framework

Framework that is used by all ecommerce stores build on VTEX IO.

⚠️⚠️ All stores MUST use this app. Using a forked version WILL break your store. ⚠️⚠️

Table of Contents

• Description
• Release schedule
• Store Builder
  • Overview
  • Blocks Language
  • Interface Structure
  • Recipes
• Blocks Reference
• Pixel Architecture
• Contributing

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.

• OrderPlaced Page: orderPlaced event.

• Other: otherView event.

Enhanced Ecommerce

• Measuring Additions to a Shopping Cart: addTocart event.

• Measuring Removals from a Shopping Cart: removeFromCart event.

Contributing

Check it out how to contribute with this project.