Magento 2 es una plataforma de comercio electrónico robusta y altamente personalizable que ofrece numerosas formas de agregar funcionalidades adicionales a una tienda en línea. Una de estas formas es mediante el uso de JavaScript (JS Component) para mejorar la experiencia del usuario y agregar características dinámicas. En este tutorial te enseñare las diferentes opciones que ofrece Magento 2 para agregar JavaScript o JS Components.

Dependiendo de nuestros requerimientos, podemos utilizar notación declarativa o imperativa para insertar un componente JS en una plantilla PHTML (PHP y HTML). Si nuestro componente requiere inicialización, utilizaremos la notación declarativa, de lo contrario, para todos los demas casos, usaremos la notación imperativa.

Notación declarativa

El uso de la notación declarativa para insertar un componente JS prepara toda la configuración en el backend y la envía a la fuente de la página utilizando herramientas estándar. Utilizaremos una notación declarativa si nuestro componente JavaScript requiere inicialización.

Tenemos dos opciones para especificar la notación declarativa:

Usando el atributo data-mage-init

Esto se utiliza para apuntar a un elemento HTML específico. Es más fácil de implementar y se usa comúnmente para widgets de jQuery UI. Este método solo se puede implementar en la etiqueta HTML especificada. Por ejemplo, <nav data-mage-init='{"<component_name>": {...}}'></nav>. Este metodo es muy util por su sintaxis concisa y acceso directo al elemento HTML.

Ejemplo:

<div id="accordion" data-mage-init='{
        "accordion":{
            "active": [1, 2],
            "collapsible": true,
            "openedState": "active",
            "multipleCollapsible": true
        }}'>
    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 1</h4>
        </div>
    </div>
    <div data-role="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 2</h4>
        </div>
    </div>
    <div data-role="content"> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 3</h4>
        </div>
    </div>
    <div data-role="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>

Usando la etiqueta <script type="text/x-magento-init"></script>

Esto se utiliza para apuntar a un selector de CSS. Si el selector CSS coincide con varios elementos HTML, el script se ejecutará para cada elemento HTML coincidente. Si no colocamos un selector de CSS podemos utilizar el simbolo de asterisco *. Este simbolo no selecciona ningún elemento HTML y el script se ejecutará una vez con el DOM HTML como destino. Este método se puede implementar desde cualquier lugar del código base para apuntar a cualquier elemento HTML. Esto es preferible cuando el acceso directo al elemento HTML está restringido o cuando no hay ningún elemento HTML de destino.

Ejemplo:

<div id="accordion">
    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 1</h4>
        </div>
    </div>
    <div data-role="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 2</h4>
        </div>
    </div>
    <div data-role="content"> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 3</h4>
        </div>
    </div>
    <div data-role="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>

<script type="text/x-magento-init">
{
    "#accordion": {
        "accordion": {
            "collapsible": true,
            "active": false
        }
    }
}
</script>

Notación imperativa

Utilizaremos la notación imperativa en la plantilla PHTML para incluir código JavaScript sin formato en las páginas para ejecutar la lógica especificada. Este método utiliza la etiqueta <script> sin el atributo type="text/x-magento-init" como se muestra en el siguiente ejemplo:

<div id="element">
    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 1</h4>
        </div>
    </div>
    <div data-role="content">Content 1</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 2</h4>
        </div>
    </div>
    <div data-role="content">Content 2</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 3</h4>
        </div>
    </div>
    <div data-role="content">Content 3</div>
</div>

<script>
    require([
        'jquery',
        'accordion'
    ], function($) {
        $("#element").accordion();
    });
</script>

Creando un JS Component personalizado

Crear tu propio componente de JavaScript en Magento 2 te permite agregar funcionalidades personalizadas y dinámicas a tu tienda en línea de una manera modular y organizada. A continuación, te guiaré a través de los pasos para crear tu propio componente de JavaScript en Magento 2.

