จะแทนที่ไฟล์ HTML โดยใช้โมดูลที่กำหนดเองได้อย่างไร?


20

ฉันกำลังพัฒนาโมดูลที่กำหนดเองสำหรับวิธีการชำระเงินใน Magento 2 ปัจจุบันฉันใช้cc-form.htmlจากไดเรกทอรีผู้ขายและโมดูลทำงานได้ดี ดูเส้นทางด้านล่าง:

ผู้ขาย / วีโอไอพี / โมดูลการชำระเงิน / view / ส่วนหน้า / เว็บ / แม่แบบ / ชำระเงิน / CC-form.html

มีวิธีการแทนที่ไฟล์ HTML หรือไม่?

หมายเหตุ:ฉันต้องการแทนที่โดยใช้ส่วนขยายที่กำหนดเอง ดูเส้นทางด้านล่าง:

app / รหัส / Namespace / โมดูล / view / ส่วนหน้า / เว็บ / แม่แบบ / ชำระเงิน / CC-form.html

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม ขอขอบคุณ!


คุณใช้แบบฟอร์มนี้เมื่อใดโปรดแสดงลิงค์หรือแผนที่เว็บไซต์
MrTo-Kane

คำตอบ:


34

วิธีแก้ปัญหาการทำงาน

เพียงแค่สร้างหรือแก้ไขไฟล์ requirejs-config.js จากพา ธ ด้านล่าง

/app/code/Namespace/Module/view/frontend/requirejs-config.js

และวางรหัสด้านล่างใน requirejs-config.js

var config = {
    map: {
        '*': {
          'Magento_Payment/template/payment/cc-form.html': 
              'Namespace_Module/template/payment/cc-form.html'
        }
  }
};

ดังนั้นเราสามารถแทนที่ไฟล์ html ใด ๆ ด้วยวิธีนี้


ใช้งานไม่ได้กับไฟล์ html เทมเพลตอีเมลในการขายโมดูล
fudu

14

คุณสามารถเพิ่มไฟล์ cc-form.html ภายในโมดูลการชำระเงินธีมของคุณ

<mage_dir>/app/design/frontend/{Package}/{themename}/Magento_Payment/web/template/payment/cc-form.html

คุณสามารถเปลี่ยนได้ตามความต้องการของคุณในสถานที่ดังกล่าว

ลบโฟลเดอร์varออกจากรูทแล้วลบpub/static/frontendโฟลเดอร์

คุณต้องมีคำสั่งเรียกใช้ php bin/magento setup:static-content:deploy

ล้างแคชเบราว์เซอร์ของคุณและตรวจสอบ


ฉันรู้ว่ามันจะทำงานได้ดีถ้าฉันวาง cc-form.html ภายใต้ธีมของฉัน แต่ฉันกำลังสร้างส่วนขยายดังนั้นฉันไม่สามารถวางไว้ภายใต้ธีม ฉันต้องวางไฟล์นี้ไว้ในไดเรกทอรีของโมดูล
Makwana Ketan

1
ขอขอบคุณ rakesh ฉันพบวิธีแก้ปัญหาที่stackoverflow.com/questions/37430036/ …
Makwana Ketan

9

โซลูชันที่ยอมรับนั้นถูกต้อง แต่ฉันคัดลอกคำตอบ @AntonGuz เต็มจาก "Stack Overflow" (อธิบายได้ดีมาก):

ใช่แล้ว คุณสามารถดูผับแบบคงที่เพื่อดูว่าเส้นทางไปยังสินทรัพย์แบบคงที่สร้างขึ้นได้อย่างไร

มันทำงานอย่างไร

เนื้อหาทุกรายการสามารถเข้าถึงได้จากหน้าเว็บโดยใช้enter code here"RequireJS ID" มันคล้ายกับเส้นทางที่แท้จริง แต่มีความหลากหลาย

http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.icoตัวอย่างเช่นไฟล์

/app/code/Magento/Theme/view/adminhtml/web/favicon.icoมันเป็นเส้นทางที่แท้จริงคือ มัน RequireJS ID Magento_Theme/favicon.icoเป็น ซึ่งหมายความว่าไฟล์นั้นสามารถเข้าถึงได้ผ่านทางrequire("text!Magento_Theme/favicon.ico")หรือคำสั่งที่คล้ายกัน

คุณสามารถค้นหาว่าRequireJS IDประกอบด้วยชื่อโมดูลและส่วนที่มีประโยชน์ของเส้นทาง (หลังจากโฟลเดอร์web)

ฉันจะแทนที่ไฟล์ได้อย่างไร

ดังนั้นคุณมีไฟล์
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

ในหน้ามันเต็มไปด้วย src เป็น
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

ดังนั้น RequireJS ID จึงเป็น
Magento_Payment/template/payment/cc-form.html

บันทึก Side: ชิ้นส่วนภายใน UI Magento_Payment/payment/cc-formสิ่งที่มันเท่ากับ คำว่า "เทมเพลต" และ ".html" จะถูกเพิ่มโดยอัตโนมัติ

และตอนนี้คุณสามารถแทนที่ไฟล์นี้สำหรับแอปพลิเคชันผ่าน RequireJS config

var config = {
  "map": {
    "*": {
      "Magento_Payment/template/payment/cc-form.html": 
          "<OwnBrand>_<OwnModule>/template/payment/cc-form.html"
    }
  }
};

โค้ดนี้คุณวางไว้ในrequirejs-config.jsไฟล์ในโมดูลของคุณ นั้นคือทั้งหมด.

บางทีมันอาจช่วยให้ใครบางคนเข้าใจเมื่อมันเกิดขึ้น


คุณจะเพิ่มและแก้ไขไฟล์ JS สำหรับ html นี้ได้อย่างไร
jibin george

4

ฉันไม่ทราบว่าจำเป็นต้องใช้ Magento2 รุ่นใด แต่หากคุณต้องการแทนที่เทมเพลตจากโมดูล Magento_Ui คุณต้องระบุพา ธ ดังนี้:

var config = {
    map: {
        "*": {
            'ui/template/form/element/select.html':'Vendor_Module/templates/form/element/select.html'
        }
    }
};

เพราะในไฟล์นี้:

ผู้ขาย / วีโอไอพี / โมดูล UI / view / ฐาน / requirejs-config.js

มีการทำแผนที่เส้นทาง:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    paths: {
        'ui/template': 'Magento_Ui/templates'
    },
    map: {
        '*': {
            uiElement:      'Magento_Ui/js/lib/core/element/element',
            uiCollection:   'Magento_Ui/js/lib/core/collection',
            uiComponent:    'Magento_Ui/js/lib/core/collection',
            uiClass:        'Magento_Ui/js/lib/core/class',
            uiEvents:       'Magento_Ui/js/lib/core/events',
            uiRegistry:     'Magento_Ui/js/lib/registry/registry',
            consoleLogger:  'Magento_Ui/js/lib/logger/console-logger',
            uiLayout:       'Magento_Ui/js/core/renderer/layout',
            buttonAdapter:  'Magento_Ui/js/form/button-adapter'
        }
    }
};
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.