De la teoría a la práctica: usando Secciones en Magento 2 [Parte 2]

¡Hola a los lectores del blog de Amasty!

La última vez hablamos sobre los componentes de la interfaz de usuario de Magento 2. En realidad, hay una nueva capacidad más de Magento 2, las secciones , en las que nos centraremos hoy. Están destinados a sincronizar datos entre el cliente y el servidor web para mantenerlos siempre actualizados. Para ilustrar cómo funcionan las secciones y cómo usarlas en Magento 2, consideremos el ejemplo de un módulo estándar de Magento 2: Magento_Checkout .

¿Sabías que alrededor del 28% de los clientes abandonan las tiendas en línea debido al largo proceso de pago? ¡Haz tu compra en un solo paso !

¿Está buscando ayuda con los componentes de la interfaz de usuario? ¿O necesitas algún otro servicio personalizado? ¡Estaremos encantados de ayudarte con ello!

Secciones y CustomerData en Magento 2

Como Magento 2 depende en gran medida de localStorage , agregaron una nueva entidad llamada CustomerData para garantizar un funcionamiento sin problemas del atributo.

Puedes leer más sobre esto aquí .   

CustomerData trabaja con los datos almacenados en el lado del cliente. Las secciones de Magento 2 son partes fusionadas de datos de clientes. Permiten mantener estos datos actualizados a través de una sincronización con el servidor web.  Cada sección es una clave en magento-cache-storage , mientras que magento-cache-storage es la clave en localStorage como se muestra en la imagen:

Inicializar y definir secciones en Magento 2

Como dijimos anteriormente, el módulo Magento_Customer se usa para definir e inicializar secciones. Ahora, mostraremos este mecanismo en detalle.

Todas las secciones de Magento 2 se inicializan con solicitudes AJAX ( cliente/sección/carga ) al controlador ( MagentoClienteControladorSección ). Como resultado, se actualizan los datos en magento-cache-storage .

Todas las secciones están definidas en di.xml . Este es un ejemplo de una sección Magento 2 definida:

proveedor/magento/module-checkout/etc/frontend/di.xml

Esta definición crea nuevas secciones Cart y Directory-data en magento-cache-storag e:

Las secciones Cart y Directory-data se inicializan en el lado del servidor a través de las clases MagentoCheckoutCustomerDataCart y MagentoCheckoutCustomerDataDirectoryData . Cada una de estas clases contiene una definición del método getSectionData , que inicializa el valor de la sección .

Inicializar secciones en el lado del cliente

También hay otras formas de inicializar secciones. Por ejemplo, en el lado del cliente, se pueden inicializar con la ayuda de adaptadores de datos del cliente. Para crear una sección en el lado del cliente, también debe agregar una definición al di.xml.

proveedor/magento/module-checkout/etc/frontend/di.xml

Como puede ver, esta definición también crea nuevas claves checkout-data y cart-data en magento-cache-storage . La diferencia con el método anterior radica en las formas de inicialización.

El nombre del argumento clientSideSections le muestra a Magento que la inicialización debe ir del lado del cliente. Esto significa que la inicialización requiere claves de caché relacionadas con los datos de inicialización de la sección en lugar de clases de PHP.

En nuestro ejemplo, usamos las claves checkout-data y cart-data . Al mismo tiempo, los adaptadores de datos del cliente crean los datos solicitados por las claves . Técnicamente, estos adaptadores son módulos js que definen, en primer lugar, los métodos para trabajar con datos de clientes y, en segundo lugar, los nombres de cacheKey que se utilizan para solicitar estos datos.

Un ejemplo de definición de una sección en Magento 2

Consideremos una definición de sección usando el ejemplo de la sección cart-data en el módulo  Magento_Checkout . Como mencionamos anteriormente, se  define en di.xml. Esta definición usa la clave cart-data para crear una sección en magento-cache-storage . Su nombre se define con el nombre del atributo de la etiqueta <item> .

Para inicializar cart-data , defina el valor de la etiqueta <item> y especifique la cacheKey que hace referencia a los datos en magento-cache-storage .

proveedor/magento/module-checkout/etc/frontend/di.xml

Los datos en sí son creados por el módulo js Magento_Checkout/js/model/cart/cache a través de la clave cart-data . Como adaptador de datos del cliente, este módulo contiene métodos para trabajar con datos del cliente y define el valor de ?acheKey como datos del carrito. Como resultado de la inicialización de los datos del carrito, obtenemos lo siguiente:

Las solicitudes PUT y POST permiten cambiar los valores de los datos del cliente. Podemos definir solicitudes que cambiarán secciones particulares usando el archivo etc/sections.xml . Así es como puede verse una actualización:  

proveedor/magento/module-checkout/etc/frontend/sections.xml

El valor de la etiqueta <section name> muestra cómo afectará una solicitud a la sección del carrito  . Después de que una solicitud ( checkout/cart/estimateUpdatePost ) llegue al controlador ( MagentoCheckoutControllerCartEstimateUpdatePost ), la sección Cart obtendrá un nuevo valor. Si configuramos la acción como » * «, todas las solicitudes PUT y POST cambiarán la sección. Si falta la etiqueta <section> , todas las secciones en los datos del cliente cambiarán.

Magento 2 secciones en módulos personalizados

Revisamos cómo funcionan las secciones en la funcionalidad predeterminada de Magento 2. Utilizamos en nuestros módulos personalizados secciones estándar de Magento 2.

Por ejemplo, el módulo de obsequios utiliza una sección de carrito estándar . Así se introduce en el archivo de configuración de la extensión: Amasty/Promo/etc/frontend/sections.xml .

Este archivo section.xml describe el controlador que actualiza la  sección del carrito .

Conclusión

Hoy, revisamos las secciones en Magento 2, aprendimos a definirlas e inicializarlas y consideramos un ejemplo del uso de secciones en un módulo de Magento 2. Espero que este artículo te haya dado una idea de cómo usar las secciones en tus proyectos de Magento 2.

Si aún tiene preguntas o comentarios, siéntase libre de compartirlos en el feed de comentarios a continuación.