Как загрузить пользовательский файл js модуля в magento 2?


9

Я создал модуль слайдера баннеров для magento 2. Я вызвал файл JS, используя следующие способы, и он работает нормально. В классе блоков я создал следующую функцию

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

и эта функция вызывается в bannerslider.phtmlфайле следующим образом.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

Но, в соответствии с механизмом зависимостей jQuery require.jsКак я могу это сделать?

Ответы:


29

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

введите описание изображения здесь

Шаг 1: Добавьте файл js вашего модуля в<Vendor>/<Module_Name>/view/<area>/web/js/

например <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Шаг 2: Создать requirejs-config.jsфайл под<Vendor>/<Module_Name>/view/<area>/

например <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Добавьте следующий код в requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

Примечание: вы можете установить имя вашего объекта согласно вашему выбору. В моем случае я установил как bannersliderи не добавляю расширение .js к имени файла вVendorName_ModuleName/js/flexslider

Шаг 3: Вызовите functionфайл js вашего модуля .phtmlследующим образом.

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

Это работает нормально для меня.

Трассировка: используйте Netвкладку, чтобы увидеть запрошенный URL-адрес загруженного файла JS или нет.

введите описание изображения здесь


4
лучше использовать 'domReady!' плагин вместо $ (window) .load (), например require (['jquery', 'bannerlider', 'domReady!], функция ($) {... код выполняется только после загрузки dom})
KAndy

Да, это будет очень полезно.
Praful Раджпут

@ K: Да, это зависит, если вы хотите, чтобы скрипт выполнялся последним, не лучше ли использовать $ (окно)? Разве это не заставляет скрипт работать не только при чтении DOM, но и при выполнении всех скриптов?
Лачезар Райчев

И этот способ не работает для меня ... говорит static / adminhtml / Magento / backend / en_US / gift.js 404 (не найден) Я очистил кэш и паб / статические ... бот нет .. не работает
Лачезар Райчев

поцарапайте это, это работает ... domReady! не работает, хотя ... как я могу сказать, чтобы скрипт запускался после того, как все другие скрипты были загружены, или этого нет в текущей методологии magent2?
Лачезар Райчев

4

Мой путь таков:

Шаг 1

Включите базовый файл javascript расширения, используя инструкции по компоновке.

Шаг 2

Требуйте другие файлы javascript расширения из базового файла с помощью RequireJS:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});

1
получена ошибка require не определена, потому что мой js загружается раньше, чем requirejs
простой парень
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.