24. tháng 2 2025

Không nên cố gắng thay từng từ khóa jQuery bởi $ - j88 online

/imgposts/67rywago.jpg

Trong hệ thống thương mại điện tử nguồn mở Magento 2, một phần mở rộng để gửi yêu cầu báo giá đã được cài đặt. Ngày đầu tiên nó hoạt động tốt, nhưng đột nhiên vào ngày hôm sau, nút này ngừng phản hồi khi nhấn. Hiện tượng là do sự kiện click của nút không đăng ký bất kỳ hàm xử lý nào, có nghĩa là tệp JavaScript liên quan không được tải.

Tuy nhiên, khi chuyển sang chủ đề mặc định Luma của Magento, phần mở rộng này hoạt động bình thường và tệp JavaScript được tải thành công. Nếu không thể khắc phục vấn đề hiện tại, bạn có thể tự phát triển một cửa sổ yêu cầu báo giá với giao diện tùy chỉnh và các tính năng như tự động chuyển hướng sau khi hoàn thành.

Khi kiểm tra mã nguồn trang, cấu hình tải được nhìn thấy như sau:

1<script type="text/x-magento-init">
2{
3    "*":{"Bluethinkinc_ProductEnquiry/js/productenquiry": {}}
4}
5</script>

Nhưng dường như nó không được tải đúng cách.

Từ tài liệu chính thức của chủ đề đang sử dụng, có đoạn mô tả sau đây (sau khi đã đọc kỹ tất cả tài liệu liên quan đến JavaScript của chủ đề):

Bạn cần đăng ký các thành phần mô-đun bằng cách cập nhật bố cục trong breeze_default.xml như được mô tả trong phần Thành phần JS: Bây giờ, Breeze sẽ tải Vendor_Module/js/name nếu nó được sử dụng trong data-mage-init, x-magento-init hoặc gọi require trực tiếp.

Ví dụ về cách sửa đổi:

 1<referenceBlock name="breeze.js">
 2    <arguments>
 3        <argument name="bundles" xsi:type="array">
 4            <item name="default" xsi:type="array">
 5                <item name="items" xsi:type="array">
 6                    <item name="Vendor_Module/js/name" xsi:type="array">
 7                        <item name="path" xsi:type="string">Vendor_Module/js/name</item>
 8                    </item>
 9                </item>
10            </item>
11        </argument>
12    </arguments>
13</

1> cd vendor/swissup/module-breeze/view/frontend/layout
2> vim breeze_default.xml

Tìm đoạn:

1<item name="default" xsi:type="array">
2    <item name="items" xsi:type="array">

Thêm vào bên trong:

1<item name="Bluethinkinc_ProductEnquiry/js/productlistenquiry" xsi:type="array">
2    <item name="path" xsi:type="string">Bluethinkinc_ProductEnquiry/js/productlistenquiry</item>
3</item>
4<item name="Bluethinkinc_ProductEnquiry/js/productenquiry" xsi:type="array">
5    <item name="path" xsi:type="string">Bluethinkinc_ProductEnquiry/js/productenquiry</item>
6</item>

Do phần mở rộng này chứa hai tệp JavaScript: một cho logic trang chi tiết sản phẩm và một cho trang danh sách sản phẩm.

Tiếp theo, chạy lệnh sau để làm mới bộ nhớ trò bắn cá đệm:

1> php bin/magento cache:flush

Sau đó, các tệp JavaScript tương ứng sẽ được tải trên trang. Tuy nhiên, nút vẫn không hoạt động khi nhấn, và lỗi thiếu jQuery xuất hiện.

1Uncaught ReferenceError: jQuery is not defined
2  at HTMLAnchorElement.<anonymous> (productenquiry.js:17:17)

Mặc dù mã nguồn phần mở rộng yêu cầu phụ thuộc vào jQuery và chủ đề bên thứ ba cũng tích hợp hỗ trợ jQuery, sao vẫn báo lỗi thiếu jQuery?

Lưu ý từ tài liệu:

Hãy chú ý rằng jQuery sẽ được giải quyết dưới dạng thư viện Cash — một lựa chọn thay thế nhỏ gọn của jQuery.

