API ERP woocommerce

Knockout JS aplicado en una plantilla Magento 2

por Sergio Romo

Knockout JS, cómo aplicar en una plantilla / guia para  potenciar tu tienda Magento 2

En Mojomexico dominamos los ditstinos escenarios para aplicar KNOCKOUT en las distintas secciones de una PLANTILLA (Frontend) , como puede ser en la zona de detalle de productos para producir respuestas o efectos según el evento: traer  y mostrar las existencias de un producto en la tienda local MAS las de todas las sucursales EN TIEMPO REAL (asumimos que previamente hemos aplicado el API REST MOJOMEXICO para IR y Recuperar via REMOTA ésta informacion).

La gestión del carrito de compras es otro  ejemplo de la implementación de Knockout JS. 

En el carrito de compras se producen varios niveles de cambios. Ejemplo 

  • cálculo de precio
  • manipulación de precios basada en la cantidad
  • Gestión de cupones
  • cálculo de impuestos
  • y cálculo de tarifa de envío

Todo sucede en una sola pantalla. Knockout.js gestiona todas esas manipulaciones mediante un concepto MVVM (modelo vista vista-modelo) estándar.

Cómo utilizar Knockout JS en la plantilla personalizada en Magento 2

En Magento 2, la parte principal de Knockout JS se utiliza en la página de pago. Sin embargo, no hay ninguna restricción para usar Knockout JS solo en la página de pago. 

PASOS PARA INCRUSTTRAR NUESTRO CODIGO PERSONALIZADO:

  1. Creear un archivo phtml de plantila (frontend/templates/account/knockout.phtml)
< ?xml versión= "1.0" ? >
< !--
/**
*Software Webkul.
*
* @categoría Webkul
* @paquete Webkul_Knockout
* @autor Webkul
* @copyright Derechos de autor (c) 2010-2023 Webkul Software Private Limited (https://webkul.com)
* @licencia https://store.webkul.com/license.html
*/
-- >
< página xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:View/Layout/etc/page_configuration.xsd" >
< update handle= "cuenta_cliente" / >
< cuerpo >
< nombre del contenedor de referencia = "contenido" >
< bloque clase = "Magento\Framework\View\Element\Template" nombre = "cuenta_cliente_knockout_test" plantilla = "Webkul_Knockout::cuenta/knockout.phtml" almacenable en caché = "falso" / >
< /contenedor de referencia >
< /cuerpo >
< /página >
Explicar el código
Desarrollado por

Ahora abra el archivo phtml, Webkul/Knockout/view/frontend/templates/account/knockout.phtml para definir la inicialización de KO.

< div id= "componente-personalizado" data-bind= "alcance:'componente-personalizado'" >
< !-- ko plantilla: getTemplate () -- >< !-- /ko -- >
< tipo de script = "texto/x-magento-init" >
{
"#componente-personalizado" : {
"Magento_Ui/js/core/aplicación" : {
"componentes" : {
"componente personalizado" : {
"componente" : "Webkul_Knockout/js/componente-personalizado"
}
}
}
}
}
< /script >
< /div >

....aolo es un extracto como muestra que puedes pedir directo aqui.

Te gustaria SABER Y DOMINAR LA PROGRAMCACIÓN KNOCKOOUT para Magento2 o necesitas apoyo para tus proetos ? PIDELO AQUI

Volver a Cursos Certificacion RVOE