https://github.com/jnisperuza/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.
https://github.com/jnisperuza/vtex-dynamic-tab-layout
vtex-app-custom vtex-apps vtex-dynamic-tab-layout vtex-react-app vtex-tab-layout vtex-tabs
Last synced: 4 months ago
JSON representation
The vtex-dynamic-tab-layout app provides you the needed structure to create shelf layouts based in collections from the use of tabs.
- Host: GitHub
- URL: https://github.com/jnisperuza/vtex-dynamic-tab-layout
- Owner: jnisperuza
- Created: 2022-12-28T18:06:27.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:21:30.000Z (over 2 years ago)
- Last Synced: 2025-01-13T18:24:54.186Z (5 months ago)
- Topics: vtex-app-custom, vtex-apps, vtex-dynamic-tab-layout, vtex-react-app, vtex-tab-layout, vtex-tabs
- Language: TypeScript
- Homepage:
- Size: 543 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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;
```bash
...
"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.
```bash
...
"store.home": {
"blocks": [
...
"DynamicTab#shelf-1",
...
]
},
...
```
```bash
...
"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
Following I share the Vtex official documentation in order to understand the three important pieces in order to publishing our app.
1. [Publishing](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-publishing-an-app)
2. [Deploying](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-deploying-the-app-stable-version)
3. [Promoting](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-promoting-a-workspace-to-master)
### 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](https://github.com/jnisperuza) - [jnisperuza.github.io](https://jnisperuza.github.io/)