Magento2 - Jak rozszerzyć widget jQuery (configurable.js)

18

Tworzę rozszerzenie, które zastępuje domyślną konfigurowalną etykietę opcji „Wybierz opcję ...” nazwą atrybutu, na przykład „Wybierz kolor ...”.

Jak mogę rozszerzyć (nie przesłonić!) Widget jQuery configurable.js i modyfikować tylko ten wiersz?

Wiem z dokumentacji, że mogę zastąpić widget jQuery, więc zrobiłem:

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

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

    });

    return $.silvan.configurable;
});

Jak mogę zainicjować ten plik? Czy powinienem go załadować za pomocą config-wymagań? Funkcja mapy służy tylko do przesłonięcia, prawda?

Czy można zmodyfikować tylko ten wiersz? Jest wywoływany z tej funkcji:

_fillSelect: function (element) {}
Borowy
źródło

Odpowiedzi:

29

Po pierwsze, musisz upewnić się, że moduł ma Magento_ConfigurableProductkolejno 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>

Należy ponownie wygenerować listę komponentów, w config.phpprzeciwnym razie sekwencja zostanie zignorowana ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Następnie dodaj requirejs-config.jsplik do view/frontendkatalogu z kodem:

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

Na koniec dodaj configurable.jsplik do view/frontend/web/jskatalogu za pomocą:

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

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

    return $.silvan.configurable;
});

Nie możesz modyfikować pojedynczej linii, ale możesz modyfikować jedną funkcję wewnątrz.

Bartłomiej Szubert
źródło
Jak działa modyfikacja funkcji? Jak zadzwonić do rodzica?
Alex,
Możesz wywoływać funkcje inne niż zmodyfikowane tak, jak to było częścią widżetu. Twoje silvan.configurableautomatycznie dziedziczy wszystko od rodzica.
Bartłomiej Szubert,
2
Działa to świetnie, dziękuję @Ideo! Nagroda zostanie przyznana w ciągu 7 godzin (limit wymiany stosów). @Alex możesz wywołać rodzica za pomocą this._super (); funkcjonować. Zobacz: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Silvan
czy jest coś jeszcze do zrobienia? ponieważ mój plik niestandardowy nie zostanie załadowany ... czy zrobił to dokładnie tak, jak opisano powyżej :-(
roman204
1
To działa świetnie! @ roman204 Mam ten sam problem: upewnij się, że masz węzeł „sekwencji” w pliku module.xml. Następnie ważne jest, aby ponownie załadować zamówienie modułu. W tej chwili jedynym sposobem na to jest wyłączenie i ponowne włączenie modułu, w którym umieściłeś „sekwencję” w pliku module.xml. (Więcej informacji: zobacz niebieską część na tej stronie: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron