Magento2 - Cómo extender el widget jQuery (configurable.js)


16

Estoy creando una extensión que reemplaza la etiqueta de opciones configurables predeterminada 'Elegir una opción ...' con el nombre del atributo, por ejemplo 'Elegir un color ...'.

¿Cómo puedo extender (no anular) el widget jQuery configurable.js y solo modificar esta línea?

Sé por la documentación que puedo anular un widget jQuery, así que hice:

define([
    'jquery',
    'jquery/ui',
    'configurable' // usually widget can be found in /lib/web/mage dir
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {

    });

    return $.silvan.configurable;
});

¿Cómo puedo inicializar este archivo? ¿Debo cargarlo a través de requirejs-config? La función de mapa es solo para anular ¿verdad?

¿Es posible modificar solo esta línea? Se llama desde esta función:

_fillSelect: function (element) {}

Respuestas:


27

En primer lugar, debe asegurarse de que su módulo tenga Magento_ConfigurableProducten secuencia module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
        </sequence>
    </module>
</config>

Asegúrese de regenerar la lista de componentes config.php, de lo contrario se ignorará la secuencia ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Luego agregue el requirejs-config.jsarchivo en el view/frontenddirectorio con el código:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_ModuleName/js/configurable'
        }
    }
};

Finalmente agregue el configurable.jsarchivo en el view/frontend/web/jsdirectorio con:

define([
    'jquery',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {
        //code you want to override
    });

    return $.silvan.configurable;
});

No puede modificar una sola línea, pero puede modificar una sola función en su interior.


¿Cómo funciona la modificación de una función? ¿Cómo llamar a los padres?
Alex

Puede invocar funciones que no sean las que modificó como si fuera parte de su widget. Su silvan.configurablehereda automáticamente todo de padre.
Bartłomiej Szubert

2
Esto funciona muy bien, ¡gracias @Ideo! La recompensa se otorgará en 7 horas (límite de intercambio de pila). @Alex puede llamar al padre utilizando this._super (); función. Ver: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Silvan

¿hay algo más que hacer? porque mi archivo personalizado no se carga ... ¿fue exacto como se describe arriba :-(
roman204

1
¡Esto funciona muy bien! @ roman204 Tengo el mismo problema: asegúrese de tener el nodo "secuencia" en su archivo module.xml. Entonces es importante volver a cargar el orden del módulo. La única forma de hacerlo en este momento es deshabilitar y volver a habilitar el módulo donde coloca la "secuencia" en el archivo module.xml. (Más información: vea la parte azul en esta página: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.