Ampliación / anulación de JS en Magento 2

34

Como es Magento2 usando RequireJS para los scripts de carga, y no hay más piel carpeta, me he pegado con un problema:

¿Cómo puedo reemplazar el archivo JS del módulo de Magento por mi versión modificada?

Por ejemplo, el opc-checkout-method.js que pertenece a la extensión Magento_Checkout. No está definido en el archivo requirejs-config.js, por lo que puedo ver.

Mi extensión se carga después de Magento_Checkout , por lo que sus datos requirejs-config.js se agregan al final del archivo requirejs-config resultante.

¿O debería hacerlo de alguna otra manera, sin reemplazar todo el script?

DmitryR
fuente
1
Me imagino que no debería reemplazar el archivo tanto como reemplazar las funciones en el objeto cargado por el archivo.
Peter O'Callaghan

Respuestas:

93

No hay más carpetas de máscaras, pero aún puede usar temas.

Como prueba de concepto, utilicé tu ejemplo con op-checkout-method.jsesto y esto.

Precondiciones

  • Magento2-beta11 instalado
  • Tema predeterminado activo (en blanco).
  • No se generan archivos en la pub/staticcarpeta (elimine la carpeta pub / static / frontend)

Comportamiento:

  • Copió el op-checkout-method.jsarchivo de su ubicación de módulo app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jsal tema en blanco paraapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • editó el archivo de clonación y agregó un console.log('something')o alert('something')en la _createfunción del mage.opcCheckoutMethodwidget.
  • caché borrado del navegador.

Resultado:

  • Cuando se carga la página de pago, veo mi alerta mostrada o el texto registrado en la consola.

Información relacionada:

Si ejecuto desde cli php dev/tools/Magento/Tools/View/deploy.php(el script que publica los recursos estáticos), mi nuevo archivo js se coloca enpub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[EDITAR]

Encontré una manera de hacerlo a través de un módulo.

En [Namespace]/[Module]/view/frontend/requirejs-config.jsagregar esto:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Luego crea el archivo [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jscon tu contenido.

Para fines de prueba, cloné el archivo original y simplemente agregué nuevamente a console.logen la _createfunción.

También recuerde regenerar los recursos públicos para frontend.

Marius
fuente
Gracias Marius! ¿Es posible hacer cosas similares dentro de la extensión?
DmitryR
No creo que hagas eso desde una extensión. eso no fue posible en magento 1 a menos que haya cambiado completamente la plantilla de pago. Pero buscaré una manera de hacerlo.
Marius
Gracias de nuevo, Marius. Estoy tratando de implementar un pago personalizado, que anula el predeterminado, y estoy atascado con las anulaciones de JS.
DmitryR
1
@DmitryR. Vea mi actualización de la respuesta.
Marius
el lugar para requirejs-config.js ahora es Vendor / Module / view / frontend / requirejs-config.js
Eugen Bogdanovich
11

Aquí está el documento oficial sobre la extensión / reemplazo de componentes JS predeterminados: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Comentarios son bienvenidos!

Alex
fuente
3
Bienvenido a MagentoSE. Esta respuesta sería más útil para los futuros usuarios si agrega la respuesta aquí, en lugar de solo el enlace. Si el enlace se rompe en el futuro, los buscadores no encontrarán la información a la que hace referencia.
AreDubya
2
Ese es un punto justo, pero agregamos redireccionamientos 301 cuando los temas se mueven para minimizar el riesgo de 404.
Steve Johnson