Como agregar un block cms por xml en el frontend Magento 2

como-agregar-un-block-cms-por-xml-en-el-frontend-magento-2 Escrito por @gnuxdar   Publicado 08/04/2023

Para agregar block cms en un layout y que este se muestre en el frontend de Magento 2 es una forma de personalizar la apariencia y el comportamiento de tu tienda en línea. Hay varios pasos involucrados en la manera de agregar un block cms, en este ejemplo vamos a agregar una huincha en el header que se muestre siempre y que pueda ser editada desde el admin:

[package] = Actecnology

[theme] = gnuxdar

1. Crea una carpeta para tu tema en app/design/frontend/Actecnology/gnuxdar.
2. Crea un archivo registration.php en tu nueva carpeta de tema con el siguiente código:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/[package]/[theme]',
    __DIR__
);

3. Crea un archivo theme.xml en tu nueva carpeta de tema con el siguiente codigo:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>[Theme Title]</title>
<parent>[Parent Theme]</parent>
</theme>

(theme.xml y registration.php si seguimos el post de https://arturocabrera.com/blog/disenando-un-tema-para-magento-2 ya lo debemos tener)
4. Crea una carpeta Magento_Theme en tu nueva carpeta de tema.
5. Crea una carpeta layout en la carpeta Magento_Theme.
6. Crea un archivo default.xml en la carpeta layout con el siguiente código:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.panel.wrapper">
            <container name="header.panel.bottom" after="header.panel" htmlClass="header-panel-bottom" htmlTag="div">
                <block name="header.panel.huincha" class="Magento\Cms\Block\Block">
                    <arguments>
                        <argument name="block_id" xsi:type="string">panel-header-huincha</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

7. en el admin Content > Blocks creas uno nuevo con el identificador “panel-header-huincha” con un texto y si gustas un background
8. Limpia la caché de Magento y recarga la página para ver los cambios.

Deberia ver algo asi

¡Espero que esto te ayude! Cualquier duda, no dudes en escribir en los comentarios.

Link al repositorio [github]

Happy Coding!

 



Atras

Últimas Publicaciones

Le puede interesar los ultimos articulos públicados

Como agregar JavaScript Custom en Magento 2 como-agregar-javascript-custom-en-magento-2

En este Post aprenderemos a personalizar la tienda Magento 2. Descubre cómo incorporar JavaScript personalizado para mejorar la funcionalidad y ...

Leer más...
Current version of RDBMS is not supported current-version-of-rdbms-is-not-supported

Current version of RDBMS is not supported. Used Version: 10.6.17-MariaDB-1:10.6.17+maria~ubu2004. Supported versions: MySQL-8, MySQL-5....

Leer más...
Claves para Aprender Desarrollo Web de Manera Efectiva claves-para-aprender-desarrollo-web-de-manera-efectiva

Los principales motivos para aprenderLa motivación es uno de los pilares fundamentales en el proceso de aprendizaje del desarrollo web....

Leer más...
Dominando el Estilo Un Viaje al Mundo de CSS ✨ dominando-el-estilo-un-viaje-al-mundo-de-css

✨ Dominando el Estilo: Un Viaje al Mundo de CSSEn el universo del desarrollo web, CSS (Cascading Style Sheets) desempeña un papel funda...

Leer más...