Как добавить файл JS в веб-интерфейс для всех страниц

38

Я прочитал 3 страницы результатов Google о том, как загрузить файл JS для всех страниц, и все еще не могу это сделать.

У меня есть несколько сомнений, надеюсь, кто-нибудь сможет их убрать.

Нужно ли создавать модуль внутри app/codeвместе с requirejs-config.js? Или я могу requirejs-config.jsвместо этого поместить в мою тему?
Что я должен положить внутрь requirejs-config.js?
Как должен выглядеть код внутри моего .jsфайла? Я видел, что вы не можете использовать JQuery, document.readyи вы должны иметьdefine([
Что я должен положить внутрь define([?
Если у меня есть сторонние модули jQuery, нужно ли их редактировать, чтобы они работали?
Нужно ли где-нибудь поместить xml, чтобы сообщить magento, что файл my.js существует?
Если я создам модуль внутри app/codeсо всем кодом js, включит ли он весь материал на всех страницах? Как я могу этого достичь?

magento2 javascript requirejs Прашант Акаш
источник

65

Чтобы загрузить пользовательский main.jsфайл на всех страницах (в RequireJS-способе), это хороший способ:

1) Создать main.js

Создать main.jsв папке темы

<theme_dir>/web/js/main.js

с этим содержанием:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

Вкратце : мы объявляем зависимости в начале, например "jquery". В качестве параметра функции мы определяем имя переменной для использования зависимости внутри функции, например "jquery" --> $. Мы поместили весь наш пользовательский код в function($) { ... }.

2) Объявить main.jsс requirejs-config.jsфайлом

Создайте requirejs-config.jsфайл в папке темы:

<theme_dir>/requirejs-config.js

с этим содержанием:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"это путь к нашему обычаю main.js. Расширение ".js" не требуется.

Наши requirejs-config.jsбудут объединены с другими requirejs-config.jsопределенными в Magento.

RequireJS будет загружать наш main.jsфайл на каждой странице, разрешая зависимости и загружая файлы асинхронным способом.

Необязательно: Включая стороннюю библиотеку

Это способ включения сторонних библиотек.

1) Добавить библиотеку в web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Откройте requirejs-config.jsи добавьте этот контент:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

Это выглядит сложнее, чем на самом деле.

3) Добавьте зависимость внутри main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

Andrea
источник

Привет, Можете ли вы сказать, если я должен включить bootstrap.js здесь. Как я могу добавить это, чтобы загрузчик хорошо работал в моей теме. Благодарность!

anujeet

1

@anujeet Вы можете включить так bootstrap.jsже, как я включил slick.jsв приведенный выше пример. Для значения shim вы можете попытаться использовать это:, 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }как объяснено здесь: stackoverflow.com/a/13556882/3763649

Andrea

Смотрите мой require-config.js

var config = {  	deps: [ 		"js/animate", 		"js/incase", 		"js/confetti" 	],     paths: { 		"jquery.bootstrap":"js/bootstrap.min"     },     shim:{       'jquery.bootstrap':{ 		'deps':['jquery']       }     } };   require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']);

Моя миникарта перестает работать с этим

anujeet

@anujeet Лучше открыть другой вопрос с этой проблемой, сообщив о вашем require-config.js и если у вас есть какие-либо ошибки в консоли javascript. Если вы

Andrea

при включении большего количества js у меня появляются ошибки "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

7

Дублируйте файл:

Приложение / код / Magento / Тема / просмотр / интерфейс / расположение / default_head_blocks.xml

к

app / code / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

За дополнительной информацией:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

Удачи!

КСТАТИ, прочитайте официальный интерфейс DevDocs от magento, чтобы получить основные :)

Goldy
источник

Поскольку скрипт Bootstrap требует инициализации JQuery, его включение в заголовок не будет работать. Прочтите этот официальный документ. для получения дополнительной информации. :)

VS

6

Вы можете добавить файлы JS, используя xml, как показано ниже. Это добавит JS на всех страницах.

С пользовательским модулем:

Создайте default.xmlфайл в вашем модуле.

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

SCC
источник

2

Метод добавления js с использованием default_head_blocks.xmlфайла не будет работать для сторонних плагинов JQuery. Итак, если вы хотите добавить собственные плагины JQuery и использовать их, вам нужно будет использовать requirejs-config.jsфайл.

Чтобы ответить на ваши вопросы по одному:

1) и 2) Вам не нужно создавать модуль для добавления requirejs-config.jsфайла. Вы можете просто добавить его в это место:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Обратитесь к этому ответу для создания правильного requirejs-config.jsфайла.

3) Вам нужно будет перечислить зависимости вашего js-файла, прежде чем писать свои сценарии.

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

Приведенный выше код говорит, что вам понадобятся jquery и jquery ui для ваших скриптов.

4) Вам не нужно использовать, define([если вы не создаете плагин JavaScript.

5) Нет, вам не нужно редактировать их, но вам нужно будет указать их зависимость с помощью requirejs-config.jsфайла. Если у вас есть owl.carousel.min.jsв <vendor>/<theme>/web/js/owl.carousel.min.js, ваш requirejs-config.jsфайл будет выглядеть следующим образом :

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

В приведенном выше коде, пожалуйста, помните, что .jsдля файла нет. И теперь, чтобы использовать его в вашем JS

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

Если все работает хорошо, у вас должны быть ссылки на нижний колонтитул в слайдере.

6) и 7) Просто используйте метод, предложенный @Goldy, чтобы добавить свой js. Он добавит ваш файл JS на все страницы.

Для дальнейшего чтения вы можете посмотреть этот пост

Надеюсь это поможет.

В.С.
источник

1

Вот как я добавляю библиотеку dotdotdot в мою пользовательскую тему magento2.

1. Загрузите и добавьте Js Library в свою тему, следуя по пути:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Создайте файл requirejs темы следующим образом и дайте знать requirejs недавно добавленную библиотеку.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Используйте добавленную библиотеку в основном js-файле вашей темы следующим образом:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. и включите файл js вашей темы в заголовок вашего сайта следующим образом:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Вы можете добавить любую внешнюю библиотеку JS и пользовательский файл на каждую страницу в magento2.

Сайида
источник

Я пробовал это на стороне администратора, JS идет правильно, но ожидаемый результат не приходит

Naveenbos

Хороший ответ. Собираюсь попробовать. Есть ли способ указать определенную страницу, где нужен файл js.?

Мохаммед Джорайд

Для конкретной страницы перенесите содержимое «default_head_blocks.xml» в приведенном выше примере в ваш конкретный файл макета. Например, в случае страницы с информацией о продукте, добавьте этот XML в app / design / frontend / namespace / themename / Magento_Catalog / layout / catalog_product_view.xml

это было

Как добавить файл JS в веб-интерфейс для всех страниц

Ответы:

Необязательно: Включая стороннюю библиотеку