| Blog |Diseñando un tema para Magento 2

Diseñando la base de un tema para Magento 2

Normalmente cuando instalamos un magento nuevo este viene con dos temas por defectos el tema Blank y el tema Luma. Este segundo es el que se activa por defecto cuando terminamos la instalación de nuestro proyecto y le da una interfaz amigable a la primera impresión, quedando de la siguiente manera.

Blank es el tema que básicamente utilizan los desarrolladores de temas ya que no tiene diseños customizado o casi nada si se puede decir, sin embargo la diferencia de blank y luma es que este segundo tiene un poco de estilos y a base de ejemplo en este post sera el que utilizaremos para este fin.

Medianamente en lo posible iremos agregando “cosas” para que el tema vaya tomando vida sin embargo en esta oportunidad crearemos un tema base para demostrar como se crean los temas en magento.

Lo primero que haremos es definir las carpetas, que en esta caso nuestro vendor será Actecnology y el tema arturo, quedando de la siguiente manera:

app/design/frontend/Actecnology/arturo con los siguientes ficheros principales registration.php y theme.xml

registration.php es el fichero de registro del tema

theme.xml el fichero de configuración

la estructura del tema sera de siguiente manera

..web

….css

……..source

….fonts

….images

….js

registration.php

con este código se registrara el nuevo tema que acá describamos en Magento para que este disponible en el backoffice.

theme.xml

Acá describiremos el titulo como podremos identificar al tema y de cual parent depende que en nuestro caso es luma y el preview_image es para describir la miniatura representativa del tema.

Teniendo organizado todo esto podremos disponer del tema en el admin de nuestro E-Commerce, lo podremos visualizar en la siguiente sección: Content > Design > Themes así confirmaremos la existencia del tema.

Para poder elegir nuestro recién creado tema debemos dirigirnos a la siguiente sección: Content > Design > Configuration

donde editaremos la primera opción para que se configuren todos en cascada.

Elegimos nuestro tema y posteriormente a este paso debemos correr el siguiente comando para que surta efecto nuestro cambio de tema bin/magento c:f lo siguiente que nos queda es ir al home de nuestro sitio y ver el cambio, quedara algo como lo siguiente:

Espero que les guste y le sea de utilidad, Happy Coding!

gnuxdar

Diseñando un tema para Magento 2

Últimas Publicaciones

Le puede interesar los ultimos articulos públicados

Categorías

Mis Twits