| Blog |Como agregar JavaScript Custom en Magento 2

En este Post aprenderemos a personalizar la tienda Magento 2. Descubre cómo incorporar JavaScript personalizado para mejorar la funcionalidad y el diseño de tu sitio web con Mageto.

Hay muchas formas de agregar Js personalizado en Magento, este CMS usa las bibliotecas RequireJS y KnockoutJs para mejorar la interacción de las paginas y gestionar las dependencias de JS. Como los Js se cargan de manera asincrónica en el backend, esto ayuda a aumentar la velocidad de la página.

Algunas de las rutas de los js

Estos son algunas de las ubicaciones donde puede encontrar ficheros Js.
• lib/web/js
• view/frontend/web/js
• theme/module/web/js
• theme/ web/js

Magento 2 usa requirejs-config.js en la carpeta Vendor/Modulo/view/frontend para mapear los archivos JS con alias.
Magento 2 declara Js utilizando las siguientes formas:

data-mage-init en los templates.phtml

    <script> codigo js llamado en requireJS</script>

Las siguientes formas de agregar JS personalizado en Magento 2.

Metodo 1: atributo data-mage-init

Este enfoque utiliza un atributo data-mage-init único que permite el uso de Js de manera modular, asi como la carga en segundo plano y asincronica.

app/code/Vendor/Module/view/frontend/web/js/customjs.js
El contenido del codigo seria:

define([“jquery”, “domReady”, “customjs”], function($, dom, customjs){
    console.log(“Mensaje enviado por gnuxdar”);
}

Después conectar nuestro fichero customjs al requirejs.

Vendor/Modulo/view/frontend/requirejs-config.js

var config = {
    map: {
        ‘*’:{
            customjs: ‘Vendor_Module/js/customjs.js
        }
    },
    shim: {
        ‘customjs’: {
            deps: [‘jquery’]
        }
    }
}

ahora llamamos nuestro código customjs en el fichero phtml usando el atributo data-mage-init

<div class=”alguna-class” data-mage-init=’{“curstomjs”: {}}’>Un Simple div </div>

Metodo 2:

A veces tenemos que pasar mas de una argumento a nuestro módulo. La sintaxis del atributo data-mage-init puede ser dicifil de leer, por lo que se puede utiliar type=”text/x-magento-init” como alternatia, se puede crear asi:

<script type=”text/x-magento-init”>
    {
        “*”: {
            “Vendor_Module/js/customjs.js”: { 
                “param1”: “value1”,
                “param2”: “value2”
            }
        }
    }
</script>

y puedes acceder a este valor en tu fichero javascript como se muestra a continuación:

define([
    ‘jquery’,
    ‘domReady’,
], fucntion ($, dom) {
    ‘use-strict’;
    return function(config) {
        console.log(config);
        console.log(config.param1);
        console.log(config.param2);
    }
});

Metodo 3: Agregar Js con fichero Layout

Este método es el menos recomendado por especialistas magento, en comparación con los anteriores. En este método, no es necesario definir el código JavaScript personalizado en el fichero requirejs-config.js. Sencillamente carga el fichero JavaScript personalizado al layout con la etiqueta “script”.

en app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xml


<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchema
Location="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Module::js/customjs.js"/>
    </head>
</page>

Agregue el siguiente código a su fichero js:
en app/code/Vendor/Module/view/frontend/web/js/customjs.js

require([“jquery”}, function($){
    console.log(“Código por gnuxdar”);
}

Estas son tres maneras de llamar ficheros JavaScript personalizados, si las conocías o conoces alguna manera diferente déjamelo saber en los comentarios.

Happy Coding!. 💻

gnuxdar

Como agregar JavaScript Custom en Magento 2

Algunas de las rutas de los js

Metodo 1: atributo data-mage-init

Metodo 2:

Metodo 3: Agregar Js con fichero Layout

Últimas Publicaciones

Le puede interesar los ultimos articulos públicados

Categorías

Mis Twits