Cómo crear un tema personalizado en Magento

A pesar de que Magento 2 está en fase de desarrollo, ya ha generado mucho revuelo en la industria del comercio electrónico debido a los nuevos y mejorados enfoques de front-end que se espera que ofrezca. Si bien las mejoras en el front-end parecen hacer que el proceso de temas de Magento sea mucho más eficiente, muchos desarrolladores (especialmente los principiantes) aún no conocen el proceso de creación de un tema personalizado en Magento 2.

A través de esta publicación, cubriré paso a paso el proceso de creación de un tema personalizado de Magento 2. Pero antes de eso, primero tengamos una descripción general de Magento Theme.

Tema de Magento: una descripción general

Un tema ayuda a crear una representación visual de su tienda Magento, usando una combinación de lo siguiente:

• Plantillas personalizadas
• Diseños
• Archivos CSS/MENOS

La aplicación Magento ofrece dos temas de diseño diferentes, a saber, Luma (también llamado tema de demostración) y Blank (utilizado para la creación de temas personalizados). Como necesitamos crear un tema Magento personalizado, usaremos el tema Magento Blank.

Para crear un nuevo tema usando Blank, deberás personalizarlo. Sin embargo, al realizar cambios en el tema predeterminado, se sobrescribirán los cambios cada vez que se actualice la nueva versión de sus archivos predeterminados. Una alternativa viable a este problema es crear un nuevo tema personalizado que herede la funcionalidad del tema predeterminado o de cualquier tema existente.

En pocas palabras, crearemos un tema secundario personalizado que herede la funcionalidad del tema existente. Si lo hace, lo ayudará a superar la molestia de crear un nuevo tema independiente desde cero. Por lo tanto, en lugar de copiar un conjunto extenso de archivos y modificarlos, solo necesitará anular y ampliar los archivos existentes dentro del tema principal.

