JS dosyası tüm sayfalar için ön uçta nasıl eklenir


38

Tüm sayfalar için bir JS dosyasının nasıl yükleneceği hakkında 3 sayfa Google Results okudum ve hala yapamıyorum.

Birkaç şüphem var, umarım birileri onları temizleyebilir.

  1. Bir modül içini oluşturmak gerekiyor mu app/codeile requirejs-config.js? Yoksa requirejs-config.jsbunun yerine temamın içine bir şey koyabilir miyim ?

  2. İçine ne koymalıyım requirejs-config.js?

  3. Kodun dosyamda nasıl görünmesi gerekir .js? JQuery'nin kullanamayacağını document.readyve senin de olması gerektiğini gördüm.define([

  4. İçine ne koymalıyım define([?

  5. Eğer üçüncü parti jQuery modüllerine sahipsem, çalışması için onları düzenlemek zorunda mıyım?

  6. Magento'ya, my.js dosyasının var olduğunu söylemek için xml koymam gerekir mi?

  7. app/codeOrada tüm js kodlarını içeren bir modül oluşturursam , bütün sayfalara tüm içeriği ekler mi? Bunu nasıl başarabilirim?

Yanıtlar:


65

main.jsTüm sayfalara (RequireJS yolunda) özel bir dosya yüklemek için bu iyi bir yoldur:

1) Yarat main.js

main.jsTema klasörü içinde oluştur

<theme_dir>/web/js/main.js

bu içeriğe sahip:

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

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

});

Kısacası : Başlangıçta bağımlılıkları ilan ediyoruz, örn "jquery". Fonksiyonun bağımlılığını fonksiyonun parametresi olarak kullanmak için, örneğin fonksiyonun parametresi olarak tanımlarız "jquery" --> $. Tüm özel kodlarımızı içine koyarız function($) { ... }.

2) main.jsBir requirejs-config.jsdosya ile ilan et

requirejs-config.jsTema klasörü içinde bir dosya oluşturun :

<theme_dir>/requirejs-config.js

bu içeriğe sahip:

var config = {

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

};

"js/main"bizim özel yoludur main.js. ".Js" uzantısı gerekli değildir.

Bizim requirejs-config.jsdiğer birleştirilir requirejs-config.jsMagento tanımladı.

RequireJS dosyamızı main.jsher sayfaya yükleyerek bağımlılıkları çözer ve dosyaları zaman uyumsuz bir şekilde yükler.


İsteğe bağlı: Üçüncü taraf kitaplığı dahil

Üçüncü taraf kütüphanelerini dahil etmenin yolu budur.

1) Kütüphaneyi içine ekle web/js:

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

2)requirejs-config.js Bu içeriği aç ve ekle:

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

};

Aslında olduğundan daha karmaşık görünüyor.

3) İçinde bağımlılığı ekleyin main.js:

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

  // ...

});

Merhaba, Bootstrap.js'yi buraya dahil etmek zorunda olup olmadığımı söyleyebilir misiniz? Önyükleyicimin temamda iyi çalışması için nasıl ekleyebilirim? Teşekkürler!
anujeet

1
@anujeet Yukarıdaki örneğe bootstrap.jseklediğim şekilde ekleyebilirsiniz slick.js. Alt değer için, bunu kullanmayı deneyebilirsiniz: 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }burada açıklandığı gibi: stackoverflow.com/a/13556882/3763649
Andrea

Bkz. 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!']); Require -config.js Minicart'ım bununla çalışmayı
bıraktı

@anujeet Bu sorunla ilgili başka bir soruyu daha iyi açarak, request-config.js raporunuzu ve javascript konsolunda bazı hatalarınız varsa rapor edin. Sorunuzu buraya
Andrea

daha fazla js olduğunda "js / ScrollMagic.min", "js / debug.addIndicators.min" hatalarım var
yavonz15

6

Aşağıdaki gibi xml kullanarak JS dosyaları ekleyebilirsiniz. Bu, tüm sayfalara js ekleyecektir.

Özel modül ile:

default.xmlModülünüzde dosya oluşturun .

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>

6

Dosyayı çoğalt:

Uygulamanın / kod / Magento / Oyun / görüntülemek / kullanıcı arayüzü / düzeni / default_head_blocks.xml

için

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>

Daha fazla bilgi için:

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

İyi şanslar!

Btw magento ön uç devdocs resmi okumak için temel :)


Çünkü Bootstrap'in senaryosu JQuery'nin başlatılmasını gerektiriyor, çünkü baştakiler de işe yaramaz. Bu resmi dokümanı oku . daha fazla bilgi için. :)
VS

2

default_head_blocks.xmlDosyayı kullanarak js ekleme yöntemi 3. parti JQuery eklentileri için çalışmaz. Bu nedenle, özel JQuery eklentileri eklemek ve bunları kullanmak istiyorsanız, requirejs-config.jsdosyayı kullanmanız gerekir .

Sorularınızı tek tek cevaplamak için:

1) & 2) requirejs-config.jsDosyayı eklemek için bir modül oluşturmanıza gerek yok . Sadece bu konuma ekleyebilirsiniz:

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

Uygun bir dosya oluşturmak için bu cevaba bakınız requirejs-config.js.

3) Komut dosyalarınızı yazmadan önce js dosyanızın bağımlılıklarını listelemeniz gerekecektir.

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

Yukarıdaki kod, betikleriniz için jquery ve jquery ui'ye ihtiyacınız olacağını söylüyor.

4) define([Bir javascript eklentisi oluşturmadıkça kullanmanıza gerek yoktur .

5) Hayır, onları düzenlemenize gerek yoktur ancak requirejs-config.jsdosyayı kullanarak bağımlılıklarını belirtmeniz gerekir . Eğer varsa owl.carousel.min.jsiçinde <vendor>/<theme>/web/js/owl.carousel.min.js, senin requirejs-config.jsdosya aşağıdaki gibi görünecektir:

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

Yukarıdaki kodda, lütfen .jsdosya için bir dosya olmadığını unutmayın . Ve şimdi js'inde kullanmak için

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

Her şey yolunda giderse, altbilgi bağlantılarınızı bir kaydırıcıda tutmalısınız.

6) & 7) jG'nizi eklemek için @Goldy tarafından önerilen yöntemi kullanın. Js dosyanızı tüm sayfalara ekleyecektir.

Daha fazla okumak için bu yazıya bakabilirsiniz.

Bu yardımcı olur umarım.


1

Magento2 özel temamda dotdotdot kütüphanesini böyle ekliyorum.

1. Yolu izleyerek temanızda Js Kütüphanesi'ni indirip ekleyin:

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

2. Aşağıdaki gibi bir temanın requestjs dosyası oluşturun ve requjs yeni eklenen kütüphaneyi bilsin.

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

3. Temanın ana js dosyasındaki eklenen kütüphaneyi aşağıdaki gibi kullanın:

// 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. ve temanızın js dosyasını aşağıdaki şekilde sitenizin kafasına ekleyin:

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

Magento2'deki her sayfaya herhangi bir harici JS kütüphanesini ve özel dosyayı ekleyebilirsiniz.


Ben js doğru geliyor, bu yönetici tarafı denedi ancak beklenen sonuç gelmiyor
Naveenbos

Güzel cevap Deneyeceğim. Js dosyasının gerekli olduğu belirli bir sayfayı belirtmenin bir yolu var mı?
Mohammed Joraid,

Belirli bir sayfa için, yukarıdaki örnekteki "default_head_blocks.xml" içeriğini özel düzen dosyasına taşıyın. Örneğin, ürün ayrıntısı sayfasında, bu xml'yi app / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml
saiid
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.