O desafio era o de fazer um layout parecido com o da pagina UpMedal utilizando VTEX IO.
O projeto foi criado utilizando Minimum Boilerplate Theme
The minimum Boilerplate Theme is basic store front model based on the VTEX IO Store Framework.
It should be used only when you want to start a new store theme without any pre-set configurations, as is the case with Store Theme.
While Store Theme gives developers a ready-to-go default store front structure, the Minimum Boilerplate Theme will enable you to build you store freely from scratch.
Access the VTEX IO basic setup guide and follow all the given steps.
By the end of the setup, you should have the VTEX command line interface (Toolbelt) installed along with a developer workspace you can work in.
Clone this repository to your local files to be able to effectively start working on it.
Then, access the repository's directory using your terminal.
Once in the repository directory, it is time to edit the Minimum Boilerplate manifest.json
file.
Once you are in the file, you must replace the vendor
and account
values. vendor
is the account name you are working on and account
is anything you want to name your theme. For example:
{
"vendor": "storecomponents",
"name": "my-test-theme",
}
In order to use Store Framework and work on your store theme, it is needed to have both vtex.store-sitemap
and vtex.store
installed.
Run vtex list
and check whether those apps are already installed.
If they aren't, run the following command to install them: vtex install vtex.store-sitemap vtex.store -f
By running vtex list
, you can verify if any theme is installed.
It is common to already have a vtex.store-theme
installed when you start the store's front development process.
Therefore, if you find it in the app's list, copy its name and use it together with the command vtex uninstall
. For example:
vtex uninstall vtex.store-theme
Then time has come to upload all the changes you made in your local files to the platform. For that, use the vtex link
command.
If the process runs without any errors, the following message will be displayed: App linked successfully
. Then, run the vtex browse
command to open a browser window having your linked store in it.
This will enable you to see the applied changes in real time, through the account and workspace in which you are working.