To develop a store front block, like the ones provided natively in Store Framework, we use the UI development library React.js.
A little about the tool
React's basic development unit is a component, in which should be implemented all-in-one the logical operation, visual interface and data retrieval of an UI element. Following the most recent recommendation, we will focus our usage in the Hook API, not using class definition for component building.
In VTEX IO, we adopt Typescript as default language for frontend programming. Despite the complexity of learning new syntaxes, the effort is quickly rewarded! Using Typescript, the bug anticipation is enhanced, because of its static typing. Besides that, with the right IDEs, it's possible to increase the development speed with a smarter code completion of the code objects.
In this course, we'll use Typescript exclusively. If you're not familiar with the language, it will be a great chance to give it a try!
Step objective
Since you're already familiar to Store Framework, you know that we use blocks, like shelf and sku-selector, to create a VTEX IO store. In this step you're going to create a block that is going to be used in your store's home page theme.
Setting up our test bot
It's important for you to have out test bot installed in this course repository so as for us to see your progress, even though it does not contains any tests or evaluation on each step. So as to install it, follow the steps below:
IMPORTANT: In order to the component that you've just linked to be seen in a functional store, you need to declare the block that the app defines in a theme. For that, hereby, we need to first have a theme to add the app to. In this course, we'll use the Store Theme. To clone the repository just run a:
To avoid conflicts, go to your terminal and unlink any theme or apps you have linked. To do that, head just run the following command:
vtex unlink --all
With the repository cloned, go to its folder (cd store-theme) and link the theme on your workspace:
vtex link
IMPORTANT: At this point, you need to have two terminals opened and running vtex link. The first one contains the link of the custom block that you're creating and the second one refers to the store-theme, the theme you're using to insert your custom block on.
Now, with both links active (theme and custom block), in order to use the app on the theme, we have to add it to the theme's dependencies, which, is in the manifest.json. Therefore, head to the theme's manifest in the store-theme folder and add vtex.countdown as a dependency. Its version is defined in its manifest (0.0.1). The manifest will then have one extra line like it is defined below:
Linking an app and using it on a store's theme
Introduction
To develop a store front block, like the ones provided natively in Store Framework, we use the UI development library React.js.
A little about the tool
React's basic development unit is a component, in which should be implemented all-in-one the logical operation, visual interface and data retrieval of an UI element. Following the most recent recommendation, we will focus our usage in the Hook API, not using class definition for component building.
In VTEX IO, we adopt Typescript as default language for frontend programming. Despite the complexity of learning new syntaxes, the effort is quickly rewarded! Using Typescript, the bug anticipation is enhanced, because of its static typing. Besides that, with the right IDEs, it's possible to increase the development speed with a smarter code completion of the code objects.
In this course, we'll use Typescript exclusively. If you're not familiar with the language, it will be a great chance to give it a try!
Step objective
Since you're already familiar to Store Framework, you know that we use blocks, like
shelf
andsku-selector
, to create a VTEX IO store. In this step you're going to create a block that is going to be used in your store's home page theme.Setting up our test bot
It's important for you to have out test bot installed in this course repository so as for us to see your progress, even though it does not contains any tests or evaluation on each step. So as to install it, follow the steps below:
store-block
;Click on
Josel95/store-block
and then on Install.Activity
In the local template cloned, open up the
Countdown.tsx
file:Add an
h1
tag inside the component and link it in your terminal, using the commandvtex link
.To avoid conflicts, go to your terminal and unlink any theme or apps you have linked. To do that, head just run the following command:
With the repository cloned, go to its folder (
cd store-theme
) and link the theme on your workspace:Now, with both links active (theme and custom block), in order to use the app on the theme, we have to add it to the theme's dependencies, which, is in the
manifest.json
. Therefore, head to the theme's manifest in thestore-theme
folder and addvtex.countdown
as a dependency. Its version is defined in its manifest (0.0.1
). The manifest will then have one extra line like it is defined below:Lastly, we need to add the block to the store. Inside the file
store-theme/store/blocks/home/home.jsonc
, declarecountdown
block:The expected result is to find a h1 in the top of the store, you can see it below: