Mostrar navegación por capas en una página CMS en Magento

Tabla de contenidos

  1. Introducción
  2. Por qué importa la navegación por capas
  3. Crear un módulo personalizado
  4. Crear el archivo XML de diseño
  5. Asignar la actualización de diseño a tu página CMS
  6. Asegurarse de que la navegación por capas funcione correctamente
  7. Habilitar e implementar tu módulo
  8. Conclusión
  9. Preguntas frecuentes
Shopify - App image

Introducción

¿Estás teniendo dificultades para añadir navegación por capas a tu página CMS de Magento? Si es así, no estás solo. Muchos usuarios de Magento se enfrentan a desafíos para incorporar esta característica crucial, que permite a los clientes filtrar productos según diferentes atributos directamente en páginas gestionadas de contenidos. La navegación por capas es una herramienta poderosa que mejora la experiencia del usuario al facilitar que los clientes encuentren los productos que necesitan. En esta publicación del blog, te guiaremos a través de una guía paso a paso sobre cómo mostrar la navegación por capas en tu página CMS de Magento mediante un módulo personalizado. Al final de este artículo, tendrás una comprensión clara de cómo integrar sin problemas esta característica en tu tienda Magento.

Por qué importa la navegación por capas

La navegación por capas mejora significativamente la experiencia de compra al permitir a los usuarios filtrar productos según atributos como precio, color, tamaño y marca. Esta función es especialmente útil para tiendas con un vasto inventario, ya que permite a los clientes reducir rápidamente sus opciones. Implementar una navegación por capas efectiva puede llevar a tasas de conversión más altas, ya que simplifica el proceso de búsqueda de productos, lo que hace más probable que los visitantes encuentren y compren los productos que desean.

Crear un módulo personalizado

Para empezar, necesitarás crear un módulo personalizado que gestionará la lógica de navegación por capas en tu página CMS. Sigue estos pasos para configurar tu módulo:

Estructura de directorios

Primero, crea la estructura de directorios necesaria para tu módulo personalizado. Esta estructura debe estar bajo el directorio app/code y seguir las convenciones de nomenclatura de Magento. Tu estructura de directorios debería verse así:

app/code/YourVendor/LayeredNavigation/

module.xml

Dentro de tu directorio de módulo, crea un archivo module.xml para registrar tu módulo. Coloca el siguiente contenido en este archivo:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourVendor_LayeredNavigation" setup_version="1.0.0">
    </module>
</config>

registration.php

A continuación, crea un archivo registration.php para registrar el módulo con Magento:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'YourVendor_LayeredNavigation',
    __DIR__
);

Crear el archivo XML de diseño

Magento utiliza archivos XML de diseño para determinar cómo se muestran las diferentes partes de tu tienda. Deberás crear un archivo XML de diseño para especificar cómo y dónde debe aparecer la navegación por capas en tu página CMS.

cms_page_view.xml

Crea un archivo XML de diseño llamado cms_page_view.xml en el siguiente directorio:

app/code/YourVendor/LayeredNavigation/view/frontend/layout/

Agrega el siguiente contenido a cms_page_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\LayeredNavigation\Block\Navigation\State" name="layered.navigation.state" before="product_list" template="Magento_LayeredNavigation::layer/state.phtml"/>
            <block class="Magento\LayeredNavigation\Block\Navigation" name="catalog.leftnav" before="-" template="Magento_LayeredNavigation::layer/view.phtml"/>
        </referenceContainer>
    </body>
</page>

Asignar la actualización de diseño a tu página CMS

Con tu archivo XML de diseño en su lugar, el siguiente paso es asignar esta actualización de diseño a tu página CMS específica. Sigue estos pasos:

  1. Ir a Contenido > Páginas en el panel de administración de Magento.
  2. Seleccionar la página CMS que deseas editar.
  3. Ir a la pestaña Diseño.
  4. En el campo Actualización de diseño XML, agregar el siguiente código:
<referenceContainer name="sidebar.main">
    <block class="YourVendor\LayeredNavigation\Block\CustomNavigation" name="custom.layered.navigation" template="YourVendor_LayeredNavigation::layer/view.phtml"/>
</referenceContainer>

Asegurarse de que la navegación por capas funcione correctamente

A veces, la navegación por capas podría no funcionar de forma automática debido a la dependencia de la página CMS en colecciones de productos y filtros, que suelen estar asociados a páginas de categorías o resultados de búsqueda. Es posible que necesites extender la clase de bloque para asegurar su correcto funcionamiento.

Crear un bloque personalizado (si es necesario)

Para manejar la lógica de colección de productos y filtrado, crea una clase de bloque personalizada si es necesario. La implementación específica dependerá de tus requerimientos.

Sobrescribir la plantilla

Puede que necesites sobrescribir el archivo view.phtml por defecto para personalizarlo para tu página CMS. Coloca la plantilla personalizada en el siguiente directorio:

app/code/YourVendor/LayeredNavigation/view/frontend/templates/layer/

Habilitar e implementar tu módulo

Finalmente, habilita tu módulo personalizado e implementa contenido estático para reflejar estos cambios:

  1. Habilitar tu módulo:

    php bin/magento module:enable YourVendor_LayeredNavigation
php bin/magento setup:upgrade

  2. Implementar contenido estático:

    php bin/magento setup:static-content:deploy

Conclusión

Agregar navegación por capas a una página CMS de Magento puede mejorar significativamente la experiencia del usuario al permitir que los clientes filtren productos según varios atributos directamente desde páginas gestionadas de contenidos. Siguiendo los pasos descritos en esta guía, puedes crear un módulo personalizado para gestionar la navegación por capas en tu página CMS, mejorando la experiencia de compra para tus clientes y potencialmente aumentando tus tasas de conversión.

Preguntas frecuentes

¿Cómo puedo añadir navegación por capas a una página CMS en Magento?

Para añadir navegación por capas a una página CMS, crea un módulo personalizado, define el XML de diseño y asigna la actualización de diseño a tu página CMS. Asegúrate de que la navegación por capas funcione correctamente, posiblemente extendiendo la clase de bloque y sobrescribiendo la plantilla por defecto según sea necesario.

¿Por qué la navegación por capas no está funcionando en mi página CMS?

La navegación por capas podría no funcionar en páginas CMS de forma automática porque típicamente depende de colecciones de productos y filtros asociados a páginas de categorías o resultados de búsqueda. Es posible que necesites extender la clase de bloque y personalizar la plantilla para asegurarte de que funcione correctamente en páginas CMS.

¿Puedo personalizar la apariencia de la navegación por capas en mi página CMS de Magento?

Sí, puedes personalizar la apariencia al sobrescribir el archivo de plantilla view.phtml por defecto y colocar tu plantilla personalizada en el directorio apropiado dentro de tu módulo personalizado.