Como sobrescribir elementos de JavaScript en Magento 2

Te voy a mostrar como se puede sobrescribir cualquier elemento de JavaScript en Magento 2, en qué casos surge la necesidad de tener que sobrescribir algún archivo de script, puede ser en cualquier caso donde el componente que sea ya sea de un componente de la librería de Magento nativa de aquellos elementos que se localizan en la sección dentro de la carpeta vendor.

Puede ser una librería de tercero como algún módulo de paquetería de envío, aquellos que son instalados a trabes de composer, recordemos que hay diferentes formas de instalar componentes y módulos en nuestro proyecto de Magento 2 algunos a través de un archivo que nos podemos bajar directamente del proveedor que nos vende el componente, módulo, plugin o cualquier artefacto que necesitemos añadir a nuestro proyecto, existe la forma más sencilla a través de unas simples líneas de código agregadas a través de nuestro archivo de gestión de paquetes por composer, o incluso de forma manual creando nuestra propia estructura de carpetas dentro de la carpeta app/code/Namespace que para este último caso se podría realizar directamente desde la carpeta del módulo, que bien para mantener un proyecto en orden yo recomendaría crear un módulo personalizado simplemente para sobrescribir el script de algún otro módulo, ya que a futuro si este contempla una actualización de la fuente original bien se podría mover nuestro cambio personalizado sin afectar a la fuente original.

Vendor

Vamos a recordar que pasa con esta sección, para lo cual hay una regla de oro y es que esta dice que todo lo que está dentro de la carpeta VENDOR no se debería tocar, y es más bien que no se debería tocar, no porque el proyecto dejara de funcionar, o ya no trabajaría de la forma correcta.

Porque incluso si algo no programamos bien en cualquier módulo que nosotros mismos creemos esto podría causar el mal funcionamiento del proyecto, más bien es que aquí es donde residen todas las librerías nativas del proyecto y estas se encuentran organizadas y sincronizadas de forma bien organizada que cuando el proyecto por completo va teniendo mejoras estas se van reflejando a trabes de upgrade de actualización que permitirían que nuestro proyecto fuera actualizando cada una de las librerías cambiando el código de las mismas o bien agregando modificaciones significativas.

Así que este es el principal punto que si nosotros como desarrolladores trabajamos en estas secciones podríamos ocasionar que las librerías no fueran actualizadas o no trabajaran de la forma correcta, en el mejor de los casos podrían reemplazar todo el código que se pudo haber agregado ahí que para este último caso perderíamos toda la codificación agregada directamente ahí.

Magento Modular 

Sobrescribir un archivo .js de JavaScript dentro de la ruta en vendor prácticamente se puede realizar con cualquier archivo que este dentro de una estructura de Módulo, ya que este es el paradigma de programación de modularidad y flexibilidad en Magento 2, Magento modular como el artículo que publique hace un tiempo que menciona la estructuración de como está compuesta la mayoría de componentes en Magento el cual puedes visitar en MAGENTO MODULAR con esto quiero decir que mientras exista una estructura de carpetas con los elementos básicos, se puede muy fácil sobrescribir cualquier archivo JavaScript de ese módulo en particular.

Con esto quiero decir que mientras exista una estructura de carpetas con los elementos básicos, se puede muy fácil sobrescribir cualquier archivo JavaScript de ese módulo en particular, por ejemplo si muestro una imagen de la carpeta vendor podemos ver una serie de carpetas dentro como se muestra en la imagen:

Dentro de vendor se localiza la carpeta magento quien es la que concentra el 85% del core de Magento en donde encontraremos todos los módulos que hacen que la plataforma funcione como la conocemos:

Ahora bien, vamos a enfocarnos en un módulo en particular, para lo cual voy a mostrar el contenido del módulo Magento_Catalog así es como se nombra con los parámetros clave a este componente y esto lo podemos saber gracias a dos archivos, por un lado, el archivo de configuración module.xml y el archivo de registro del módulo registration.php ahora voy a mostrar el contenido de cada uno de estos archivo para que veamos exactamente en que parte se define este nombre.

