List Theme

The basic theme to use the Gift List

Preview

Initial Page

User Page

Wallet User Page

List Page

Dependencies

To use this template it's necessary to use the

  "peerDependencies": {
    "vtex.list": "1.x"
  }

to be able to access these essential components to create the list store theme:

• Add To Cart Button
• Add To List Button
• Auth Condition
• Add New Item
• BreadCrumbs
• List Modal
• Gallery List Items
• Gifted Button
• Go Back To list
• List Info
• Product Modal
• Quantity Selector
• Search List
• Store Wallet List
• Share List
• User Lists
• Wrappers
• List Items Order By

Another store components are used like:

• Header
• Footer
• Slider Layout
• Shelf
• Login
• Minicart
• Breadcrumb
• Search Result
• Product Details

To use this components remember to add the dependencies in manifest (see more here)

Configuration

Step 1 - Installation or Cloning App List-Theme

Installation List Theme

 vtex install list-theme

Cloning

To start the installation, you need to clone the GitLab project into a directory of your choice:

 cd "directory of your choice"

SSH clone

 git clone [email protected]:acct.global/acct.firstpartyapps/list/list-theme.git

or

HTTPS clone

  git clone https://gitlab.com/acct.global/acct.firstpartyapps/list/list-theme.git

Once the clone is done, now let's login, create the workspace and get it running in the store.

Tip: whenever you login, always check the 'manifest.json' file to get the correct name of the store.

Step 2 - Editing the Manifest.json

Once in the repository directory, it is time to edit the Minimum Boilerplate manifest.json file.

Once in 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": "vtex",
  "name": "list-theme"
}

Step 3 - Uninstalling any existing theme

By running vtex list, you can verify if any theme is installed.

It is common to already have an another 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

Step 4 - Creating your workspace in the store

Login and access the store Access the project folder in terminal / cmd

vtex login accountName

Check VTEX account and workspace

To verify the VTEX account and workspace in use, just type

vtex whoami

Creating your workspace in the store

vtex use `vtex0000`.

Step 5 - Run and preview your store

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.

https://vtex000--vtex.myvtex.com

Step 6 - Installing required apps

We recomend use the [email protected], to you can use the Store Framework and work on your store theme.

To confere if you are using this app, run vtex edition get and check if this apps is already installed and is in the version bigger or equal a 5.

If there isn't, please open an call to support team and request to install this version.