Скачать или смотреть How to add a custom field to checkout page in Magento 2

► Fanpage:   / giaphugroupcom  
► Subscribe to my channel: https://www.youtube.com/giaphugroupco...
► Skype: cuongnq87
► The website link: https://www.giaphugroup.com/magento-2...

Hi everybody, I am Cuong, welcome back to my Magento 2 tutorial video series.
#magento2 #magento #magento2tutorial #checkoutpage #customfield
Please help me to reach 10.000 subscribers by subscribing to my channel and sharing my videos.

In the previous lesson, I showed everybody, How to add a product quick view feature in Magento 2. If you don't watch this tutorial yet, you can watch it here https://bit.ly/3nSqzXm

In today's practice, I am going to share with everybody on How to add a custom field to checkout page in magento 2.

We will add a new field called "Delivery Date" to the shipping address form. This field will help to save the delivery date is selected by the customer. It is the delivery date that a customer want to receive their order.

So what will we do in this practice?

1. We will create a new module called PHPCuong_CustomCheckoutFields
2. We will add a new field called "Delivery Date" to the shipping address form on the checkout page.

Okay, let's go.

Let's do this practice, you need to follow steps by step:

Step 1: Declaring a new module called PHPCuong_CustomCheckoutFields
Create the namespace PHPCuong in the path app\code.
Create the module named CustomCheckoutFields in the path app\code\PHPCuong.
Create the file named registration.php in the path app\code\PHPCuong\CustomCheckoutFields
Create the file named module.xml in the path app\code\PHPCuong\CustomCheckoutFields\etc

End of step #1, I have been completed codes to create a new module called PHPCuong_CustomCheckoutFields.

Step 2: Add the new column called delivery_date to two tables sales_order_address and quote_address
Create the new file named InstallSchema.php app\code\PHPCuong\CustomCheckoutFields\Setup

Step 3: Create a new customer address attribute called delivery_date
Create the new file named InstallData.php in the path app\code\PHPCuong\CustomCheckoutFields\Setup

Step 4: Display the new field named Delivery Date to the shipping address form on the checkout page
Create the new file named di.xml in the path app\code\PHPCuong\CustomCheckoutFields\etc
Create the new file named LayoutProcessor.php in the path app\code\PHPCuong\CustomCheckoutFields\Plugin\Block\Checkout
Create the new file named requirejs-config.js in the path app\code\PHPCuong\CustomCheckoutFields\view\frontend
Create the new file named set-shipping-information-mixin.js in the path app\code\PHPCuong\CustomCheckoutFields\view\frontend\web\js\action

Step 5: Save the value of the new field into the database.
Create the new file named extension_attributes.xml in the path app\code\PHPCuong\CustomCheckoutFields\etc
Create the new file named custom_attributes.xml in the path app\code\PHPCuong\CustomCheckoutFields\etc
Add the following codes to the di.xml file
Create the new file named ShippingInformationManagement.php in the path app\code\PHPCuong\CustomCheckoutFields\Plugin\Checkout\Model
Create the new file named events.xml in the path app\code\PHPCuong\CustomCheckoutFields\etc
Create the new file named CheckoutSubmitAllAfterObserver.php in the path app\code\PHPCuong\CustomCheckoutFields\Observer

Step 6: Display the Delivery Date on the shipping address of each order.
Go to the STORES - Settings - Configuration - Customers - Customer Configuration - Address Templates

{{if delivery_date}}Delivery Date: {{var delivery_date}}{{/if}}

Step 7: Test and See the results
Run the command line following:
php bin/magento setup:upgrade

Go to the frontend and add a product to the shopping cart, then try to place an order.

Yeah, it works perfectly.

Thank you for watching my video. If you have any questions about this practice please feel free to leave a comment below.

Don't forget to like, comment, share and subscribe to my channel for getting the latest video.

Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.

You can get the source code of this tutorial here https://github.com/php-cuong/custom-c...