Cash là một lựa chọn thay thế nhỏ gọn cho jQuery dành cho trình duyệt hiện đại (IE11 trở lên), cung cấp cú pháp kiểu jQuery để thao tác DOM.

Xem qua giới thiệu trên GitHub, cách dùng rất giống jQuery:

1$(function () {
2    $('html').addClass('dom-loaded');
3    $('<footer>Appended with Cash</footer>').appendTo(document.body);
4});

Do phần mở rộng sử dụng nhiều đoạn mã viết $ thay vì jQuery, dẫn đến lỗi không nhận biết. Để khắc phục, định nghĩa biến toàn cục:

1var jQuery = $;

Chỉnh sửa mã nguồn hai tệp JavaScript của phần mở rộng:

1vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/js/productlistenquiry.js
2vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/js/productenquiry.js

Thêm dòng sau vào đầu mỗi tệp:

1var jQuery = $;

Đây là cách sửa đơn giản nhất. Không nên cố gắng thay từng từ khóa jQuery bởi $.

Cần chạy các lệnh sau, tương tự như sau khi cài đặt phần mở rộng qua Composer:

1php bin/magento setup:upgrade
2php bin/magento setup:di:compile
3php bin/magento setup:static-content:deploy -f
4php bin/magento cache:flush

Chỉ chạy static content deploy là chưa đủ, hai lệnh trước đó không thể bỏ qua. Sau khi thực hiện, nút yêu cầu báo giá sẽ hoạt động và gửi thông tin bình thường.

Tuy nhiên, vẫn còn một số vấn đề khác cần khắc phục:

Xử lý phản hồi (response) có vấn đề, tên trường bị sai. Cần sửa đổi.

Vấn đề CSS: Kích thước chữ lớn quá mức (4em), gây chồng lấn. Sửa trong tệp sau:

1vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/css/customcss.css

Tới đây, chức năng cơ bản đã ổn, giao diện trông chấp nhận được. Tiếp theo là cải thiện trải nghiệm người dùng khi gửi thông tin:

  • Chưa xử lý tránh nhấn lặp lại.
  • Chưa hiển thị trạng thái chờ trong quá trình gửi (thời gian gửi email SMTP khoảng 2 giây).

Kiểu dáng nút: Vì nút được viết bằng thẻ <span>, khi di chuột vào, con trỏ không phải là bàn tay (pointer). Cần sửa trong các tệp sau:

1vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/templates/enquiry.phtml
2vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/templates/productenquiry-list.phtml

Thêm thuộc tính sau vào các nút:

1style="cursor: pointer";
2<span class="Submit_Enquiry_btn" id="submit_enquireXXX">Request a Quote</span>
3<span class="Submit_Enquiry_btn" [j88 online](/blog/php-expression-and-at-symbol-is-wha/)  id="submit_enquire">Request a Quote</span>

Dưới đây là một số ghi chú bổ sung:

1> cd vendor/bluethinkinc/magento2-module-product-enquiry
2> find . -name "*.js"
3./view/frontend/web/js/productlistenquiry.js
4./view/frontend/web/js/productenquiry.js
5./view/frontend/requirejs-config.js

 1var config = {
 2  map: {
 3    '*': {
 4      productenquiry: 'Bluethinkinc_ProductEnquiry/js/productenquiry',
 5      productlistenquiry: 'Bluethinkinc_ProductEnquiry/js/productlistenquiry'
 6    }
 7  },
 8  shim: {
 9    'productenquiry': {
10      deps: ['jquery']
11    },
12    'productlistenquiry': {
13      deps: ['jquery']
14    }
15  }
16};

 1define(['jquery','Magento_Ui/js/modal/modal','mage/url'],
 2function($,modal,urlBuilder)
 3{
 4        $(".enquiry-product").on('click',function()
 5        {
 6        event.preventDefault();
 7        var datatitle = $(this).attr("data-title");
 8        var options = {
 9        type: 'popup',
10        ...
11}

Đọc thêm 🌳

Hướng dẫn tùy chỉnh chủ đề Magento 2