Para crear nuestro propio componente personalizado, primero debemos tener un módulo de Magento 2 creado. Te dejo el siguiente tutorial para crear tu primer módulo en Magento 2. Luego, necesitaremos crear un Bloque (Block) en nuestro módulo, pero no te preocupes, aca te dejo el siguiente enlace para crear un Bloque en Magento 2.

Teniendo todo lo necesario empezaremos creando en la carpeta view/frontend, un archivo llamado requirejs-config.js para definir la configuración de RequireJS. Con este archivo, lo que haremos sera asiganrle un alias a nuestro componente.

// app/code/MyCompany/MyModule/view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            customComponent: 'MyCompany_MyModule/js/custom-component'
        }
    }
};

En la carpeta view/frontend/web/js, crea un archivo JavaScript para tu componente personalizado. Por ejemplo, podrías llamarlo custom-component.js.

// app/code/MyCompany/MyModule/view/frontend/web/js/custom-component.js
define([
   'jquery'
], function ($) {
   'use strict';

   return function (config, node) {
      // Configuración y lógica del componente
      console.log('Configuración del componente:', config);
      console.log('Nodo del componente:', node);

      // Ejemplo de función de utilidad
      function saludo() {
         return 'El nombre es: ' + config.nombre + ' y el mensaje es: ' + config.mensaje
      }

      // Ejemplo de inicialización
      function init() {
         $(node).html(saludo());
         // Lógica de inicialización adicional
      }

      // Llamada a la función de inicialización
      init();
   };
});

Una vez que hayas creado tu componente de JavaScript, puedes llamarlo desde cualquier plantilla en tu tienda Magento 2.

Con la notación declarativa, Usando el atributo data-mage-init seria:

<div data-mage-init='{
    "customComponent": {
        "nombre": "Gerson Hernandez",
        "mensaje": "Hola Mundo"
    }}'>
</div>

Con la notación declarativa, usando la etiqueta <script type="text/x-magento-init"></script> seria:

<div id="contenedor"></div>

<script type="text/x-magento-init">
{
    "#contenedor": {
        "customComponent": {
            "nombre": "Gerson Hernandez",
            "mensaje": "Hola Mundo"
        }
    }
}
</script>

Con la notación imperativa, nuestro componente JS debe ser un poco diferente, aca te dejo el ejemplo de como debe quedar:

define([
   'jquery',
   'jquery/ui'
], function ($) {
   "use strict";

   $.widget('MyCompany_MyModule.customComponent', {
      // Logicial code

      // Optional 
      options: {
         // Define variables
         nombre: '',
         mensaje: ''
      },

      _create: function () {
         // Init code
         let content = 'El nombre es ' + this.options.nombre + ' y el mensaje es: ' + this.options.mensaje;
         this.element.html(content);
      },

   });

   return $.MyCompany_MyModule.customComponent;
});

Ahora si, podemos utilizar nuestro componente con la notación imperativa de la siguiente forma:

<div id="contenedor"></div>

<script>
    require([
        'jquery',
        'customComponent'
    ], function($, customComponent) {
        $(function() {
            $('#contenedor').customComponent({
                nombre: "Gerson Hernandez",
                mensaje: "Hola Mundo"
            });
        });
    });
</script>

Para que se apliquen los cambios, debemos correr los siguientes comandos desde el directorio raiz de nuestro proyecto en Magento 2:

php bin/magento setup:upgrade

php bin/magento cache:clean

Con estos pasos, has creado tu propio componente de JavaScript en Magento 2 y lo has integrado en tu tienda en línea. Ahora puedes agregar lógica personalizada y funcionalidades dinámicas a tu sitio de manera modular y organizada.

Conclusión

En conclusión, los componentes JavaScript (JS) desempeñan un papel crucial en la personalización y mejora de la experiencia del usuario en las tiendas en línea de Magento 2. Estos componentes proporcionan una manera modular y organizada de agregar funcionalidades dinámicas y personalizadas a diversos elementos y páginas del sitio web. Ahora que ya sabes como utilizar y crear componentes JS, vamos a ver en el siguiente tutorial el uso de Knockout JS, la libreria JavaScript que viene incluida en Magento 2.

¡Eso es todo!