Interfaz de Magento 2

Publicado: 2015-11-23

Magento 2 viene con un conjunto distintivo de enfoques frontales mejorados en comparación con su predecesor Magento 1.X. Hoy veremos bajo el capó del motor frontal Magento 2.0. Y describe las partes más interesantes en detalles.

¡¡CALIENTE!! La versión 2.0 de Claue ha sido lanzada

clausula2_editado (1)

Ver demostración

Claue: Clean, Minimal Magento 2&1 Theme es una excelente plantilla para una tienda de comercio electrónico moderna y limpia con más de 40 diseños de página de inicio y toneladas de opciones para tiendas, blogs, portafolios, diseños de localizador de tiendas y otras páginas útiles. Claue versión 2.0 viene con un montón de características exclusivas que incluyen:

Estar basado en el tema Luma.
Cumple con todos los estándares de Magento Theme
Mejora significativa del rendimiento
Compatible con la mayoría de las extensiones de terceros.
Totalmente compatible con Magento 2.4.x

Esta segunda versión avanzada se diferencia por completo de la anterior. Por lo tanto, si está utilizando la versión 1 de Claue y desea actualizar a la versión 2 de Claue, solo puede reconstruir un nuevo sitio web en lugar de actualizar desde la versión anterior. Ahora, volvamos al tema principal.

La gran diferencia es que la interfaz ahora se actualiza con tecnologías más nuevas, como HTML5, CSS3 y jQuery. También hay cambios/mejoras significativos en la manipulación general del diseño, la estructura de archivos y una nueva introducción a la biblioteca de interfaz de usuario de Magento basada en gran medida en el preprocesador LESS con compilador incorporado.

Uno de los principales objetivos, además del rendimiento y la escalabilidad, era ofrecer RWD listo para usar. En este artículo intentaré cubrir algunas de las principales diferencias, sumergirme en el desarrollo y demostrar algunos ejemplos prácticos.

Biblioteca de interfaz de usuario de Magento

La biblioteca de interfaz de usuario de Magento es una biblioteca frontal flexible basada en LESS diseñada para ayudar a los desarrolladores de temas de Magento. Emplea un conjunto de mixins para elementos básicos para facilitar el desarrollo y la personalización del tema de interfaz.

Componentes proporcionados por la biblioteca de la interfaz de usuario

La biblioteca de la interfaz de usuario de Magento brinda la capacidad de personalizar y reutilizar los siguientes elementos y propiedades de la interfaz de usuario:

barra de herramientas de acciones
migas de pan
botones
Listas deplegables
formularios
iconos
diseño
cargadores
mensajes
paginación
ventanas emergentes
calificaciones
secciones
partituras y acordeones
mesas
información sobre herramientas
tipografía
lista de variables de tema

La siguiente ilustración muestra una página de producto de escaparate que contiene algunos de los elementos anteriores:

Interfaz de Magento 2

Ubicación de mezcla

Puede encontrar la biblioteca de la interfaz de usuario de Magento en lib/web/css . Los archivos .less de origen de la biblioteca se almacenan en el directorio de source , cada archivo contiene mixins para configurar un determinado elemento y, en la mayoría de los casos, el elemento coincide con el nombre del archivo:

 biblioteca/web
    ├── CSS/
    │ ├── docs/ (Documentación de la biblioteca)
    │ ├── fuente/
    │ │ ├── lib/ (archivos fuente de la biblioteca)
    | | | ├── variables/ (Variables predefinidas para cada mixin)
    │ │ │ ├── _actions-toolbar.less
    │ │ │ ├── _breadcrumbs.less
    │ │ │ ├── _botones.menos
    │ │ │ ├── _desplegables.menos
    │ │ │ ├── _formularios.menos
    | | | ├── _grids.less
    │ │ │ ├── _icons.less
    │ │ │ ├── _layout.less
    │ │ │ ├── _lib.menos
    │ │ │ ├── _cargadores.menos
    │ │ │ ├── _mensajes.menos
    │ │ │ ├── _navegación.menos
    │ │ │ ├── _páginas.menos
    │ │ │ ├── _popups.less
    │ │ │ ├── _rating.less
    │ │ │ ├── _resets.less
    │ │ │ ├── _responsive.less
    │ │ │ ├── _secciones.menos
    │ │ │ ├── _tables.less
    │ │ │ ├── _tooltips.less
    │ │ │ ├── _tipografía.menos
    │ │ │ ├── _utilities.less
    │ │ │ └── _variables.menos
    │ │ └── _extender.menos
    │ │ └── _tema.menos
    │ │ └── _variables.menos
    │ └── estilos.menos
    ├── fuentes/
    │ └── Blank-Theme-Icons/ (fuente de iconos personalizados de la biblioteca)
    ├── imágenes/
    │ └── blank-theme-icons.png (sprite de iconos de biblioteca)
    └── jquery/ (archivos javascript de biblioteca)

