Cómo crear un tema hijo en Magento 2

Quiero aprovechar la experiencia de este año trabajando con Magento 2 para hacer unas guías básicas de este eCommerce, en este tiempo me enfrente a varios retos y me ha tocado realizar mucha investigación

Sí que empezare con este guia con una de las cosas que mas se hace en este ambiente: crear un tema hijo a partir del tema principal de Magento 2 (o de otro), así que empecemos.

Los temas en Magento como en cualquier otro CMS definen la apariencia de nuestra tienda y como siempre: tener el tema principal como la vista de nuestra tienda no es aconsejable ya que puede ser fácilmente repetitiva en la web.

Como primer lección yo diría: siempre crear un tema secundario a partir del tema por defecto en Magento, ya que al modificar el tema principal puedes llegar a un punto donde la estructura de tu sitio no coincide con la actualización de Magento y así perderte al no tener el tema principal para guiarte.

A esto me refiero con tema hijo, un tema que hereda todas las propiedades del tema padre, así que vamos a comenzar con esta guía.

Guía para crear un tema hijo en Magento 2:

Para este ejemplo «Comsoft» sera el nombre del proveedor y «luma» es el nombre del tema principal.

• Primero deberemos crear una carpeta para nuestros temas secundarios, en este ejemplo mi carpeta se llama luma_child.

folder/app/design/frontend/Meetanshi/luma_child

• Ahora debemos crear nuestro archivo theme.xml dentro de nuestra carpeta para temas secundarios, aqui especificamos el tema del que vamos a heredar.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Luma Child</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Como podemos observar en la estructura del theme.xml la etiqueta <parent> contiene la información del teme padre del que vamos a heredar.

• A continuación deberemos registrar nuestro tema en un archivo registration.php

<?php
 \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Comsoft/luma_child',
    __DIR__
 );

La ruta del tema dentro de la carpeta frontend debe coincidir exactamente con el nombre de la carpeta del proveedor, siempre teniendo en cuenta que debe empezar con mayúsculas, en este caso «Comsoft».

• Ahora debemos crear un archivo composer.json donde haremos la configuración de nuestro tema.

{
    "name": "comsoft/theme-frontend-luma-child",
    "description": "Theme Child example",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",
        "magento/luma": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Es importante que sigas la estructura de este archivo segun tus configuraciones especialmente en name y en el object require.

• Al crear todos los archivos, también debemos crear las carpetas necesarias para poder trabajar con nuestro tema, en este caso debemos crear la siguiente estructura dentro de la carpeta luma_child.

Aquí podemos observar que hemos creado dentro de css/source los archivos .less que se encargaran del css de nuestro tema, también una carpeta image, fonts y js.

Después de crear la estructura de archivos

• En este paso recomiendo dar permisos a las carpetas que hemos creado para que en un futuro no tengamos algún error de visualización o problema al actualizar las vistas.
• Accedamos a la carpeta de los temas secundarios desde una terminal y ejecutar sudo chmod -R 777 .
• Ahora debemos ir al administrador de Magento en Contenido > Temas.
• Aquí veremos un listado de temas y ya debe estar el nuestro, así confirmamos que hemos realizado bien todos los pasos anteriores.

• Ahora tenemos que ir a Contenido > Diseño > Configuración

Aquí podemos ver las propiedades del tema, ahora damos click en editar para poder seleccionar el tema hijo al que se relaciona el tema principal.

Para terminar

El mismo administrador de Magento nos pedirá limpiar la cache del sitio para poder reflejar los cambios en la parte del frontend.

Ahora desde la terminal debemos acceder a la carpeta raíz del proyecto y ejecutar:

sudo php bin/magento setup:static-content:deploy

Esto regenerara nuestros archivos y creará la estructura de nuestro tema en la carpeta pub/static.

¡Listo!, ya tenemos nuestro tema heredado de otro, ahora puedes empezar a editar el tema sin miedo de romper algo o arrepentirte.