Bạn muốn kiểm soát việc hiển thị nút 'Tiến Hành Thanh Toán' trong mini cart Magento 2 dựa trên các điều kiện cụ thể? Bài viết này sẽ cung cấp hướng dẫn chi tiết từng bước để bạn có thể tùy chỉnh logic hiển thị, giúp tối ưu hóa trải nghiệm người dùng và tăng tỷ lệ chuyển đổi. Chúng ta sẽ đi sâu vào việc sử dụng các module tùy chỉnh, mixin JavaScript và cấu hình layout XML để đạt được mục tiêu này.
Trong nhiều trường hợp, việc hiển thị nút 'Tiến Hành Thanh Toán' không phải lúc nào cũng phù hợp. Ví dụ:
Bằng cách kiểm soát hiển thị nút 'Tiến Hành Thanh Toán', bạn có thể hướng dẫn khách hàng thực hiện các hành động cần thiết trước khi thanh toán, từ đó giảm thiểu tỷ lệ bỏ giỏ hàng và cải thiện trải nghiệm mua sắm.
Phương pháp này liên quan đến việc chỉnh sửa layout XML và template của mini cart để thêm điều kiện hiển thị dựa trên dữ liệu session hoặc các biến tùy chỉnh khác.
Tạo file `default.xml` trong module của bạn: `app/code/Vendor/Module/view/frontend/layout/default.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">
<body>
<referenceContainer name="header-wrapper">
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/minicart/content</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</referenceContainer>
</body>
</page>
Copy nội dung từ `vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html` vào `app/code/Vendor/Module/view/frontend/web/template/minicart/content.html` và chỉnh sửa.
Thêm điều kiện vào nút 'Tiến Hành Thanh Toán':
<!-- ko if: isButtonEnable() -->
<button
id="top-cart-btn-checkout"
type="button"
class="action primary checkout"
data-action="close"
data-bind="
attr: {
title: $t('Proceed to Checkout')
},
click: closeMinicart()
"
translate="'Proceed to Checkout'"
/>
<!-- /ko -->
Tạo file `requirejs-config.js` tại `app/code/Vendor/Module/view/frontend/requirejs-config.js` để sử dụng mixin:
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/minicart': {
'Vendor_Module/js/view/minicart-mixin': true
}
}
}
};
Tạo file `minicart-mixin.js` tại `app/code/Vendor/Module/view/frontend/web/js/view/minicart-mixin.js`:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _) {
'use strict';
var mixin = {
isButtonEnable: function () {
/* Thêm điều kiện của bạn ở đây */
return true; // Thay đổi thành false để ẩn nút
}
};
return function (target) {
return target.extend(mixin);
};
});
Trong hàm `isButtonEnable()`, bạn có thể thêm logic để kiểm tra các điều kiện cụ thể (ví dụ: kiểm tra session, giá trị giỏ hàng, trạng thái đăng nhập) và trả về `true` để hiển thị nút hoặc `false` để ẩn nó.
Phương pháp này cho phép bạn thay thế template mặc định của minicart bằng một template tùy chỉnh.
Tạo file `requirejs-config.js` trong module của bạn: `app/code/Vendor/Module/view/frontend/requirejs-config.js`
var config = {
map: {
'*': {
'Magento_Checkout/template/minicart/content.html': 'Vendor_ModuleName/template/minicart/content.html'
}
}
};
Copy nội dung từ `vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html` vào `app/code/Vendor/Module/view/frontend/web/template/minicart/content.html` và chỉnh sửa. Xóa đoạn code sau nếu bạn muốn ẩn hoàn toàn nút:
<button
id="top-cart-btn-checkout"
type="button"
class="action primary checkout"
data-action="close"
data-bind="
attr: {
title: $t('Proceed to Checkout')
},
click: closeMinicart()
"
translate="'Proceed to Checkout'"
/>
Đây là cách đơn giản nhất, nhưng ít linh hoạt hơn. Bạn có thể sử dụng CSS để ẩn nút 'Tiến Hành Thanh Toán' dựa trên một số điều kiện nhất định.
Thêm CSS vào file CSS tùy chỉnh của bạn:
#top-cart-btn-checkout {
display: none;
}
Bạn có thể sử dụng JavaScript để thêm class CSS này dựa trên các điều kiện cụ thể.
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
Bằng cách áp dụng các phương pháp trên, bạn có thể kiểm soát một cách linh hoạt việc hiển thị nút 'Tiến Hành Thanh Toán' trong mini cart Magento 2, từ đó cải thiện trải nghiệm người dùng và tăng doanh số bán hàng.
Bài viết liên quan