Variables predefinidas

Si su tema hereda de cualquier tema Magento listo para usar, por ejemplo, Blank, puede personalizar fácilmente cualquier elemento de una página de tienda sin cambiar ningún código CSS o plantilla. La personalización se puede realizar simplemente cambiando en su tema los valores de las variables predefinidas utilizadas en la biblioteca de la interfaz de usuario o en las mezclas del tema principal.

La lista completa de estas variables y sus valores predeterminados se almacenan en lib/web/css/source/lib/variables . Este directorio contiene un conjunto de archivos, correspondientes al conjunto de elementos de la biblioteca de la interfaz de usuario, y cada uno de los archivos enumera las variables específicas del elemento. Por ejemplo, lib/web/css/source/lib/variables/_breadcrumbs.less contiene variables utilizadas en la mezcla de breadcrumbs() .

Para cambiar los valores predeterminados de las variables de la biblioteca, especifique los nuevos valores para las variables requeridas en el <theme_dir>/web/css/source/_theme.less .

Tenga en cuenta que su <theme_dir>/web/css/source/_theme.less anula _theme.less del tema principal (si su tema tiene un elemento principal). Entonces, si desea heredar los valores de las variables del tema principal además de sus cambios, agregue también el contenido de _theme.less de los padres a su archivo.

La siguiente figura muestra la página del producto que se mostró anteriormente en este tema, después de que se aplicó un tema personalizado. El tema personalizó Blank redefiniendo solo las variables.

Cambio de diseño mediante la redefinición de variables

Usando mezclas

Puede usar un mixin con valores de variables predeterminados, o puede redefinirlos al llamar a un mixin. Los siguientes párrafos describen las dos formas de llamar a un mixin.

Para usar un mixin con valores predeterminados, llame al mixin sin especificar ningún parámetro. Por ejemplo:

 .migas de pan {
    .migas de pan();
}

Para llamar a un mixin con valores de parámetros diferentes a los predeterminados, establezca estos valores cuando llame al mixin, como en el siguiente ejemplo:

 .ejemplo-boton {
    .botón(
        @_botón-relleno: @botón-relleno,
        @_button-color: #fff,
        @_button-color-hover: #ccc
    );
}

Las variables que comienzan con @_ son variables mixtas privadas que se usan solo en esta combinación. Las variables que comienzan con @ (sin el guión bajo) son globales y se enumeran en lib/web/css/source/lib/variables/ .

Documentación de la biblioteca de la interfaz de usuario

Puede encontrar información detallada sobre la biblioteca de interfaz de usuario de Magento en la documentación proporcionada junto con el código:

lib/web/css/docs/source/README.md : describe la estructura de la biblioteca de la interfaz de usuario de Magento, las convenciones de nomenclatura y el estilo del código.
lib/web/css/docs : contiene un conjunto de archivos .html con información detallada sobre los mixins de la biblioteca. Cada archivo lleva el nombre del mixin que describe y contiene una descripción detallada del mixin y controles de navegación para acceder a la documentación de otros mixins. La documentación está disponible en una cómoda vista HTML en la siguiente ubicación de su instalación de Magento: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

A continuación del artículo, me gustaría describirles la nueva estructura de temas de la plataforma Magento 2.

Estructura del tema de Magento 2

La estructura del tema de Magento 2 ha sufrido cambios significativos:

