วิธีเพิ่มไฟล์ JS ในส่วนหน้าสำหรับทุกหน้า


38

ฉันอ่าน Google Results 3 หน้าเกี่ยวกับวิธีโหลดไฟล์ JS สำหรับทุกหน้าและยังไม่สามารถทำได้

ฉันมีข้อสงสัยสองสามหวังว่าจะมีใครซักคนออกมา

  1. ฉันจำเป็นต้องสร้างโมดูลภายในapp/codeด้วยrequirejs-config.jsหรือไม่? หรือฉันสามารถใส่requirejs-config.jsในชุดรูปแบบของฉันแทน?

  2. ฉันควรใส่requirejs-config.jsอะไรเข้าไป

  3. รหัสควรมีลักษณะอย่างไรใน.jsไฟล์ของฉัน ฉันเห็นว่าคุณไม่สามารถใช้ jQuery document.readyและคุณต้องมีdefine([

  4. ฉันควรใส่define([อะไรเข้าไป

  5. หากฉันมีโมดูล jQuery บุคคลที่สามฉันต้องแก้ไขเพื่อให้ทำงานได้หรือไม่

  6. ฉันจำเป็นต้องวาง xml ไว้ที่ไหนสักแห่งเพื่อบอก magento ว่ามีไฟล์ my.js อยู่หรือไม่?

  7. ถ้าฉันสร้างโมดูลภายในapp/codeด้วยรหัส js ทั้งหมดที่นั่นมันจะรวมเนื้อหาทั้งหมดในทุกหน้าหรือไม่? ฉันจะบรรลุสิ่งนั้นได้อย่างไร

คำตอบ:


65

หากต้องการโหลดmain.jsไฟล์ที่กำหนดเองในทุกหน้า (ใน RequireJS-way) นี่เป็นวิธีที่ดี:

1) สร้าง main.js

สร้างmain.jsภายในโฟลเดอร์ชุดรูปแบบ

<theme_dir>/web/js/main.js

กับเนื้อหานี้:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

ในระยะสั้น : "jquery"เราประกาศการอ้างอิงที่เริ่มต้นเช่น "jquery" --> $เรากำหนดเป็นพารามิเตอร์ของฟังก์ชันชื่อตัวแปรสำหรับการใช้พึ่งพาภายในฟังก์ชั่นเช่น function($) { ... }เราใส่รหัสที่กำหนดเองทั้งหมดของเราภายใน

2) ประกาศmain.jsด้วยrequirejs-config.jsไฟล์

สร้างrequirejs-config.jsไฟล์ภายในโฟลเดอร์ธีม:

<theme_dir>/requirejs-config.js

กับเนื้อหานี้:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"main.jsเป็นเส้นทางที่จะกำหนดเองของเรา ไม่จำเป็นต้องใช้ส่วนขยาย ".js"

เราrequirejs-config.jsจะถูกรวมเข้ากับสิ่งอื่นที่requirejs-config.jsกำหนดไว้ใน Magento

RequireJS จะโหลดmain.jsไฟล์ของเราในแต่ละหน้าการแก้ไขการขึ้นต่อกันและการโหลดไฟล์แบบ async


ทางเลือก: รวมถึงห้องสมุดบุคคลที่สาม

นี่เป็นวิธีรวมไลบรารีของบุคคลที่สาม

1)เพิ่มห้องสมุดในweb/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2)เปิดrequirejs-config.jsและเพิ่มเนื้อหานี้:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

มันดูซับซ้อนกว่าที่เป็นจริง

3)เพิ่มการพึ่งพาภายในmain.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

สวัสดีคุณสามารถบอกได้หรือไม่ว่าฉันต้องใส่ bootstrap.js ที่นี่ด้วย ฉันจะเพิ่มมันเพื่อให้ bootstrap ทำงานได้ดีในธีมของฉัน ขอบคุณ!
anujeet

1
@anujeet คุณสามารถรวมbootstrap.jsในลักษณะเดียวกับที่ฉันรวมไว้slick.jsในตัวอย่างด้านบน สำหรับค่า shim คุณสามารถลองใช้สิ่งนี้: 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }ตามที่อธิบายไว้ที่นี่: stackoverflow.com/a/13556882/3763649
Andrea

ดู my require-config.js var config = { deps: [ "js/animate", "js/incase", "js/confetti" ], paths: { "jquery.bootstrap":"js/bootstrap.min" }, shim:{ 'jquery.bootstrap':{ 'deps':['jquery'] } } }; require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']); minicart ของฉันหยุดทำงานกับสิ่งนี้
anujeet

@anujeet ดีกว่าคุณเปิดคำถามอื่นที่มีปัญหานี้รายงาน require-config.js ของคุณและหากคุณมีข้อผิดพลาดในคอนโซล javascript หากคุณเชื่อมโยงคำถามของคุณที่นี่ฉันยินดีที่จะช่วยให้คุณ :)
อันเดรีย

เมื่อรวม js เพิ่มเติมฉันมีข้อผิดพลาด "js / ScrollMagic.min", "js / debug.addIndicators.min"
yavonz15

