Jak dodać plik JS w interfejsie dla wszystkich stron

38

Przeczytałem 3 strony wyników Google o tym, jak załadować plik JS dla wszystkich stron i nadal nie jestem w stanie tego zrobić.

Mam kilka wątpliwości, mam nadzieję, że ktoś je rozwiąże.

Czy muszę utworzyć moduł wewnątrz app/codeza pomocą requirejs-config.js? Czy mogę requirejs-config.jszamiast tego wstawić do środka motyw?
Co powinienem włożyć do środka requirejs-config.js?
Jak powinien wyglądać kod w moim .jspliku? Widziałem, że nie możesz używać jQuery document.readyi musisz miećdefine([
Co powinienem włożyć do środka define([?
Jeśli mam moduły jQuery innych firm, czy muszę je edytować, aby działały?
Czy muszę gdzieś umieścić xml, aby poinformować magento, że plik my.js istnieje?
Jeśli utworzę moduł app/codez całym kodem js, czy zawiera on wszystkie elementy na wszystkich stronach? Jak mogę to osiągnąć?

magento2 javascript requirejs Prashant Akash
źródło

65

Aby załadować main.jsplik niestandardowy na wszystkie strony (w sposób RequireJS), jest to dobry sposób:

1) Utwórz main.js

Utwórz main.jsw folderze motywu

<theme_dir>/web/js/main.js

z tą zawartością:

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

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

});

W skrócie : deklarujemy zależności na początku, np "jquery". Jako parametr funkcji definiujemy nazwę zmiennej do wykorzystania zależności w funkcji, np "jquery" --> $. Umieszczamy w nim cały nasz niestandardowy kod function($) { ... }.

2) Zadeklaruj main.jsza pomocą requirejs-config.jspliku

Utwórz requirejs-config.jsplik w folderze motywu:

<theme_dir>/requirejs-config.js

z tą zawartością:

var config = {

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

};

"js/main"jest ścieżką do naszego zwyczaju main.js. Rozszerzenie „.js” nie jest wymagane.

Nasze requirejs-config.jszostaną połączone z innymi requirejs-config.jszdefiniowanymi w Magento.

RequireJS załaduje nasz main.jsplik na każdej stronie, rozwiązując zależności i ładując pliki w sposób asynchroniczny.

Opcjonalnie: w tym biblioteka innej firmy

W ten sposób można włączyć biblioteki stron trzecich.

1) Dodaj bibliotekę w web/js:

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

2) Otwórz requirejs-config.jsi dodaj tę treść:

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',
    }
  }

};

Wygląda na bardziej skomplikowane niż w rzeczywistości.

3) Dodaj zależność w ramach main.js:

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

  // ...

});

Andrea
źródło

Cześć. Czy możesz powiedzieć, czy muszę tutaj dołączyć plik bootstrap.js. Jak mogę go dodać, aby bootstrap działał dobrze w moim motywie. Dzięki!

anujeet

1

@anujeet Możesz uwzględnić bootstrap.jsw taki sam sposób, jak slick.jsw powyższym przykładzie. Dla wartości shim można spróbować użyć tego: 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }jak wyjaśniono tutaj: stackoverflow.com/a/13556882/3763649

Andrea

Zobacz mój wymagany-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!']);

Mój minicart przestaje z tym

pracować

@anujeet Lepiej otwórz kolejne pytanie z tym problemem, zgłaszając swój plik config-config.js i jeśli masz jakieś błędy w konsoli javascript. Jeśli podasz tutaj swoje pytanie, chętnie Ci pomogę :)

Andrea

kiedy dołączam więcej js mam błędy „js / ScrollMagic.min”, „js / debug.addIndicators.min”

yavonz15

6

Możesz dodać pliki JS za pomocą xml jak poniżej. Spowoduje to dodanie js na wszystkich stronach.

Z niestandardowym modułem:

Utwórz default.xmlplik w swoim module.

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
źródło

6

Duplikuj plik:

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

Do

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>

Po więcej informacji:

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

Powodzenia!

BTW przeczytał frontend devdocs oficjalny z magento, aby uzyskać podstawowe :)

Goldy
źródło

Ponieważ skrypt Bootstrap wymaga zainicjowania JQuery, włączenie go w głowie nie będzie działać. Przeczytaj ten oficjalny dokument. po więcej informacji. :)

VS

2

Metoda dodawania js przy użyciu default_head_blocks.xmlpliku nie będzie działać w przypadku wtyczek JQuery innych firm. Jeśli więc chcesz dodać niestandardowe wtyczki JQuery i korzystać z nich, musisz użyć requirejs-config.jspliku.

Aby odpowiadać na pytania jeden po drugim:

1) i 2) Nie musisz tworzyć modułu, aby dodać requirejs-config.jsplik. Możesz po prostu dodać go w tej lokalizacji:

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

Zapoznaj się z tą odpowiedzią, aby utworzyć odpowiedni requirejs-config.jsplik.

3) Przed napisaniem skryptów musisz podać zależności pliku js.

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

Powyższy kod mówi, że będziesz potrzebować jquery i jquery ui dla swoich skryptów.

4) Nie musisz używać, define([chyba że tworzysz wtyczkę javascript.

5) Nie, nie musisz ich edytować, ale musisz określić ich zależność za pomocą requirejs-config.jspliku. Jeśli masz owl.carousel.min.jsw <vendor>/<theme>/web/js/owl.carousel.min.jsTwój requirejs-config.jsplik będzie wyglądał następująco:

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

W powyższym kodzie pamiętaj, że nie ma .jspliku. A teraz, aby użyć go w swoim js

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

Jeśli wszystko działa dobrze, linki stopki powinny znajdować się w suwaku.

6) i 7) Wystarczy użyć metody sugerowanej przez @Goldy, aby dodać swoją wersję js. Spowoduje to dodanie pliku js do wszystkich stron.

Do dalszego czytania możesz zajrzeć na ten post

Mam nadzieję że to pomoże.

VS
źródło

1

W ten sposób dodaję bibliotekę dotdotdot do niestandardowego motywu magento2.

1. Pobierz i dodaj bibliotekę Js do swojego motywu, postępując zgodnie ze ścieżką:

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

2. Utwórz plik wymagań dla motywu w następujący sposób i powiadom go o nowo dodanej bibliotece.

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

3. Użyj dodanej biblioteki w głównym pliku js kompozycji w następujący sposób:

// 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. i dołącz plik js motywu do głowy witryny w następujący sposób:

// 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>

Możesz dodać dowolną zewnętrzną bibliotekę JS i niestandardowy plik na każdej stronie w magento2.

saiid
źródło

Próbowałem to jest po stronie administratora, js nadchodzi poprawnie, ale oczekiwany wynik nie nadchodzi

Naveenbos

Niezła odpowiedź. Spróbuję Czy istnieje sposób określenia określonej strony, na której potrzebny jest plik js.?

Mohammed Joraid

W przypadku określonej strony przenieś zawartość „default_head_blocks.xml” w powyższym przykładzie do określonego pliku układu. Na przykład w przypadku strony ze szczegółami produktu dodaj ten plik xml w aplikacji / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml

saiid

Jak dodać plik JS w interfejsie dla wszystkich stron

Odpowiedzi:

Opcjonalnie: w tym biblioteka innej firmy