Todo el tema ahora está organizado en relación con "aplicación/diseño". La carpeta "skin" ya no existe. Además, hay un nuevo enfoque para la personalización de los módulos: ahora en la carpeta con el tema, cada unidad de módulo tendrá su propio _ catálogo con su representación, contendrá plantillas, JS y CSS/LESS. Es un enfoque muy fácil de usar y pragmático. Tenemos una estructura cómoda, donde todo se ordena de manera muy conveniente.

i18n

Esta carpeta contiene los archivos de traducción .csv.

tema.xml

Se utiliza para inicializar el tema. El nombre del tema, la versión del tema, la plantilla principal del tema y la imagen de vista previa del tema deben definirse allí. Por cierto, ahora Magento 2 admite la herencia de múltiples temas.

 <theme xmlns:xsi= "http :// www. w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd" >
    <title>Astrio</title>
    <version>1.0.0.0</version>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
 </theme>

compositor.json

Los temas de Magento 2 están organizados como paquetes de composición.

Para transformar su propio tema en un paquete de compositor, deberá agregar el archivo de configuración composer.json en la carpeta del tema y también deberá registrar su paquete en https://packagist.org

Actualizaciones/mejoras de diseño

Cuando se trata de la manipulación del diseño, hay algunas mejoras nuevas realmente geniales e interesantes.

Antes de sumergirse en ejemplos prácticos, es importante mencionar que los archivos de diseño ahora se dividen en partes más pequeñas. Explicación práctica: lo que una vez fue un controlador de diseño ahora es un archivo separado.
Probablemente la intención era simplificar el mantenimiento.

Magento 2 presenta un concepto completamente nuevo para las acciones de cambio de tamaño de imágenes de productos/medios directamente desde el diseño. El archivo de diseño view.xml es responsable y debe colocarse en el directorio app/design/frontend/vendorName/newTheme/etc/ . Aquí hay un ejemplo de cómo cambiar el tamaño de las imágenes del catálogo de productos en acción.

 <view xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd" > <vars module = "Magento_Catalog" > <var name = "product_small_image_sidebar_size" > 100 </var > <var name = "product_base_image_size" > 275 </var > <var name = "product_base_image_icon_size" > 48 </var > <var name = "product_list_image_size" > 166 </var > <var name = "product_zoom_image_size" > 370 </var > <var name = "product_image_white_borders" > 0 </var > </vars > </view >

Aunque supongo que el objetivo principal era simplificar el proceso de cambio de tamaño real para los desarrolladores, ciertamente fallará en la mayoría de las situaciones de diseño receptivo. Por ejemplo, no queremos mostrar imágenes grandes para usuarios de teléfonos inteligentes en la conexión perimetral. Cambiar el tamaño de los archivos de plantilla ofreció una mejor manera de servir múltiples fuentes para diferentes perfiles de usuarios finales. En este momento, al inspeccionar un tema en blanco, solo veo una situación en la que solo se reducen las imágenes en html.

Uno de los grandes y más que bienvenidos cambios es la introducción de un envoltorio contenedor , sucesor de un tipo de bloque core/text_list que cumplía la función de bloque estructural en las versiones anteriores del sistema. Lo que es realmente interesante es la posibilidad de pasar atributos como htmlTag , htmlClass , htmlId directamente desde los archivos de diseño.

Mi favorito personal es la introducción del método de movimiento . Es una especie de método de acción refinado set/unsetChild pero ahora el proceso es mucho más intuitivo. Por ejemplo, si necesitamos insertar el bloque de origen 1 en el bloque de destino 2, esta es la forma en que podemos hacerlo:

Automáticamente convierte el bloque de origen 1 en un elemento secundario de un bloque de destino 2 .

Es importante mencionar que Magento 2 ofrece un sistema de validación para archivos XML utilizando esquemas xml para archivos de diseño individuales y combinados.

El sistema frontend de Magento 2 se mejoró significativamente, ahora es más avanzado tecnológicamente y es mucho más fácil trabajar con él. Desafortunadamente, es imposible cubrir todos los cambios e innovaciones de Magento 2 en un artículo. En futuros artículos, Magesolution sin duda seguirá con el asunto y entraremos en más detalles del mundo tecnológico de Magento 2.

Fuente: magento.com