module.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magento_Catalog" >
        <sequence>
            <module name="Magento_Eav"/>
            <module name="Magento_Cms"/>
            <module name="Magento_Indexer"/>
            <module name="Magento_Customer"/>
        </sequence>
    </module>
</config>

registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Magento_Catalog', __DIR__);

Aquí se puede apreciar ese valor clave del módulo que está compuesto por dos elementos, uno es el nombre del Namespace o bien en español es el espacio de nombre y es la carpeta principal en donde se encuentra almacenado el módulo, para este caso es en la carpeta magento posterior separado por un guion bajo se coloca el nombre de la carpeta del módulo para lo cual aquí se puede ver algo extraño, la carpeta se llama module-catalog en donde pensaríamos que solo debería llamarse catalog, pero a excepción del resto de carpetas solo aquellos elementos que estén compuestos por esta nomenclatura module- la configuración de ruteo indica que toma el valor a partir del primer guion medio por ejemplo para este caso module-catalog solo tomaría catalog y por ejemplo para el módulo de la carpeta llamado module-catalog-inventory tomaría catalog-inventory pero aquí estas dos últimas palabras las unirían en una sola y solo las separarían con mayúscula la primera letra por ejemplo quedaría catalogInventory el nombre final de este módulo estaría compuesto por Magento_CatalogIntentory, parase un lío, pero la verdad una vez que te acostumbras a entender la nomenclatura se te hace sencillo.

Como reemplazar un JavaScript del core de Magento nativo o cualquier archivo .js

Pues bien, habiendo dado la explicación anterior es el momento de pasar a un ejemplo, vamos a seguir con el mismo módulo “Magento_Catalog” vamos a suponer que necesitas sobrescribir o reemplazar el archivo Js llamado storage-manager.js, bien lo primero que necesitamos es ubicar el archivo en donde se encuentra, para lo cual ya sabemos que todos los archivo Js por regla general dependiendo si es frontend o backend que para este ejemplo estaremos hablando de frontend están ubicados aplicando las buenas prácticas de Magento en la carpeta web en la vista de la sección frontend así que buscaríamos aquí view/frontend/web una vez localizada esta sección buscaríamos una carpeta llamada js que dentro deberían estar organizados todos los archivos de JavaScript, puede ser hasta este punto que el archivo que se esté localizando este dentro de otras carpetas, pero ya sería muy sencillo encontrarlo, así que para este ejemplo está inmediatamente dentro de la carpeta js ahí encontraría el archivo storage-manager.js.

Ahora bien, localizar el archivo simplemente servirá para extraer el nombre clave del espacio de nombre más el nombre del módulo, para este ejemplo ya tenemos esto “Magento_Catalog” con ese valor vamos a definir un simple archivo de configuración RequireJS, por lo general recomiendo que esto se pueda realizar a través de un módulo custom te invito a revisar mi artículo como crear un módulo básico en Modulo Básico en Magento ahora para este ejemplo voy a crear un módulo básico en el espacio de nombre Marcgento y el módulo se llamaría Override así que tendría el resultado siguiente:

Este módulo contiene los archivos necesarios para que pueda funcionar, ahora la clave está en el archivo de configuración requirejs-config.js que contendría el siguiente contenido para sobrescribir el script storage-manager.js:

var config = {
	map:{
		'*':{
			'Magento_Catalog/js/storage-manager':'Marcgento_Override/js/storage-manager'
		}
	}
}

Aquí lo que se puede apreciar claramente son dos rutas de archivos, una es la nativa que a través del nombre clave del módulo indicamos cuál es el archivo que necesitamos mapear y posterior le indicamos la ruta del nuevo archivo que estaría concentrado en un módulo personalizado.

Ahora bien, lo último para finalizar este ejercicio es crear el archivo nuevo, dentro de la ruta para este ejemplo sería en Marcgento/Override/view/frontend/web/js/storage-manager.js el módulo completo quedaría así:

Claro está que ya con esto el script storage-manager.js se podría copiar tal cual y meter las modificaciones necesarios, solo tener cuidado como es que se trabaja la sobrescritura de elementos porque esto podría afectar nuestro proyecto, así que hay que tener mucho cuidado y validar cualquier cambio en un entorno de desarrollo.