VTEX-DYNAMIC-TAB-LAYOUT

The vtex-dynamic-tab-layout app provides you the needed structure to create shelf layouts based in collections from the use of tabs.

Configuration

1. Adding the app as a theme dependency in the manifest.json file;

   ...
   "dependencies": {
       ...
       "CHANGE_ME.dynamictabapp": "0.x",
       ...
   },
   ...

   you should replace CHANGE_ME with the Vtex account.

2. Declaring the app's main block in a given theme template or inside another block from the theme.

   ...
   "store.home": {
       "blocks": [
           ...
           "DynamicTab#shelf-1",
           ...
       ]
   },
   ...

   ...
   "DynamicTab#shelf-1": {
       "blocks": [
       "product-summary.shelf"
       ]
   },
   ...

Important: The context in this block returns product listing information to use with a shelf block.

Publishing an app

[email protected]

Following I share the Vtex official documentation in order to understand the three important pieces in order to publishing our app.

1. Publishing
2. Deploying
3. Promoting

Vtex site editor

Block list:

Edit section:

Tab 1:

Tab 2:

You can edit or delete any Item

You can also disable this section without having to delete this section

Example Result

Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

CSS Handles
DynamicTab
DynamicTab--NavigationLeft
DynamicTab--NavigationRight
container
contentContainer
contentItem
listContainer
listItem
listItemActive

Author ✨

• Jeison Nisperuza - jnisperuza - jnisperuza.github.io