Magento2 - Как расширить виджет jQuery (configurable.js)


17

Я создаю расширение, которое заменяет ярлык настраиваемых опций по умолчанию «Выберите опцию ...» на имя атрибута, например, «Выберите цвет ...».

Как я могу расширить (не переопределить!) Виджет jQuery configurable.js и изменить только эту строку?

Из документации я знаю, что могу переопределить виджет jQuery, поэтому я сделал:

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

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

    });

    return $.silvan.configurable;
});

Как я могу инициализировать этот файл? Должен ли я загрузить его через requirejs-config? Функция карты только для переопределения, верно?

Можно ли изменить только эту строку? Это вызывается из этой функции:

_fillSelect: function (element) {}

Ответы:


28

Во-первых, вам нужно убедиться, что ваш модуль имеет Magento_ConfigurableProductпоследовательность в 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>

Убедитесь, что список компонентов обновлен config.php, иначе последовательность будет игнорироваться ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html ).

Затем добавьте requirejs-config.jsфайл в view/frontendкаталог с кодом:

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

Наконец добавьте configurable.jsфайл в view/frontend/web/jsкаталог с помощью:

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

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

    return $.silvan.configurable;
});

Вы не можете изменить одну строку, но вы можете изменить одну функцию внутри.


Как работает изменение функции? Как позвонить родителю?
Алекс

Вы можете вызывать функции, отличные от тех, которые вы изменяете, как если бы они были частью вашего виджета. Ваш silvan.configurableавтоматически наследует все от родителя.
Бартломей Шуберт

2
Это прекрасно работает, спасибо @Ideo! Щедрость будет предоставлена ​​через 7 часов (предел обмена стека). @ Алекс, вы можете вызвать родителя с помощью this._super (); функция. Смотрите: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Сильван

есть еще что-нибудь? потому что мой пользовательский файл не будет загружен ... сделал это точно, как описано выше :-(
roman204

1
Это прекрасно работает! @ roman204 У меня та же проблема: убедитесь, что у вас есть узел sequence в файле module.xml. Тогда важно перезагрузить модуль заказа. Единственный способ сделать это в настоящий момент - отключить и снова включить модуль, в который вы поместили «последовательность» в файл module.xml. (Подробнее: посмотрите синюю часть на этой странице: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.