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.