Coder Social home page Coder Social logo

store's Introduction

VTEX Store Framework

All Contributors

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

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


gustavopvasconcellos

💻

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

store's People

Contributors

andreldsa avatar arthursampaio avatar augustolazaro avatar camilavcoutinho avatar claudivanfilho avatar dependabot[bot] avatar estacioneto avatar guifromrio avatar gustavorosolem avatar hapoza avatar hiagolcm avatar iago1501 avatar jeymisson avatar jgfidelis avatar kaisermann avatar klzns avatar lariciamota avatar lbebber avatar leticiawanderley avatar lucasecdb avatar lucis avatar rafaelbac avatar salesfelipe avatar thalytafabrine avatar thayannevls avatar thiagomurakami avatar tlgimenes avatar victorhmp avatar vtex-io-ci-cd[bot] avatar vwraposo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

store's Issues

When entering the product page, you are returning an error

Describe the bug
The page product is not rendering and is showing me the following error on the console

To Reproduce
I click on a product in the shelf and I already showed an error, sometimes renders the master branch that is not in the IO

Expected behavior
display the product page

Screenshots
image

Desktop (please complete the following information):

  • OS: [iOS]
  • Browser [chrome]

Additional context

Show Category Sliders for Each Department in the Homepage

Is your feature request related to a problem? Please describe.
We need to show sliders of categories for each departments in the homepage.

Describe the solution you'd like
We need to allow a block for the department list in the homepage. The category tree can be queried in a new react application. Since category images are not available in the catalog API, image URLs can be stored in Master Data. The new application can query data from both datasources, and resolve them to provide the relevant outcome.

Additional context
Home

A malfunctioning link occurs when a user clicks on the HTML <a> tag in the README file

Describe the bug
A malfunctioning link occurs when a user clicks on the HTML <a> tag in the README file.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the readme https://github.com/vtex-apps/store#readme
  2. Click on hyberlinks(html <a) LTS policy, Blocks, or how to contribute
    see 404 error after redirection

Expected behavior
All the HTML tag able to redirect to corrent content.

Screenshot of actual behaviours

  • LTS policy
Screenshot 2566-11-21 at 10 45 51
  • Blocks
Screenshot 2566-11-21 at 10 45 31
  • how to contribute
Screenshot 2566-11-21 at 10 45 12

Problems with the store.home

Expected behavior

The idea is to be able to import components into the "store.home" so that we can customize the house with new components.

Current Behavior

When we try to import a component into the store interfaces inside the "store.home", the site renders a default template ignoring everything that has already been done and also ignoring the new component added in the "store.home"

Context

The idea is to achieve greater precision in relation to customer layouts and to have options of custom components in very specific cases

Tela_inteira_12_03_2019_10_082
Tela_inteira_12_03_2019_10_08
Tela_inteira_12_03_2019_10_07

Brand shelf/gallary in homepage

Is your feature request related to a problem? Please describe.
list of brands should be displayed on homepage so user can easily access the brands

Describe the solution you'd like
Show list of brands (sorted list) as a gallery/shelf on homepage
Admin can show selected brands in home page
Allow query images for brands
Add load more button and when it is clicked redirect to a new page which contains all the brands.

Describe alternatives you've considered
Allow new block into store.home so we can create a new application

adding variations in Items

Is your feature request related to a problem? Please describe.
Estou tendo um problema para conseguir obter o campo de "variations" que fica localizado dentro de "Items". Pois não tenho como recuperar esse campo em outro lugar a não ser pelo searchQuery.gql

Describe the solution you'd like
Gostaria que a solução que fosse adotada, fosse a adição de "variations" dentro de "items", para poder trabalhar com esse campo em um component.

Additional context
https://prntscr.com/n3qilw

Broken contributing link

Hi everyone, everything fine?

Regarding the link to the file CONTRIBUTING.md, in the README, it is broken and does not work.

I would like to know the rules to be able to contribute with improvements to this project.

I'm waiting, thank you.

Error adding app on product page

Describe the bug
I need to add an app on the product page I can not even add in the interface as allowed and no blocks.
The app does not appear and on the front gives an "undefined interface" error and does not appear on the console when we are RENDER_8_COMPONENTS

To Reproduce
Steps to reproduce the behavior:

just add an app that has ready in store

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
image

Desktop (please complete the following information):

  • windons 10
  • Browser [chrome]
  • Version [e.g. 22]

Additional context
We were able to add until Monday morning

Product Components Scenario Testing

The purpose of this issue is to document the scenarios you SHOULD test when making changes in the ProductContext or ProductWrapper and related components. Also when working on the vtex.product-context app.

In all of these scenarios, you should expect your product page to be working properly.

1 - Navigating from home to product page from shelf.
Click on a shelf item, ensure it loads properly.

2 - Navigating from one product page to another.
Find a product with related items shelf on its page and click on an item there. Everything should work as expected during the changes.

3 - Navigating from the search page to the product page.
Make a search and click on a gallery item to navigate to the product page.

If all of these scenarios are OK, you are good to go.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.