Skip to content

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

Notifications You must be signed in to change notification settings

jnisperuza/vtex-dynamic-tab-layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

site-editor-1

Edit section:

site-editor-2

Tab 1:

site-editor-3

Tab 2:

site-editor-4

You can edit or delete any Item

site-editor-5

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

site-editor-6

Example Result

Tab 1

Tab 2

ezgif com-gif-maker

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 ✨

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published