Menu
Feedback
Comece aqui
Tutoriales
Portal del desarrollador

Problemas Conocidos
Directrices de Soporte
Troubleshooting

Preguntas Frecuentes
Anuncios
Tutoriales
Tutoriales
Explore tutoriales detallados para operar su tienda VTEX.
Tutoriales
Storefront
Layout
Cómo trabajar con diferentes layouts para una misma página
Cómo trabajar con diferentes layouts para una misma página

Atención: existen dos formas de configurar colecciones, mediante el CMS o utilizando el módulo Colecciones Beta. Este artículo se refiere a la configuración de colecciones mediante el CMS.

En la página Storefront > Layout, se establece un layout estándar para todas las páginas del mismo tipo incluidas en cada carpeta de un website, ejemplo: producto.

Pero, existe la posibilidad de aplicar diferentes layouts para una misma página a través de algunas condiciones (grupo de productos, categorías, marcas). Serían dos productos con layouts distintos o una categoría específica con layout especial, por ejemplo.

Para eso, basta insertar un nuevo template, ya sea de página o de estante. Después de crearlo, siga los pasos abajo para seleccionar la carpeta que desea agregar el nuevo layout:

  1. En Storefront, acceda Layout;
  2. Haga clic en la carpeta CMS;
  3. Haga clic en Sites and channels;
  4. Acceda el website deseado;
  5. Haga clic en la carpeta / y seleccione la página deseada para el nuevo layout;
  6. Haga clic en New Layout.

Después de llenar los campos Layout Name y Body Class, seleccione el template deseado en el campo de Template y desactive la opción Default Page.

Después de eso, una nueva sección estará disponible y podrá definir a través de los nuevos campos las condiciones bajo las cuales se mostrará el nuevo layout en su tienda.

Es posible limitar la disponibilidad del template a un período de tiempo predeterminado rellenando los campos From y To, así como definir en qué categorías, productos, marcas y colecciones se aplicará el template elegido.

{"base64":"  ","img":{"width":1926,"height":492,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25931,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/como-trabajar-con-diferentes-layouts-para-una-misma-pagina_1.png"}}

Después de llenar todos los campos, asegúrese de guardar los cambios realizados haciendo clic en Save Layout.

Tenga en cuenta que estos criterios se basan en el contexto de búsqueda de la página en el que se encuentra el usuario, que está directamente vinculado a los parámetros de búsqueda, pero que no son necesariamente establecidos manualmente por el administrador de la tienda; toda la página encaja automáticamente en un contexto de contenido.

Sucede que las condiciones ofrecidas no están presentes en ninguna página:

  • las páginas de productos nunca tendrán el contexto de colección;
  • Las páginas de búsqueda (en las que también caben el departamento, la categoría, la marca, las colecciones y las páginas de destino) nunca tendrán el contexto del producto.

Por lo tanto, no es posible asignar condiciones a un producto específico o a diferentes diseños a través de una colección. Deberá registrarlos junto con la condición del producto.

Según las condiciones elegidas, se establece un orden de prioridad para la aplicabilidad del layout. La ordenación es, si existe, template del producto, de la categoría y, finalmente, de la marca. Por lo tanto, un template acondicionado para un producto se superpone al template de la categoría en que está contenido este producto y así sucesivamente.

Si tiene dudas en esta configuración, le recomendamos que use la lid: Prueba de Layout

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
¿Te ha parecido útil?
No
Sugerir cambios (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
¿Todavía tienes dudas?
Pregunte a la comunidad
Encuentra solucciones y comparte ideas en la comunidad de VTEX.
Únete a nuestra comunidad
Solicite soporte a VTEX
Para asistencia personalizada, contacte a nuestros expertos.
Abra un ticket de soporte
GithubDeveloper portalCommunityFeedback