Magento 2'ye jQuery Kütüphanesi Ekleme

Üçüncü taraf bir geliştirici Magento 2'ye nasıl jQuery kütüphanesi ekleyebilir?

Magento 2 onların ön uç temaları jQuery bir sürümünü içermekle birlikte, jQuery nesnesi değil genel ad alanında hemen kullanılabilir. Bunun Magento 2 jQuery çekmek için RequireJS kullandığından ve RequireJS gerekli olana kadar bir modül dosyası yüklemeyeceğine inanıyorum.

Bu, jQuery eklentileri için bir sorun oluşturur. Normalde, HTML ile böyle bir şeye benzeyen bir eklenti eklerdim

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

Ancak bu Magento 2 ile mümkün değildir. jquery.cookie.jsDosya jQuery eklentisini global jQuery nesnesini kullanarak tanımladığından, Magento 2'de bir jQuery is not definedhata ile başarısız olur .

Bir ön uç geliştirici, Magento 2'nin ön uç uygulamasına standart bir jquery eklenti kitaplığını nasıl eklemelidir?

Requirjs-config.js oluşturun \ Companyname \ Modulename \ view \ frontend \ requirjs-config.js ekle

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

Modülünüzdeki Js dosyanız Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Aşağıdaki sözdizimini kullanarak jquery eklemeniz

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

ikinci örnek

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Magento Belgelerinden alıntı yapıyorum .

Üçüncü taraf eklentisine bağımlılık oluşturmak için aşağıdaki yapılandırma dosyalarında bir dolgu belirleyin:

Requirjs-config.js dosyasında:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Ardından üçüncü taraf eklenti kodunuzu Temanıza veya Modülünüze ekleyin: "web / js / 3-rd-party-plugin.js" şöyle:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

Eklenti dosyanızı herhangi bir değişiklik yapmadan eklediğiniz için bu çözüm uygundur. Eklenti yazarı güncellediğinde js dosyasını değiştirin veya hatta bir cdn kullanın!

Yapılacak en iyi şey , bu eklentileri / kütüphaneleri dahil etmek için bir Magento 2 Modülü veya Tema kullanmaktır. Tavsiye edilen yol ve en iyi uygulamadır .

Yöntem 1> TEMA : Javascript / jquery kitaplığı temayla ilgiliyse (Sistemin görünümünü ve izlenimini değiştirmek için).

• Özel bileşen kaynak dosyasını aşağıdaki konumlardan birine yerleştirin
  [theme_dir] / web / js /
• Senin yerleştirin requirejs-config.js dosyayı
  [theme_dir]

Yöntem 2> MODÜL : Javascript / jquery kitaplığı belirli bir iş işleviyle ilişkiliyse veya bir Magento özelliği kullanıyorsa. Bir modülün içine girmelidir.

• Özel bileşen kaynak dosyasını aşağıdaki konumlardan birine yerleştirin
  [module_dir] / view / frontend / web / js /

• Senin yerleştirin requirejs-config.js dosyayı
  [module_dir] / view / kullanıcı arayüzü /

Magento 2, varsayılan Magento bileşenlerinin ve widget'larının kaynak kodunun değiştirilmemesini önemle tavsiye eder. Tüm özelleştirmeler özel modüllerde veya temalarda uygulanmalıdır.

Alan, jQuery UI Widget fabrikasının özel bir durumu var. AMD'yi uyumlu hale getirmek için lütfen aşağıdaki bağlantıyı kontrol edin.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/