VTEX IO Snippets are concise, reusable code fragments tailored for VTEX IO. These code blocks serve as building blocks for customizing and extending your VTEX e-commerce store with ease. Whether it's adding new features, tweaking design, or optimizing performance, VTEX IO Snippets provide the flexibility to streamline development tasks, helping you create unique shopping experiences for your customers.
Create pre-made components
Commands
Blocks Snippets
"flr" => "flex-layout.row"
"flc" => "flex-layout.col"
"rt" => "rich-text"
"sl" => "slider-layout"
"i" => "Icon"
"atc" => "add-to-cart-button"
"mi" => "menu-item"
"m" => "menu"
"ic" => "simple info card"
"img" => "image"
Components
Blocks Snippets
"carrousel" => "Context Image List And Slider"
"srpdp" => "Shelf Related PDP"
"ssm" => "Share Social Media"
"bcc" => "BreadCrumb Custom"
"bcs" => "Create Breadcrumb Search"
"bcp" => "Create Breadcrumb PDP"
"tl" => "Toggle Layout"
"pss" => "Product Summary Shelf"
"ss" => "Store Search"
"btt" => "Button Back To Top"
"vitrine" => "Context Product List And Slide"
"tag" => "Product Highlights"
"foo" => "Create Template Footer"
"misa" => "Menu Item With SubMenu Accordion"
"quickview" => "Create QuickView "
"promises" => "Create Promises Brand "
"rc" => "Route Custom"
Configuración de snippets en la terminal
Después de instalar la extensión, configura los aliases de terminal ejecutando el siguiente comando desde la paleta de comandos de VSCode:
Abre la paleta de comandos (Ctrl + Shift + P o Cmd + Shift + P).
Busca y selecciona Setup VTEX Snippets Aliases.
(Solo para Windows). Se debe ejecutar el siguiente comando en PowerShell: Add-Content -Path $PROFILE -Value '$env:PATH += ";C:\ruta\a\vtex"'
¡Listo! Los aliases estarán disponibles en tu terminal.
Alias de VTEX
Alias
Comando
Descripción
vls
vtex list
Muestra el listado de dependencias del proyecto actual con VTEX.
vl
vtex link
Linkea el proyecto actual con VTEX.
vli
vtex login
Inicia sesión en VTEX.
vlo
vtex logout
Cierra sesión en VTEX.
vw
vtex whoami
Muestra la información del usuario actual.
vu
vtex use
Cambia a un workspace específico.
vst
vtex setup
Configura el entorno de VTEX.
vup
vtex update
Actualiza las dependencias de VTEX o componentes personalizados que se hayan hecho deploy.