Hur man lägger till <code>sidebar.additional</code> i söksidan i Magento 2

Innehållsförteckning

  1. Introduktion
  2. Förstå Magento 2-mallar och XML
  3. Steg-för-steg-guide för att lägga till sidebar.additional
  4. Felsöka vanliga problem
  5. Slutsats
  6. FAQ

Introduktion

Magento 2, en ledande e-handelsplattform, erbjuder en mycket anpassningsbar ram för att utveckla unika webbutiker. Dock stöter även erfarna utvecklare ibland på problem när de försöker implementera specifika funktioner. En vanligt ställd fråga är: Hur kan du lägga till sektionen sidebar.additional till sökresultatsidan i Magento 2? Detta kan vara utmanande, särskilt för dem som är nya på Magento. I denna bloggpost kommer vi att ta dig genom stegen som krävs för att uppnå detta, utforska de inblandade konfigurationsfilerna och ge praktiska exempel och tips för att säkerställa att du smidigt kan integrera denna funktion i ditt projekt.

Denna guide kommer att vara värdefull för Magento-butiksägare, utvecklare och alla som är intresserade av att förbättra layouten och funktionaliteten på sin Magento-baserade e-handelssida.

Förstå Magento 2-mallar och XML

Mallfiler i Magento 2

Magento 2 använder XML-mallfiler för att definiera strukturen och innehållet i olika sidor. Dessa filer styr arrangemanget av block inom en sida, vilket gör det viktigt att förstå deras roll när du försöker modifiera en layout. Den primära mallfil du kommer att arbeta med är catalogsearch_result_index.xml.

Blockstruktur

I Magento 2 består en sidlayout av flera block, var och en med ett specifikt syfte. Blocket sidebar.additional är en bifogad sidofält som vanligtvis används för ytterligare erbjudanden eller korsförsäljningsinnehåll. Att integrera detta block i sökresultatsidan innebär att du konfigurerar det på rätt sätt i den respektive XML-mallfilen.

Steg-för-steg-guide för att lägga till sidebar.additional

Steg 1: Hitta XML-mallfilen

Första steget är att identifiera och hitta rätt XML-fil där du kommer att göra dina ändringar. För sökresultatsidan i Magento 2 finns denna fil normalt sett här:

app/design/frontend/{Vendor}/{Theme}/Magento_CatalogSearch/layout/catalogsearch_result_index.xml

Om filen inte finns, måste du skapa den.

Steg 2: Modifiera XML-filen

För att uppnå en trecolumnslayout som inkluderar sidebar.additional, följ följande steg:

  1. Säkerställ standardsidelayoutstruktur: Se till att din sökresultatsida är inställd på att använda en trecolumnslayout. Följande XML-snutt ställer in sidlayouten:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <!-- Här skriver du innehållet -->
        </referenceContainer>
        <referenceContainer name="sidebar.main">
            <!-- Här skriver du innehåll för sidofältet -->
        </referenceContainer>
        <referenceContainer name="sidebar.additional">
            <!-- Här skriver du ytterligare sidofältets innehåll -->
        </referenceContainer>
    </body>
</page>

  2. Lägg till sidebar.additional-block: Lägg till de nödvändiga blockdefinitionerna inom sidebar.additional-referensbehållaren:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Framework\View\Element\Template" name="custom.additional.sidebar" template="Magento_Theme::html/your_custom_block.phtml"/>
        </referenceContainer>
    </body>
</page>

  3. Anpassad blockmall: Se till att mallfilen your_custom_block.phtml finns i app/design/frontend/{Vendor}/{Theme}/Magento_Theme/templates/html/.

Steg 3: Definiera anpassat blockinnehåll

I your_custom_block.phtml kan du placera HTML- och PHP-kod för att ange vilket innehåll som visas i sektionen sidebar.additional. Exempel:

<div class="custom-sidebar-content">
    <h3>Ytterligare sidofältsinnehåll</h3>
    <p>Detta är ditt egna innehåll i det extra sidofältet.</p>
</div>

Steg 4: Rensa cache och verifiera

Efter att ha gjort dessa ändringar, rensa Magento-cachen:

php bin/magento cache:clean
php bin/magento cache:flush

Gå sedan till din sökresultatsida för att verifiera att trecolumnslayouten fungerar och att sidebar.additional-blocket visas korrekt.

Felsöka vanliga problem

Uteblivna layoutändringar

Om dina ändringar inte reflekteras:

  1. Dubbelkolla filvägar: Se till att dina filvägar är korrekta och att XML-strukturen är giltig.
  2. XML-validering: Använd en online XML-validerare för att kontrollera eventuella syntaxfel.
  3. Rensa cacheminnet: Se till att du har rensat cachen på rätt sätt.

CSS och formatering

Om layouten inte ser ut som förväntat kan CSS skriva över standardformateringen. Inspektera elementen med webbläsarens utvecklarverktyg och justera ditt temat CSS efter behov.

Slutsats

Genom att följa denna guide bör du nu kunna lägga till sektionen sidebar.additional i sökresultatsidan i Magento 2. Genom att förstå och manipulera Magento's layout XML-filer får du större kontroll över din butiks design och funktionalitet, vilket ger en mer anpassad e-handelsupplevelse.

FAQ

Kan jag lägga till andra sektioner på liknande sätt?

Ja, ytterligare sektioner kan läggas till genom att definiera dem i den lämpliga XML-mallfilen och skapa motsvarande mallar.

Vad gör jag om jag har flera teman?

Se till att göra ändringar i den aktiva temamappen. Du kan växla teman vid behov för att säkerställa att du ändrar rätt filer.

Kan detta användas på andra sidor?

Absolut. Tillvägagångssättet att använda layout XML-filer kan tillämpas för att ändra andra sidor. Du måste hitta den specifika XML-mallfilen för den sida du vill ändra.

Finns det inbyggda block som jag kan använda?

Magento tillhandahåller flera inbyggda block som du kan använda. Kolla Magento's utvecklar-dokumentation eller utforska befintliga layout XML-filer för att se exempel.

Genom att erbjuda detaljerade instruktioner och praktiska exempel syftar denna guide till att förenkla processen för att anpassa Magento's sökresultatsida och bidra till en mer robust och användarvänlig webbutik.