6

คุณสามารถเพิ่มไฟล์ JS โดยใช้ xml ดังนี้ นี่จะเพิ่ม js ในทุกหน้า

ด้วยโมดูลที่กำหนดเอง:

สร้างdefault.xmlไฟล์ในโมดูลของคุณ

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

6

ทำซ้ำไฟล์:

app / รหัส / วีโอไอพี / ธีม / ดู / ส่วนหน้า / รูปแบบ / default_head_blocks.xml

ไปยัง

แอป / รหัส / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

สำหรับข้อมูลเพิ่มเติม:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

โชคดี!

BTW อ่าน frontdevdocs อย่างเป็นทางการจาก magento เพื่อรับพื้นฐาน :)


เนื่องจากสคริปต์ของ Bootstrap ต้องการให้ JQuery เริ่มต้นรวมถึงส่วนหัวนั้นจะไม่ทำงาน อ่านนี้เอกสารอย่างเป็นทางการ สำหรับข้อมูลเพิ่มเติม :)
VS

2

วิธีการเพิ่ม js โดยใช้default_head_blocks.xmlไฟล์จะไม่ทำงานสำหรับปลั๊กอิน JQuery บุคคลที่สาม ดังนั้นหากคุณต้องการเพิ่มปลั๊กอิน JQuery ที่กำหนดเองและใช้งานคุณจะต้องใช้requirejs-config.jsไฟล์

เพื่อตอบคำถามของคุณทีละคน:

1) & 2) คุณไม่จำเป็นต้องสร้างโมดูลเพื่อเพิ่มrequirejs-config.jsไฟล์ คุณสามารถเพิ่มได้ในตำแหน่งนี้:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

อ้างถึงคำตอบนี้เพื่อสร้างrequirejs-config.jsไฟล์ที่เหมาะสม

3) คุณจะต้องแสดงรายการการขึ้นต่อกันของไฟล์ js ของคุณก่อนที่จะเขียนสคริปต์ของคุณ

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

รหัสข้างต้นบอกว่าคุณจะต้อง jQuery และ jQuery ui สำหรับสคริปต์ของคุณ

4) คุณไม่จำเป็นต้องใช้define([เว้นแต่คุณจะสร้างปลั๊กอินจาวาสคริปต์

5) ไม่คุณไม่จำเป็นต้องแก้ไข แต่คุณจะต้องระบุการอ้างอิงโดยใช้requirejs-config.jsไฟล์ ถ้าคุณมีowl.carousel.min.jsใน<vendor>/<theme>/web/js/owl.carousel.min.jsของคุณrequirejs-config.jsไฟล์จะมีลักษณะเช่นนี้

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

ในรหัสข้างต้นโปรดจำไว้ว่าไม่มี.jsไฟล์ และตอนนี้เพื่อใช้ใน js ของคุณ

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

หากทุกอย่างทำงานได้ดีคุณควรมีส่วนท้ายของลิงก์ในแถบเลื่อน

6) & 7) เพียงใช้วิธีการที่ @Goldy แนะนำเพื่อเพิ่ม js ของคุณ มันจะเพิ่มไฟล์ js ของคุณไปยังทุกหน้า

สำหรับการอ่านเพิ่มเติมคุณสามารถดูโพสต์นี้

หวังว่านี่จะช่วยได้


1

นี่คือวิธีที่ฉันเพิ่มไลบรารี dotdotdot ในธีมที่กำหนดเอง magento2 ของฉัน

1. ดาวน์โหลดและเพิ่ม Js Library ในธีมของคุณตามเส้นทาง:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. สร้างไฟล์ requirejs ของชุดรูปแบบดังต่อไปนี้และแจ้งให้ requirejs ทราบว่ามีไลบรารีที่เพิ่มใหม่

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. ใช้ไลบรารีที่เพิ่มเข้ามาในไฟล์ js หลักของธีมดังนี้:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. และรวมไฟล์ js ของธีมของคุณไว้ในส่วนหัวของเว็บไซต์ดังนี้:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

คุณสามารถเพิ่มไลบรารี JS และไฟล์ที่กำหนดเองภายนอกได้ทุกหน้าใน magento2


ฉันได้ลองสิ่งนี้คือด้านผู้ดูแลระบบ js กำลังมาอย่างถูกต้อง แต่ผลลัพธ์ที่คาดหวังไม่ได้มา
Naveenbos

คำตอบที่ดี ลองดูสิ มีวิธีระบุหน้าบางอย่างที่จำเป็นต้องใช้ไฟล์ js หรือไม่?
Mohammed Joraid

สำหรับหน้าเฉพาะย้ายเนื้อหา "default_head_blocks.xml" ในตัวอย่างด้านบนไปยังไฟล์โครงร่างเฉพาะของคุณ ตัวอย่างเช่นในกรณีของหน้ารายละเอียดผลิตภัณฑ์ให้เพิ่ม xml ในแอพ / design / frontend / Namespace / themename / Magento_Catalog / layout /
catalog_product_view.xml
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.