การเพิ่ม jQuery Library ไปยัง Magento 2

นักพัฒนาบุคคลที่สามสามารถเพิ่มห้องสมุด jQuery ลงใน Magento 2 ได้อย่างไร?

ในขณะที่ Magento 2 รวมถึงรุ่นของ jQuery ในธีมส่วนหน้าวัตถุ jQuery จะไม่สามารถใช้งานได้ทันทีในเนมสเปซส่วนกลาง ฉันเชื่อว่านี่เป็นเพราะ Magento 2 ใช้ RequireJS เพื่อดึงใน jQuery และ RequireJS จะไม่โหลดไฟล์โมดูลจนกว่าจะต้องการ

สิ่งนี้นำเสนอปัญหาสำหรับปลั๊กอิน jQuery โดยปกติฉันจะรวมปลั๊กอินที่มี HTML ซึ่งมีลักษณะเช่นนี้

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

อย่างไรก็ตามสิ่งนี้ไม่สามารถทำได้กับ Magento 2 เนื่องจากjquery.cookie.jsไฟล์กำหนดปลั๊กอิน jQuery โดยใช้วัตถุ jQuery ทั่วโลกมันจะล้มเหลวใน Magento 2 โดยมีjQuery is not definedข้อผิดพลาด

นักพัฒนาส่วนหน้าควรรวมไลบรารี่ปลั๊กอิน jquery มาตรฐานไว้ในแอปพลิเคชันส่วนหน้าของ Magento 2 อย่างไร

สร้าง requirejs-config.js Companyname \ Modulename \ view \ frontend \ requirejs-config.js เพิ่ม

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

ไฟล์ Js ของคุณในโมดูลชื่อ บริษัท \ Modulename \ view \ frontend \ web \ js \ flexslider.js
คุณเพียงเพิ่ม jquery lib โดยใช้ไวยากรณ์ต่อไปนี้

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

ตัวอย่างที่สอง

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

ฉันพูดวีโอไอพีเอกสาร

ในการสร้างการพึ่งพาบนปลั๊กอินของ บริษัท อื่นให้ระบุ shim ในไฟล์การกำหนดค่าต่อไปนี้:

ใน requirejs-config.js ของคุณ:

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

จากนั้นให้รวมโค้ดปลั๊กอินของบุคคลที่สามไว้ในธีมหรือโมดูลของคุณ: "web / js / 3-rd-party-plugin.js" ดังนี้:

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

วิธีการแก้ปัญหานี้ดีเพราะคุณรวมไฟล์ปลั๊กอินของคุณโดยไม่มีการดัดแปลงใด ๆ เพียงแค่แทนที่ไฟล์ js เมื่ออัปเดตผู้เขียนปลั๊กอินหรือแม้แต่ใช้ cdn!

สิ่งที่ดีที่สุดที่ควรทำคือใช้ Magento 2 ModuleหรือThemeเพื่อรวมปลั๊กอิน / ไลบรารีดังกล่าว มันเป็นวิธีที่แนะนำและการปฏิบัติที่ดีที่สุด

วิธีที่ 1> ธีม : หากไลบรารีjavascript / jqueryเป็นธีมที่เกี่ยวข้อง (เพื่อเปลี่ยนรูปลักษณ์ของระบบ)

• วางไฟล์ต้นฉบับคอมโพเนนต์ที่กำหนดเองในหนึ่งในตำแหน่งต่อไปนี้
  [theme_dir] / web / js /
• วางไฟล์requirejs-config.jsของคุณใน
  [theme_dir]

วิธีที่ 2> MODULE : หากไลบรารีjavascript / jqueryเกี่ยวข้องกับฟังก์ชันธุรกิจเฉพาะหรือจัดการคุณสมบัติ Magento มันควรจะเข้าไปในโมดูล

• วางไฟล์ซอร์สคอมโพเนนต์ที่กำหนดเองในหนึ่งในตำแหน่งต่อไปนี้
  [module_dir] / view / frontend / web / js /

• วางไฟล์requirejs-config.jsของคุณใน
  [module_dir] / view / frontend /

Magento 2 ไม่แนะนำให้เปลี่ยนซอร์สโค้ดของคอมโพเนนต์และวิดเจ็ตเริ่มต้น การปรับแต่งทั้งหมดจะต้องดำเนินการในโมดูลหรือธีมที่กำหนดเอง

อลันโรงงาน jQuery UI Widget มีกรณีพิเศษ เพื่อให้ AMD สามารถใช้งานร่วมกันได้กรุณาตรวจสอบลิงค์ต่อไปนี้

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