ใช้ require-config.js เพื่อโหลดไฟล์ที่จำเป็นในทุกหน้า

ฉันรู้วิธีใช้require-config.jsในธีมที่กำหนดเอง แต่ฉันต้องการใช้ไฟล์จาวาสคริปต์ที่กำหนดเอง ( myfile.js) ในทุกหน้า ฉันควรเพิ่มไดเรกทอรีใดrequire-config.jsและจะใช้งานอย่างไรจึงจะทำงานได้ตามที่ควร

กรุณาอย่าอ้างอิงถึงหน้าวีโอไอพีอย่างเป็นทางการ

requirejs-config.jsใช้สำหรับการสร้างแผนที่ทรัพยากร JavaScript เราสามารถหาทั้งหมดต้อง configs pub/static/_requirejsใต้:

เท่าที่ผมรู้วิธีที่ถูกต้องในการโหลดสคริปต์ที่กำหนดเองของเราผ่านทางต้อง Js: ใช้แม่แบบที่จะเรียกสคริปต์ของเรา เราจะสร้างเทมเพลตใหม่ด้วยMagento\Framework\View\Element\Templateคลาสบล็อก

หากเราต้องการโหลดไฟล์ js ในทุกหน้าและไม่ต้องการสร้างโมดูลใหม่บล็อกของเราควรอ้างอิงถึงbefore.body.endหรือafter.body.start containerในdefault.xml- โมดูล Magento Theme

app / ออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / Magento_Theme / รูปแบบ / default.xml

<?xml version="1.0"?>

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
    </referenceContainer>

</page>

app / ออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / requirejs-config.js

var config = {
    map: {
        '*': {
            customScript:'Magento_Theme/js/customscript'
        }
    }
};

app / ออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / Magento_Theme / เว็บ / js / customscript.js

define('jquery', function($) {

    //Your code here
    //alert('Here');

    }(jQuery)
);

เทมเพลตของเราจะเรียกสคริปต์ของเรา: แอพ / การออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / Magento_Theme / แม่แบบ / custom_js.phtml

<script>// <![CDATA[
    require([
        'jquery',
        'customScript'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
    // ]]>
</script>

ล้าง Magento Cache และเรียกใช้การปรับใช้เนื้อหาแบบคงที่: php bin/magento setup:static-content:deploy

ไฟล์ Requirejs-config: แอพ / รหัส / ผู้ขาย / โมดูล / ดู / ส่วนหน้า / requirejs-config.js

var config = {
    paths: {            
         'myfile': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'myfile': {
        deps: ['jquery']
    }
  }
} 

ไฟล์ js ของคุณควรอยู่ใน: แอพ / รหัส / ผู้ขาย / โมดูล / ดู / ส่วนหน้า / เว็บ / js / myfile.js

ตอนนี้คุณสามารถใช้ที่ใดก็ได้ในไฟล์เทมเพลตโดยวิธีด้านล่าง:

<srcipt>
 require(["jquery","myfile"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>

depsมีรุ่นที่ง่ายขึ้นโดยใช้เป็น การพึ่งพาในrequirejs-config.jsจะโหลดไฟล์ของคุณเมื่อโหลด requirejs เอง (ทุกที่ในร้าน) นี่คือตัวอย่างวิธีที่requirejs-config.jsของคุณควรมีลักษณะ:

var config = {
    // When load 'requirejs' always load the following files also
    deps: [
        'common-js'
    ],

    // Library file path.
    paths: {
        'common-js': 'js/Your-File-Name'
    },

    // The rest of your config file ...

เป็นวิธีทางเลือกสำหรับคำแนะนำของ Khoa ซึ่งเป็นวิธีปฏิบัติที่ดีเยี่ยมของวีโอไอพีคุณสามารถวาง JavaScript ของคุณในไฟล์. phtml ดังนี้:

<srcipt>
require(["jquery"],function($){
 $(document).ready(function(){
    your script here...
 })
});
</script>

จากนั้นลิงก์ไฟล์ phtml ของคุณจาก default.xml ตามที่อธิบายไว้ในคำตอบของ Khoa แม้ว่าฉันจะแนะนำให้เพิ่มเข้าไปก่อน before.body.end จากนั้นเรียกสคริปต์ JS ของคุณจากภายในcopyright.phtmlดังนี้:

<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>

copyright.phtml ได้รับการโหลดในทุกหน้าแม้กระทั่งในหน้าเว็บเช่นชำระเงินซึ่งส่วนท้ายถูกตัดออก