dhirama / store-block Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://lab.github.com/vtex-trainings/vtex-store-block-course
Home Page: https://lab.github.com/vtex-trainings/vtex-store-block-course
Now we have an h1
element rendered, it's possible to used it to display information that depend on the component's properties (props). For that, some concepts will be shown, given that they are essential for the app development.
Hook
Hooks are APIs that allow using React features inside functional components. Without the hooks, a functional React component is only able to render UI elements. They, hereby, allow, among other things, state storage between different renders and execute side effets to the component's life cycle. Note: They do not work inside classes.
e.g:
const [count, setCount] = useState(0)
props interface
Defines the props Typescript typing that the component will receive, allowing IDE's intellisense about the created component.
interface CountdownProps {
exampleProp: string
}
Block's schema
In VTEX IO, we offer a content management tool called Site Editor. With it, through VTEX Admin, it's possible to change images, texts and behaviours of blocks without having to change the Store's code.
In order for your block to accept user customizations, you need to export a schema
in the React component responsible for the block using JSON schema. This will, automatically, generate a form in Site Editor linked to the block that you're developing. Here's a schema example:
// react/Countdown.tsx
Countdown.schema = {
title: 'editor.countdown.title',
description: 'editor.countdown.description',
type: 'object',
properties: {},
}
The schema is also responsible for defining the labels that will be displayed to the user when editing the block content on the form.
In the interface defined in Countdown.tsx
, add a prop called targetDate
, its type is string. We are, hence, defining a component prop that will be used to initialize the countdown.
The prop definition itself is made through its declaration in the CountdownProps
interface in the Countdown.tsx
file, shown previously. Thus, add a line that define the targetDate
prop of type string:
// react/Countdown.tsx
interface CountdownProps {
+ targetDate: string
}
Now, we need to use it on the component, substituting the text used used previously, Countdown Test
, for another, using Site Editor.
Keep in mind that targetDate will be used to define the countdown ending date. However, for now, it will work as a dummy field.
First, change the component in order for it to use the targetDate
prop. To do that, you need to use its variable inside the h1
of the React component.
// react/Countdown.tsx
const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate }) => {
return (
<div>
<h1>{ targetDate }</h1>
</div>
)
}
Furthermore, to be able to edit this property through Site Editor, it's necessary to add that same prop to the schema. This is done by adding the targetDate
key to the properties
object of the schema:
// react/Countdown.tsx
Countdown.schema = {
title: 'editor.countdown.title',
description: 'editor.countdown.description',
type: 'object',
properties: {
+ targetDate: {
+ title: 'Final date',
+ description: 'Final date used in the countdown',
+ type: 'string',
+ default: null,
+ },
},
}
All set! Now you can change the text content through Site Editor. Go ahead to the Site Editor and click on Countdown
on the side menu, this will open an edit menu, like the shown bellow:
Now, in the field below the title, type the date in the format AAAA-MM-DD
and see the change, that will then show the text you've typed!
Before we start, it's necessary to remind some important concepts of the logical for a better understanding of the logical workflow when developing an app.
It defines the name of the VTEX account that is developing the app. This account is responsible for its maintenance and distribution (the app can be installed in other accounts or only in its own)
The
vtex
vendor is used for native apps
It identifies the name of the application. It should not contain any special characters (except from -
) or uppercase characters.
It identifies the current app version. We use the Semantic Versioning 2.0.0 specification for versioning. The format is well defined, divided in patch, minor and major releases.
You can find bellow a summary of the specification:
For example: If an API is at version 2.3.2
and it adds a new non breaking change feature, it can then be updated to version 2.4.0
.
At the moment the deployment is made, there is a worker called housekeeper which is responsible for updating automatically the new version for every account. It will, therefore, update all new minor and patch releases because of its backwards compatibility. It will not, however, automatically update major versions since it might come with dependency changes.
An app might depend on other applications. This field lists all of the necessary dependencies for the correct app functioning.
In the example of the manifest.json
structure below, it's possible to see characteristics pointed out above. In particular, the app version is 0.0.1
and these numbers correspond respectively to its major, minor and patch.
{
"vendor": "vtex",
"name": "countdown",
"version": "0.0.1",
"title": "Countdown",
"description": "Countdown component",
"defaultLocale": "pt-BR",
"builders": {
"messages": "1.x",
"store": "0.x",
"react": "3.x"
},
"mustUpdateAt": "2019-04-02",
"scripts": {
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"vtex.styleguide": "9.x",
"vtex.css-handles": "0.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-a pi/master/gen/manifest.schema"
}
To develop a store front block, like the ones provided natively in Store Framework, we use the UI development library React.js.
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!
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.
In the local template cloned, open up the Countdown.tsx
file:
//react/Countdown.tsx
import React from 'react'
interface CountdownProps {}
const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
return <div></div>
}
Countdown.schema = {
title: 'editor.countdown.title',
description: 'editor.countdown.description',
type: 'object',
properties: {},
}
export default Countdown
To see you component in the home page, link the theme in one terminal and the app in another. Add a h1
tag inside the component and declare the block on the theme.
const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
- return <div></div>
+ return (
+ <div>
+ <h1>Countdown Test</h1>
+ </div>
+ )
}
In order for a component to be seen in a functional store, you need to declare the block, the app defines, in the theme. For that, hereby, we need to first have a theme to add the app to. In this course, we'll use
vtex.store-theme
. To clone the repository just run a:
git clone https://github.com/vtex-apps/store-theme.git
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
In order for the app to be used on the theme, we have to add it to the theme's dependencies, that, as stated before, is in the manifest.json
. Therefore, head to the theme's manifest in 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 bellow:
{
...
"dependencies": {
...
+ "vtex.countdown": "0.x",
...
},
...
}
Lastly, we need to add the block to the store. Inside the file store-theme/store/blocks/home/home.jsonc
, declare countdown
block:
{
"store.home": {
"blocks": [
"countdown",
...
]
...
}
...
}
The expected result is to find a h1 in the top of the store, you can see it below:
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.