วิธีการใช้ jquery library ใน Magento 2


26

ฉันกำลังสร้างชุดรูปแบบ Magento ที่ฉันต้องรวม jQuery

เมื่อฉันเพิ่มนี้ใน<link src="js/jquery-1.7.1.js"/> headมันใช้งานได้ แต่ฟังก์ชั่นจาวาสคริปต์วีโอไอพีไม่ทำงาน วิธีใช้ Magento 2 ที่สร้างขึ้นในไลบรารี jQuery ในธีมที่กำหนดเอง


jquery ถูกเพิ่มใน m2 แล้ว หากคุณต้องการ jquery ในไฟล์ phtml ที่กำหนดเองของคุณให้ใช้มันโดย require.js
Shaheer Ali

ใช่ฉันรู้ว่าฉันต้องการใช้ในธีมที่กำหนดเอง .. ฉันมีไฟล์ที่ขึ้นอยู่กับห้องสมุด jquery
Qaisar Satti

1
ใช้ต้องการ (['jquery', 'jquery / ui'], ฟังก์ชั่น ($) {}
Shaheer Ali

คุณสามารถเพิ่ม extrnal js โดยใช้ <script src = "[Vendor_Ext] :: js / custom.js" />
Shaheer Ali

ตั้งแต่เมื่อไหร่ที่คุณรวม js ด้วยlinkแท็ก ??? คุณต้องใช้แท็กสคริปต์
Black

คำตอบ:


52

หากคุณกำลังเพิ่มไลบรารี js ที่กำหนดเองนอกเหนือจาก jQuery คุณจะต้องรวมรหัส js ภายในต้องการฟังก์ชันดังนี้:

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

ตัวอย่าง:

ภายในฟังก์ชั่นต้องการคุณสามารถเข้าถึงฟังก์ชั่น jQuery ได้โดยตรงโดยใช้jQueryนามแฝงแบบสั้นหรือ$เครื่องหมายดอลลาร์ ตัวอย่างเช่น:

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Page loaded.");
  });
});

นี่คือตัวอย่างที่มี$นามแฝง:

require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    alert("Page loaded.");
  });
});

เป็นไปได้หรือไม่ที่จะรวมต้นแบบ.js?
Slimshadddyyy

@Vikram ใช่เพียงเพิ่มองค์ประกอบ 'ต้นแบบ' ลงในอาร์เรย์ที่คุณส่งไปยังฟังก์ชัน () ที่ต้องการ
Roman Glushko

4

Jquery / JqueryUI ได้เพิ่มใน magento2 คุณสามารถดูได้ใน lib / web / jquery

หากต้องการใช้ jquery หรือวิดเจ็ตการโทรของวีโอไอพี จากไฟล์ js ของคุณ

define([
  'jquery',
  'jquery/ui',
  'mage/<widget.name>' found in /lib/web/mage dir
], function($){

$.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, {  CODE HERE... });

return $.<your_namespace>.<your_widget_name>;

});

3
ฉันลองแล้วและมันไม่ทำงานคุณสามารถวางบางสิ่งบางอย่างตามธีม
Qaisar Satti
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.