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!
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. Used Version: 10.6.17-MariaDB-1:10.6.17+maria~ubu2004. Supported versions: MySQL-8, MySQL-5....
Leer más...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 CSSEn el universo del desarrollo web, CSS (Cascading Style Sheets) desempeña un papel funda...
Leer más...