Bạn muốn nâng cao trải nghiệm mua sắm trực tuyến cho khách hàng trên trang Magento 2 của mình? Việc tùy chỉnh địa chỉ giao hàng trong quá trình thanh toán là một bước quan trọng. Bài viết này sẽ hướng dẫn bạn cách hiển thị và cho phép chỉnh sửa địa chỉ giao hàng tùy chỉnh một cách dễ dàng, giúp khách hàng thao tác nhanh chóng và thuận tiện hơn.
Trải nghiệm thanh toán liền mạch là yếu tố then chốt để giữ chân khách hàng và tăng doanh số. Việc cho phép khách hàng dễ dàng chọn hoặc chỉnh sửa địa chỉ giao hàng trực tiếp trong quá trình thanh toán giúp loại bỏ các bước rườm rà, giảm thiểu tỷ lệ bỏ giỏ hàng.
Ví dụ, nếu khách hàng muốn giao hàng đến một địa chỉ khác với địa chỉ mặc định đã lưu, họ có thể nhanh chóng thay đổi mà không cần phải rời khỏi trang thanh toán để vào phần quản lý tài khoản.
Giả sử bạn có một bảng dữ liệu tùy chỉnh lưu trữ thông tin địa chỉ giao hàng của khách hàng, bạn có thể hiển thị các địa chỉ này dưới dạng tùy chọn để khách hàng lựa chọn trong quá trình thanh toán. Để thực hiện việc này, bạn cần can thiệp vào quy trình xử lý layout của Magento 2.
Plugin là một cách mạnh mẽ để tùy chỉnh Magento 2 mà không cần sửa đổi trực tiếp các file core. Bạn có thể tạo một plugin để thay đổi LayoutProcessor, block chịu trách nhiệm xử lý layout của trang thanh toán.
Đầu tiên, tạo file `di.xml` trong thư mục `etc/frontend` của module của bạn:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="vendor_assign_default_value" type="Vendor\Module\Plugin\Checkout\Model\Checkout\LayoutProcessor" sortOrder="100"/>
</type>
</config>
Sau đó, tạo file `LayoutProcessor.php` trong thư mục `Plugin/Checkout/Model/Checkout` của module:
namespace Vendor\Module\Plugin\Checkout\Model\Checkout;
class LayoutProcessor
{
/**
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
// Logic để lấy và hiển thị địa chỉ từ bảng dữ liệu tùy chỉnh
// Ví dụ:
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_address_field'] = [
'component' => 'Vendor_Module/js/view/custom-address-field',
'config' => [
'template' => 'Vendor_Module/custom-address-field.html',
'options' => $this->getCustomAddressOptions(), // Hàm lấy dữ liệu địa chỉ
'label' => __('Chọn Địa chỉ Giao hàng'),
'value' => ''
],
'dataScope' => 'shippingAddress.custom_address_field',
'sortOrder' => 5,
'validation' => ['required-entry' => true],
];
return $jsLayout;
}
private function getCustomAddressOptions() {
//Logic để lấy địa chỉ từ database của bạn, ví dụ:
// $collection = $this->customAddressFactory->create()->getCollection();
// $options = [];
// foreach ($collection as $address) {
// $options[] = [
// 'value' => $address->getId(),
// 'label' => $address->getAddressString(),
// ];
// }
// return $options;
return [
['value' => 'address1', 'label' => 'Địa chỉ 1'],
['value' => 'address2', 'label' => 'Địa chỉ 2'],
];
}
}
Đoạn code trên chỉ là ví dụ. Bạn cần điều chỉnh phần `$this->getCustomAddressOptions()` để lấy dữ liệu địa chỉ từ bảng dữ liệu của bạn.
Bạn cần tạo một component JavaScript để hiển thị các địa chỉ dưới dạng dropdown hoặc danh sách các tùy chọn có thể chọn.
Magento 2 cho phép bạn tùy chỉnh template và JavaScript của các block để thay đổi hành vi của trang thanh toán. Để cho phép chỉnh sửa địa chỉ giao hàng, bạn cần override template `default.html` và file JavaScript `default.js` liên quan đến việc hiển thị địa chỉ.
Copy các file sau từ core vào theme của bạn:
Trong file `default.html`, thêm một nút "Chỉnh sửa" cho phép khách hàng chỉnh sửa địa chỉ:
<button
visible="address().isEditable()"
type="button"
class="action edit-address-link"
data-bind="click: editAddress">
<span translate="'Edit'"></span>
</button>
Trong file `default.js`, viết logic để xử lý sự kiện khi nút "Chỉnh sửa" được click. Bạn có thể mở một popup hoặc hiển thị một form inline để khách hàng chỉnh sửa địa chỉ.
Việc tùy chỉnh địa chỉ giao hàng trong quá trình thanh toán của Magento 2 có thể cải thiện đáng kể trải nghiệm người dùng và tăng tỷ lệ chuyển đổi. Hãy thử áp dụng các phương pháp trên để tạo ra một quy trình thanh toán mượt mà và thân thiện hơn cho khách hàng của bạn.
Bài viết liên quan