Расширение / переопределение JS в Magento 2


34

Как Magento2 использует RequireJS для загрузки скриптов, и нет более кожи папки, я застрял с проблемой:

Как я могу заменить JS-файл модуля Magento моей модифицированной версией?

Например - opc-checkout-method.js, который принадлежит расширению Magento_Checkout. Насколько я вижу, он не определен в файле requirejs-config.js.

Мое расширение загружается после Magento_Checkout , поэтому его данные requirejs-config.js добавляются в конце результирующего файла requirejs-config.

Или я должен сделать это другим способом, не заменяя весь сценарий?


1
Я полагаю, вы не должны заменять файл в большей степени, чем заменять функцию (и) объекта, загруженного файлом.
Питер О'Каллаган

Ответы:


93

Папки скинов больше нет, но вы все еще можете использовать темы.

В качестве доказательства концепции я использовал пример с op-checkout-method.jsэтим и этим.

Предпосылки:

  • Magento2-beta11 установлен
  • Тема по умолчанию активна (пусто).
  • В этой pub/staticпапке нет файлов (удалите папку pub / static / frontend)

Действия:

  • Скопировал op-checkout-method.jsфайл из его местоположения модуля app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jsв пустую тему, чтобыapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • отредактировал файл клона и добавил console.log('something')или alert('something')в _createфункцию mage.opcCheckoutMethodвиджета.
  • очищен кеш браузера.

Результат:

  • Когда загружается страница оформления заказа, я вижу свое предупреждение или текст, записанный в консоли.

Связанная информация:

Если я запускаю из cli php dev/tools/Magento/Tools/View/deploy.php(скрипт, который публикует статические ресурсы), мой новый файл js помещается вpub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[РЕДАКТИРОВАТЬ]

Я нашел способ сделать это через модуль.

В [Namespace]/[Module]/view/frontend/requirejs-config.jsдобавление это:

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

Затем создайте файл [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jsс вашим контентом.

В целях тестирования я клонировал исходный файл и просто добавил еще раз console.logв _createфункцию.

Также не забудьте регенерировать публичные ресурсы для внешнего интерфейса.


Спасибо, Мариус! Можно ли делать подобные вещи внутри расширения?
DmitryR

Я не думаю, что вы фургон делаете это из расширения. это было невозможно в magento 1, если вы полностью не изменили шаблон оформления заказа. Но я буду искать способ сделать это.
Мариус

Еще раз спасибо, Мариус. Я пытаюсь реализовать настраиваемую проверку, которая переопределяет по умолчанию, и я застрял с переопределениями JS.
DmitryR

1
@DmitryR. Смотрите мое обновление к ответу.
Мариус

место для requirejs-config.js теперь - Vendor / Module / view / frontend / requirejs-config.js
Евгений Богданович,

11

Вот официальный документ о расширении / замене компонентов JS по умолчанию: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Обратная связь приветствуется!


3
Добро пожаловать в MagentoSE. Этот ответ будет более полезен для будущих пользователей, если вы добавите ответ здесь, а не просто ссылку. Если в будущем связь прекратится, поисковики не найдут информацию, на которую вы ссылаетесь.
AreDubya

2
Это справедливо, но мы добавляем 301 переадресацию при перемещении тем, чтобы минимизировать риск 404.
Стив Джонсон
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.