Magento 2'de özel modül js dosyası nasıl yüklenir?


9

Magento 2 için banner slider modülü oluşturduk. JS dosyasını aşağıdaki yolları ve onun iyi çalışıyor kullanarak çağırdım. Blok sınıfında aşağıdaki fonksiyonu oluşturdum

public function getBaseJs($fileName){

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

ve bu işlev bannerslider.phtmldosyada aşağıdaki şekilde çağrılır .

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

Ancak, jQuery bağımlılık mekanizmasına göre require.jsNasıl yapabilirim?

Yanıtlar:


29

Sonunda, benim sorgu için çözüm var. Aşağıdaki gibi ayrıntılı olarak paylaşmak istiyorum.

resim açıklamasını buraya girin

Adım 1: Aşağıdaki modül js dosyanızı<Vendor>/<Module_Name>/view/<area>/web/js/

Örneğin <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

2. Adım:requirejs-config.js altında dosya oluşturun<Vendor>/<Module_Name>/view/<area>/

Örneğin <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Şu kodu ekle: requirejs-config.js

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

Not: nesne adınızı istediğiniz gibi ayarlayabilirsiniz. Benim durumumda olarak ayarladım bannersliderve dosya adına .js uzantısını eklemiyorumVendorName_ModuleName/js/flexslider

Adım 3:function modül js .phtmldosyasında aşağıdaki şekilde arayın .

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

Benim için iyi çalışıyor.

İzleme: NetYüklenen js dosyasının istenen URL'sini görmek için sekmeyi kullanın .

resim açıklamasını buraya girin


4
'domReady!' kullanmak daha iyi $ (window) .load () yerine eklenti, örneğin requir (['jquery', 'bannerlider', 'domReady!], işlev ($) {... kod yalnızca dom yüklendikten sonra çalıştır})
KAndy

Evet, çok faydalı olacak.
Praful Rajput

@KAndy, betiğin en son yürütülmesini istiyorsanız, $ (window) kullanmak daha iyi değil midir? bu, komut dosyasını yalnızca DOM okunduğunda değil, tüm komut dosyaları yürütüldüğünde çalıştırmaz mı?
Lachezar Raychev

Ve bu şekilde benim için çalışmıyor ... statik / adminhtml / Magento / backend / en_US / gift.js 404 (Bulunamadı) Önbelleği temizledim ve pub / statik ... bot hayır .. çalışmıyor
Lachezar Raychev

çizik, çalışıyor ... domReady! olsa çalışmıyor ... nasıl bir komut dosyası diğer tüm komut dosyaları yüklendikten sonra çalıştırmak için söyleyebilirim, ya da bu geçerli magent2 yönteminde yok?
Lachezar Raychev

4

Benim yolum:

Aşama 1

Düzen talimatlarını kullanarak bir uzantının temel javascript dosyasını ekleyin.

Adım 2

RequireJS ile uzantının diğer javascript dosyalarını temel dosyadan isteyin:

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
bir hata var gerektiren tanımlanmadı, çünkü benim js requirjs önce yüklenir
basit adam
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.