The template repository for the Store Framework course on Learning Lab.
hggo / store-framework Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://lab.github.com/vtex-trainings/store-framework
Home Page: https://lab.github.com/vtex-trainings/store-framework
For your Mac setup video, click here
Before getting your hands dirty and learning more about VTEX IO's Store Framework, you'll need to set up a few basic configurations, such as:
Have a look at the step-by-step below for each of these configurations:
Install Git on your computer by clicking on the link below and selecting your operating system (Windows, MAC or Linux):
Toolbelt is a VTEX command line tool. It allows you to perform any activity on the platform, such as creating a new development workspace, logging into a VTEX account, developing new apps, or managing already existing ones, etc.
Since it's Toolbelt that establishes the communication between the developer and the platform, you'll need it in order to perform all the activities put forward during the Store Framework course.
npm i -g vtex
in your terminal if you're using Windows or yarn global add vtex
if you're using MAC;Your can run vtex-v
(Windows) or vtex
(MAC) to confirm whether the Toolbelt installation was as expected.
Once successfully installed, your next step is to log into a VTEX account.
Run vtex login VTEXaccount
in your terminal, replacing VTEXaccount
with the name of the account in which you want to work. For example, vtex login appliancetheme
.
After logging in, run vtex whoami
to confirm the account and workspace in which you find currently are.
Workspaces are nothing other than what the namesake suggests. On VTEX IO, accounts have three main workspace types, namely master, production and development.
The next step is to create a development workspace, which will allow you to play with the configurations throughout the course without altering the store's final public version.
vtex use workspace-name
, replacing workspace-name
with the desired name. For example, vtex use devworkspace
.After creating the workspace, you'll be able to access it at this link: https://{workspace}--{account}.myvtex.com
, replacing {workspace}
and {conta}
with the name of the previously created workspace and account. For example, https://devworkspace--appliancetheme.myvtex.com
After setting up the basic configurations, you're ready to start the course!
Before getting down to business there are some important, frequently occurring concepts you need to familiarize yourself with.
Store Framework is a commerce low-code tool used for building unique and custom storefronts.
The building flow starts with a custom theme, which can be worked on in different workspaces, without impacting the production environment.
A theme is essentially an arrangement of blocks and their position. In a theme, you can define every customization, position and style for every block that theme encompasses. You can also declare new pages in a theme, pages that in the future may represent about us or promotional landing pages (such as mother's day, black Friday, cyber Monday pages). The theme's end result consists of the content it's comprised of, in addition to the storefront.
Blocks are the minimal abstraction in Store Framework. They declare small pieces that make up a store's layout. Although they may look simple at first, blocks are imbued with a high customization power, allowing us to achieve complex designs. There are a total of four block customization levels:
Secure work environments that show a very close copy of what is running in production, allowing themes to be developed further without affecting the store.
It's important to establish that is not an expository course. Its objective is to teach participants about the VTEX IO Store Framework based on practical applications/activities. Therefore, in order to advance, you'll need to invest some time and dedication into it.
At the beginning of the course, you'll receive a repository containing a minimum amount of code our wish is that, upon completing all the tasks laid before you, you would have transformed that code into a fully functional store.
The course is divided into chapters. As each chapter begins, you'll receive initial instructions, just as you've already received for this and previous chapters. You should read through all of the presented content and perform the minor task set out at the end of the chapter.
For your answers to be sent, follow these steps:
git clone
https://github.com/Hggo/store-framework
Open
on the notification that appears in the lower right cornerstore-framework
;Hggo/store-framework
and then on Install.After reading the entire content and performing the wanted task, you should send your answer according to the steps below:
Source Control
, in the VSCode side menu;+
in the CHANGES section;✓
(Commit);+ Create new branch...
;Once you complete this flow, our bot will let you know whether your answers were correct or not. If yes, the reply will look like this:
Thereafter, you'll receive another reply highlighting the next steps:
If you're familiar with git, this entire flow is equivalent to creating a branch with a predefined name, committing changes and then executing a push.
Throughout the course, you may run into difficulty and not manage to correctly complete the activity on your first try. When this happens, you'll receive a feedback message that will let you know where you failed:
You can submit as many answers and you want by simply retrying the entire process explained in the previous section.
You may see your course progress at any time by going back to the main page. There, you'll see every step, what you've already completed, along with a button that takes you back to where you last stopped:
Anytime you open the VSCode terminal, you can run a vtex link
to monitor the evolution of your project in https://{workspace}--{account}.myvtex.com
. Make sure that the solution is visually comparable to what was presented and that no link errors occurred.
Do not create issues and PRs during the course flow, since this can interfere with its functioning.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.