Mostra Navigazione a Strati su una Pagina CMS in Magento

Tabella dei Contenuti

  1. Introduzione
  2. Perché la Navigazione a Strati è Importante
  3. Creare un Modulo Personalizzato
  4. Creare il File Layout XML
  5. Assegnare l'Aggiornamento del Layout alla Tua Pagina CMS
  6. Assicurarsi che la Navigazione a Strati Funzioni Correttamente
  7. Abilitare e Distribuire il Tuo Modulo
  8. Conclusione
  9. Domande Frequenti

Introduzione

Stai avendo difficoltà ad aggiungere la navigazione a strati alla tua pagina CMS Magento? In tal caso, non sei solo. Molti utenti di Magento si trovano di fronte a sfide nell'incorporare questa funzionalità cruciale, che consente ai clienti di filtrare i prodotti in base a diversi attributi direttamente sulle pagine gestite dal contenuto. La navigazione a strati è uno strumento potente che migliora l'esperienza dell'utente facilitando ai clienti la ricerca dei prodotti di cui hanno bisogno. In questo post sul blog, ti guideremo passo dopo passo su come visualizzare la navigazione a strati sulla tua pagina CMS Magento utilizzando un modulo personalizzato. Alla fine di questo articolo, avrai una chiara comprensione di come integrare senza intoppi questa funzionalità nel tuo negozio Magento.

Perché la Navigazione a Strati è Importante

La navigazione a strati migliora significativamente l'esperienza di acquisto consentendo agli utenti di filtrare i prodotti in base ad attributi come prezzo, colore, taglia e marca. Questa funzionalità è particolarmente utile per i negozi con un vasto inventario, che permette ai clienti di restringere rapidamente le loro scelte. Implementare una navigazione a strati efficace può portare a tassi di conversione più alti, semplificando il processo di ricerca del prodotto e rendendo più probabile che i visitatori trovino e acquistino i prodotti desiderati.

Creare un Modulo Personalizzato

Per iniziare, dovrai creare un modulo personalizzato che gestirà la logica della navigazione a strati sulla tua pagina CMS. Segui questi passaggi per configurare il tuo modulo:

Struttura della Directory

Prima di tutto, crea la struttura della directory necessaria per il tuo modulo personalizzato. Questa struttura dovrebbe essere sotto la directory app/code e seguire le convenzioni di denominazione di Magento. La tua struttura della directory dovrebbe apparire così:

app/code/YourVendor/LayeredNavigation/

module.xml

All'interno della directory del tuo modulo, crea un file module.xml per registrare il tuo modulo. Inserisci il seguente contenuto in questo file:

<?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

Successivamente, crea un file registration.php per registrare il modulo con Magento:

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

Creare il File Layout XML

Magento utilizza file XML di layout per determinare come vengono visualizzate diverse parti del tuo negozio. Dovrai creare un file XML di layout per specificare come e dove dovrebbe apparire la navigazione a strati sulla tua pagina CMS.

cms_page_view.xml

Crea un file XML di layout chiamato cms_page_view.xml nella seguente directory:

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

Aggiungi il seguente contenuto 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>

Assegnare l'Aggiornamento del Layout alla Tua Pagina CMS

Con il tuo file XML di layout in posizione, il passo successivo è assegnare questo aggiornamento di layout alla tua pagina CMS specifica. Segui questi passaggi:

  1. Naviga su Contenuto > Pagine nel pannello di amministrazione di Magento.
  2. Seleziona la pagina CMS che desideri modificare.
  3. Vai alla scheda Design.
  4. Nel campo Layout Update XML, aggiungi il seguente codice:
<referenceContainer name="sidebar.main">
    <block class="YourVendor\LayeredNavigation\Block\CustomNavigation" name="custom.layered.navigation" template="YourVendor_LayeredNavigation::layer/view.phtml"/>
</referenceContainer>

Assicurarsi che la Navigazione a Strati Funzioni Correttamente

A volte, la navigazione a strati potrebbe non funzionare immediatamente a causa della dipendenza della pagina CMS dalle collezioni di prodotti e dai filtri, che sono tipicamente associati alle pagine di categoria o risultati di ricerca. Potresti dover estendere la classe del blocco per garantire che funzioni correttamente.

Creare un Blocco Personalizzato (se necessario)

Per gestire la logica di raccolta e filtraggio del prodotto, crea una classe di blocco personalizzata se necessario. L'implementazione specifica dipenderà dalle tue esigenze.

Sovrascrivere il Template

Potresti dover sovrascrivere il file view.phtml predefinito per personalizzarlo per la tua pagina CMS. Posiziona il template personalizzato nella seguente directory:

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

Abilitare e Distribuire il Tuo Modulo

Infine, abilita il tuo modulo personalizzato e distribuisci il contenuto statico per riflettere queste modifiche:

  1. Abilita il tuo modulo:

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

  2. Distribuisci il contenuto statico:

    php bin/magento setup:static-content:deploy

Conclusione

Aggiungere la navigazione a strati a una pagina CMS Magento può migliorare significativamente l'esperienza dell'utente consentendo ai clienti di filtrare i prodotti in base a vari attributi direttamente dalle pagine gestite dal contenuto. Seguendo i passaggi descritti in questa guida, puoi creare un modulo personalizzato per gestire la navigazione a strati sulla tua pagina CMS, migliorando l'esperienza di shopping per i tuoi clienti e aumentando potenzialmente i tassi di conversione.

Domande Frequenti

Come posso aggiungere la navigazione a strati a una pagina CMS in Magento?

Per aggiungere la navigazione a strati a una pagina CMS, crea un modulo personalizzato, definisci il layout XML e assegna l'aggiornamento del layout alla tua pagina CMS. Assicurati che la navigazione a strati funzioni correttamente estendendo eventualmente la classe del blocco e sovrapponendo il template predefinito, se necessario.

Perché la navigazione a strati non funziona sulla mia pagina CMS?

La navigazione a strati potrebbe non funzionare immediatamente sulle pagine CMS perché di solito si basa sulle collezioni di prodotti e sui filtri associati alle pagine di categoria o risultati di ricerca. Potresti dover estendere la classe del blocco e personalizzare il template per garantire che funzioni correttamente sulle pagine CMS.

Posso personalizzare l'aspetto della navigazione a strati sulla mia pagina CMS Magento?

Sì, puoi personalizzare l'aspetto sovrapponendo il file di template predefinito view.phtml e posizionando il template personalizzato nella directory appropriata all'interno del tuo modulo personalizzato.