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.