Course functioning

Objective

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.

Intro

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:

1. Open a new window in VSCode
2. Execute CTRL + Shift + P or Cmd + Shift + P
3. Run git clone

4. Type in the repository's name, such as https://github.com/ryan-ally/store-framework
5. Confirm and select where you want to clone the repository
6. Click on Open on the notification that appears in the lower right corner

7. Open our test bot installation page and click on Configure;
   • ⚠️ Note that this bot differs from the GitHub Learning Lab bot. It's responsible for analyzing the answers coming from each course stage.
8. Select the Only selected repositories option, then click on Select repositories and type in store-framework;
9. Click on ryan-ally/store-framework and then on Install.

Submitting your answers

After reading the entire content and performing the wanted task, you should send your answer according to the steps below:

1. Click on Source Control, in the VSCode side menu;

2. Click on the + in the CHANGES section;

3. Compose a message that describes your change. For example:

4. Click on ✓ (Commit);

5. Click on the lower left corner;

6. When a new window appears, fill it in with the Branch name that was given at the beginning of the text and click on + Create new branch...;

7. Lastly, click on the cloud icon in the lower left corner:

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.

Retries

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.
⚠️ In item 6 above, you won't need to retry everything, once the step's branch has been created. In item 7, instead of a cloud icon, you'll see several arrows, just click on them to resend:

Course progress

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:

Don't forget to link

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.

⚠️ Warning ⚠️

Do not create issues and PRs during the course flow, since this can interfere with its functioning.

To continue, click on Close issue

Store Framework 101

Before getting down to business there are some important, frequently occurring concepts you need to familiarize yourself with.

Introduction

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.

Theme

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

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:

• semantic style (styles);
• properties (props);
• css classes (handles);
• children (children)

Workspaces

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.

Click on Close issue to continue

Hello, World!

✨ Branch: helloworld

Introduction

We begin our journey with the classic "Hello, World!". In order to create something similar, we need to understand the Store Framework blocks and use one that allows us to create texts. This block is aptly called Rich Text.

Rich Text

The Rich Text is only one of the dozens of blocks available in Store Framework. It's a block that seems simple, but that allows a series of customizations meant to create texts. To start, any text written in Rich Text supports Markdown, making text styling much easier.

Looking at the block's documentation, we can find a technical specification. One of the sessions present is that of the Blocks API, in which we can see the list of all Rich Text properties (props). These properties are the main customization points of a block, which give a block its distinct visual and behavior, depending on how its been configured.

Starting out

We'll start by customizing the home page. In your theme's /store/blocks folder, you'll find a file called home.jsonc. This file determines how the blocks you intend to use are organized. The language used in the layout composition is simple and based on JSON.

In home.jsonc, you'll notice a block which is default in all themes, namely store.home. This block determines which child blocks will be displayed on the home page.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Let's use Rich Text in its body:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

Thus, store.home now knows that it needs to render a Rich Text. However, we're haven't yet specified which visual this Rich Text should adopt. For that, we'll need to define the block.

Defining blocks

Defining a block must always be performed apart from any other block, at thee source level of the JSON file.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Here the block is used within another
    ]
  },
  "rich-text": { <----- Here it's at source level
  }
}

In the block's definition, you can set its behavior and visual. Customization points have to be used to achieve this, so we'll start off using the Rich Text props:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {

    }
  }
}

Read through the Rich Text documentation one more time and let's define the props we'll use to customize the block.

We want to achieve a simple "Hello, World!", and looking at the props we notice one called: text (Text written in markdown language to be displayed). This is the prop that determines which text will be displayed.

Including this prop, we now have the following:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Reading through the Markdown documentation, we learn that in order for a text to appear in italic, we just need to place that text between *:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

To center align the text, we can add the textPosition prop and give it the CENTER value:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Activity

Define a Rich Text on your home page and create a bold "Hello, World!" that's right aligned.

ℹ️ Remember to access the Rich Text documentation if you have any questions during the activity.

🚫 Are you lost?

Is there any problem with this step? What about sending us a feedback? 🙏

Submit feedback

If you're still unsure as to how to send your answers, click here.

Basic configurations

For your Mac setup video, click here

Introduction

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:

• Installing Git;
• Installing Toolbelt;
• Logging into a VTEX account;
• Creating a development workspace;
• Linking your local files to the platform.

Have a look at the step-by-step below for each of these configurations:

Installing Git

Install Git on your computer by clicking on the link below and selecting your operating system (Windows, MAC or Linux):

https://git-scm.com/downloads

Installing Toolbelt

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.

1. Install Node.js. If you are using a MAC, also install Yarn;
2. Run 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.

Logging in

1. 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.

2. 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.

Creating a development workspace

1. Run vtex use workspace-name, replacing workspace-name with the desired name. For example, vtex use devworkspace.

Accessing your workspace

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!

Click on Close Issue to continue