Ahora comencemos a discutir los pasos involucrados en la creación de un nuevo tema de Magento (es decir, uno por uno.

Comprender el proceso de creación de temas

En esta sección, cubriremos la creación de archivos que ayudarían en la creación de temas. Además, también veremos el proceso de agregar un logotipo al tema o cómo podemos configurar las imágenes.

Paso 1: crea un directorio de temas

El primer paso que debe realizar cuando crea un tema personalizado requiere que cree la estructura de directorio de su tema. Para hacerlo, siga los puntos clave mencionados a continuación:

1. Acceda y abra su backend de administración de instalación de Magento, y luego muévase a dir>/app/design/frontend.

2. La mayoría de las tiendas electrónicas ofrecen productos de diferentes proveedores, por lo que es importante tener un directorio de proveedores separado, donde se enumeran todos los productos ofrecidos por los proveedores. Entonces, su siguiente paso es crear un nuevo directorio con un nombre similar al nombre de su proveedor: /app/design/frontend/<Vendor>.

En caso de que esté utilizando cualquier tema integrado de Magento, debe consultar el directorio: app/design/frontend/Magento

3. Ahora que ha creado el directorio de proveedores, cree otro directorio con un nombre similar al de su tema en el directorio de proveedores, como se muestra a continuación.

aplicación/diseño/interfaz/

>> <Vendedor>/

>>…<tema>/

>> …

Paso 2: comprender la declaración del tema

Una vez que haya terminado de crear la estructura de directorios de su tema, deberá crear theme.xml para definir el diseño de su tema. El archivo xml debe contener al menos el nombre del tema secundario y el nombre del tema principal. Todas las actualizaciones realizadas en el diseño de su tema se almacenarán en este archivo.

Hay dos tareas que debe realizar el diseño de su tema.

• Primero agregue o copie los contenidos del theme.xml actual a su directorio de temas app/design/frontend/<Vendor>/<theme>

• En segundo lugar, para que su tema sea visible, debe configurarlo. Para ello, utilice el siguiente ejemplo:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework /Config/etc/tema.xsd”>

<title>Nuevo tema</title> <!– el nombre de tu tema –>

<parent>Magento/blank</parent> <!– el tema principal, en caso de que su tema herede de un tema existente –>

<medios>

<preview_image>media/preview.jpg</preview_image> <!– la ruta a la imagen de vista previa de su tema –>

</medios>

</tema>

Para asegurarse de que la aplicación Magento reconozca su tema, inicie sesión en el panel de administración de Magento y verifique si puede ver el tema en la cuadrícula en Contenido-> Diseño -> Temas.

Alfiler

Paso 4: configurar imágenes (cambiar el tamaño de las imágenes del producto)

Al cargar las imágenes del producto, si su tamaño supera al del tema predeterminado, deberá agregar un archivo view.xml. Este archivo contiene detalles de configuración de los tamaños de imagen del producto que se muestran en el escaparate. Veamos ahora los pasos que debes seguir para configurar las imágenes:

1. Inicie sesión en su servidor Magento, sin embargo, deberá acceder al servidor como un usuario que tiene un determinado conjunto de permisos. Debe tener permisos para crear directorios y archivos en el directorio de la instalación de Magento.

2. En su carpeta de temas, cree el directorio etc.

3. A continuación, copie el archivo view.xml del "directorio etc" de su tema existente (digamos, por ejemplo, del tema en blanco) al directorio etc recién creado de su tema personalizado.

4. Por último, debe configurar todos los tamaños de imagen del producto utilizados en el front-end de su tienda en view.xml. Por ejemplo, puede optar por representar las imágenes de productos en la vista de cuadrícula de categorías de productos como un cuadrado, asignándole un tamaño de 250 x 250 px. Echemos un vistazo a cómo se vería la configuración de la imagen:

<var name="category_page_grid:type">pequeña_imagen</var>

<var nombre=”category_page_grid:ancho”>250</var>

<var name=”category_page_grid:ratio”>1</var>

<var nombre=”category_page_grid:altura”>250</var>

Paso 5: cree directorios para los archivos estáticos de su tema

Al igual que cualquier tema estándar de Magento, su tema también contendrá varios archivos estáticos, incluidos estilos, JavaScript, imágenes y otros archivos. Asegúrese de almacenar cada tipo de archivo en un subdirectorio "web" separado dentro de la carpeta de su tema, de la siguiente manera:

app/design/<área>/<Proveedor>/<tema>/

>> web/

>> CSS/

>> fuente/

>> fuentes/

>> imagenes/

>> js/

Nota: Todos los archivos estáticos de temas generales deben almacenarse en …<theme>/web/images, por ejemplo, el logotipo de su tema debe almacenarse en …<theme>/web/images. Existe una mayor posibilidad de que su tema incluya algunos archivos específicos del módulo. Estos archivos se almacenan en subdirectorios como …/<theme>/<Namespace_Module>/web/css y subdirectorios relacionados. Sin embargo, este es un tema completamente nuevo de discusión. Entonces, por ahora nos saltaremos este tema.

Aplicar y configurar su tema en Magento

Esta sección le permitirá saber cómo puede aplicar su tema al escaparate de Magento. Para hacerlo, simplemente siga los pasos enumerados a continuación:

Paso 1: abra su panel de administración de instalación de Magento y vaya a CONTENIDO-> Diseño-> Temas. Asegúrese de que puede ver su tema en la lista de temas dada.

Paso 2: desde su panel de administración, visite Tiendas -> Configuración -> Diseño.

Paso 3: en el campo desplegable "Alcance", elija la vista de la tienda a la que le gustaría aplicar su tema.

Paso 4: a continuación, en la pestaña Tema "Diseño", elija el tema que acaba de crear que aparece en el menú desplegable Tema de diseño.

Paso 5: por último, haga clic en la opción "Guardar configuración" para aplicar los cambios que ha realizado hasta ahora. Y una vez hecho esto, asegúrese de volver a cargar las páginas de su escaparate.

Nota: En caso de que el almacenamiento en caché esté habilitado en su back-end de Magento, es importante borrar el caché o, de lo contrario, es posible que no pueda ver los cambios que acaba de aplicar.

Conclusión

Espero que la lectura de este tutorial sirva como una guía básica que lo ayude a comprender el proceso de creación de un tema personalizado en Magento 2.

Biografía del autor:

Isabella Morris trabaja actualmente en una reconocida empresa de desarrollo personalizado de Magento y también se dedica a escribir artículos informativos sobre las mejores herramientas y trucos para el desarrollo de Magento. Sus escritos han demostrado ser beneficiosos para un grupo más amplio de desarrolladores de Magento en todo el mundo.