Trong bài viết này mình sẽ hướng dẫn cách thay thế Date calendar sang Datetime calendar trong Cart Price Rules.
Nội dung bài viết sẽ bao gồm những mục:
- Tạo module cơ bản (SHD_SalesRule)
- Tuỳ chỉnh giao diện adminhtml (SHD_SalesRule/view/adminhtml/sales_order_form.xml)
- Chỉnh sửa lại tính năng validate (tạo plugin)
- Chỉnh sửa cột from_date và to_date trong bảng salesrule (db_schema.xml)
- Chỉnh sửa variable trong constructor (sử dụng type inject vào di.xml)
- Chạy setup:upgrade và kiểm tra kết quả
1. Tạo module cơ bản để thay thế Date calendar
Tạo extension SalesRule trong vendor SHD của thư mục app/code như chi tiết dưới đây:
app/code/SHD/SalesRule/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="SHD_SalesRule" setup_version="1.0.0">
<sequence>
<module name="Magento_SalesRule"/>
</sequence>
</module>
</config>app/code/SHD/SalesRule/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'SHD_SalesRule',
__DIR__
);2. Tuỳ chỉnh giao diện adminhtml (Magento 2)
Tạo 2 file theo đường dẫn chi tiết dưới đây:
app/code/SHD/SalesRule/view/adminhtml/layout/sales_rule_promo_quote_edit.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="sales_rule_form"/>
</referenceContainer>
</body>
</page>app/code/SHD/SalesRule/view/adminhtml/ui_component/sales_rule_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="rule_information" sortOrder="10">
<field name="from_date" formElement="date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">sales_rule</item>
</item>
</argument>
<settings>
<validation>
<rule name="validate-date" xsi:type="boolean">false</rule>
<rule name="validate-entry" xsi:type="boolean">false</rule>
</validation>
<dataType>text</dataType>
<label translate="true">From</label>
<visible>true</visible>
<dataScope>from_date</dataScope>
</settings>
<formElements>
<date>
<settings>
<outputDateFormat>YY-MM-DD HH:mm a</outputDateFormat>
<options>
<option name="dateFormat" xsi:type="string">MMM d, y</option>
<option name="showsTime" xsi:type="boolean">true</option>
<option name="maxDate" xsi:type="string">+0y</option>
</options>
</settings>
</date>
</formElements>
</field>
<field name="to_date" formElement="date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">sales_rule</item>
</item>
</argument>
<settings>
<validation>
<rule name="validate-date" xsi:type="boolean">false</rule>
</validation>
<dataType>text</dataType>
<label translate="true">To</label>
<visible>true</visible>
<dataScope>to_date</dataScope>
</settings>
<formElements>
<date>
<settings>
<outputDateFormat>YY-MM-DD HH:mm a</outputDateFormat>
<options>
<option name="dateFormat" xsi:type="string">MMM d, y</option>
<option name="showsTime" xsi:type="boolean">true</option>
<option name="maxDate" xsi:type="string">+0y</option>
</options>
</settings>
</date>
</formElements>
</field>
</fieldset>
</form>Đoạn code trên nhằm mục đích viết lại cài đặt của field from_date và to_date
3. Chỉnh sửa lại tính năng validate
Viết lại Component Date bằng cách khởi tạo plugin:
app/core/SHD/SalesRule/Plugin/Ui/Component/Date.php
<?php
namespace SHD\SalesRule\Plugin\Ui\Component;
use Magento\Ui\Component\Form\Element\DataType\Date as MDate;
class Date
{
public function afterPrepare(MDate $subject, $result)
{
$config = $subject->getData('config');
$name = $subject->getData('name');
if (in_array($name, ['from_date', 'to_date']) && isset($config['validation']['validate-date']) && !$config['validation']['validate-date']) {
unset($config['validation']['validate-date']);
$subject->setData('config', $config);
}
return $subject;
}
}Vì bạn sẽ gặp trường hợp thay đổi validate-date của field vẫn hiện mặc dù bạn đã thiết lập rule validate-date=false.
Đây sẽ là cách để các bạn có thể loại bỏ validate-date ra khỏi field from_date và to_date
Thêm đoạn code này vào di.xml:
app/core/SHD/SalesRule/etc/di.xml
<?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\Ui\Component\Form\Element\DataType\Date">
<plugin name="SHD_SalesRule_Ui_Component_Date" type="SHD\SalesRule\Plugin\Ui\Component\Date" />
</type>
</config>4. Chỉnh sửa cột from_date và to_date trong bảng salesrule
Từ Magento 2.4 trở lên bạn không cần phải tạo Schema trong thư mục Setup nữa mà thay vào đó bạn sẽ tạo db_schema.xml trong thư mục etc nhé:
Xem chi tiết dưới đây
app/core/SHD/SalesRule/etc/db_schema.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
<table name="salesrule" resource="default" engine="innodb" comment="Salesrule">
<column xsi:type="datetime" name="from_date" comment="From"/>
<column xsi:type="datetime" name="to_date" comment="To"/>
</table>
</schema>Đoạn code trên nhằm mục đích thiết lập lại kiểu dữ liệu của cột trong from_date và to_date của bảng salesrule từ date sang datetime nhé.
5. Chỉnh sửa variable trong constructor
Sau khi đã hoàn tất cài đặt thì bạn sẽ gặp trường hợp giá trị của 2 field sẽ bị sai khi bạn lưu lại và giải pháp cho các bạn đó là sử dụng type để thay đổi tham số truyền vào cho constructor nhé.
Chi tiết code:
app/core/SHD/SalesRule/etc/di.xml
<?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\SalesRule\Controller\Adminhtml\Promo\Quote\Save">
<arguments>
<argument name="dateFilter" xsi:type="object">Magento\Framework\Stdlib\DateTime\Filter\DateTime</argument>
</arguments>
</type>
</config>6. Chạy setup:upgrade và kiểm tra kết quả (Magento 2)
Bước cuối cùng là chạy lại command để kiểm tra kết quả và sẽ được deploy theo 2 mode:
- Developer (Bạn chỉ cần chạy setup:upgrade là đủ):
- php bin/magento setup:upgrade -> cập nhật cài đặt mới cho module
- Production
- php bin/magento setup:upgrade -> cập nhật cài đặt mới cho module
- php bin/magento setup:di:compile
- php bin/magento setup:static-content:deploy -f
- php bin/magento cache:flush
- rm -rf var/*
Kết quả:
Trích nguồn: https://www.youtube.com/watch?v=6iQmN_pawfI
Kết bài
Cảm ơn các bạn đã dành thời gian xem hết bài viết này. Có gì góp ý hay thắc mắc vui lòng comment dưới bài viết mình sẽ hỗ trợ và trả lời câu hỏi của anh em.
