Розширення / переосмислення JS у Magento 2


34

Оскільки Magento2 використовує RequireJS для завантаження сценаріїв, а папки шкіри більше немає , у мене виникла проблема:

Як можна замінити файл JS модуля Magento моєю модифікованою версією?

Наприклад - opc-checkout-method.js, який належить до розширення Magento_Checkout. Наскільки я не бачу, це не визначено у файлі Requjs-config.js.

Моє розширення завантажується після Magento_Checkout , тому його datajs-config.js дані додаються в кінці результуючого файлу Requjs-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')у нього ._createmage.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

[EDIT]

Я знайшов спосіб зробити це за допомогою модуля.

В [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функції.

Також пам’ятайте про відновлення державних ресурсів для інтернету.


Спасибі, Маріусе! Чи можна робити подібні речі всередині розширення?
ДмитроР

Я не думаю, що ти це робиш із розширення. це не було можливо в magento 1, якщо ви повністю не змінили шаблон оформлення каси. Але я буду шукати спосіб це зробити.
Маріус

Ще раз дякую, Маріусе. Я намагаюся реалізувати індивідуальне замовлення, яке переосмислює стандартне замовлення, і я застряг із перевірками JS.
ДмитроР

1
@DmitryR. Дивіться моє оновлення відповіді.
Маріус

місце для Requjs-config.js зараз Vendor / Module / view / frontend / Requjs-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.