Як завантажити власний 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: Викличте functionjs модуля у .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 (), наприклад вимагають (['jquery', 'bannerslider', 'domReady!], функція ($) {... код виконується лише після завантаження dom})
KAndy

Так, це буде дуже корисно.
Похвальний Раджпут

@KAndy, це залежить, якщо ви хочете, щоб сценарій виконувався останнім, чи не краще використовувати $ (window)? чи це не робить сценарій запускатися не тільки при читанні 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
помилка вимагає не визначено, тому що мій js завантажується до Requjs
простий хлопець
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.