Skip to content

How To Add Custom Field At Checkout Address Form In Magento 2

How do you add the Custom Field to the Delivery Address field to the Shipping Address form in Magento 2 Checkout?

Label: Delivery Address
Radio Button

  1. Home
  2. Business

Home Select then Delivery Address add charge 5
BusinessSelect then Delivery Address add charge 10

The above task is done but how to apply it in the Delivery Address Charge in magento 2 order total with label

enter image description here

app/code/Vendor/DeliveryAddressCharge/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="MagentoCheckoutBlockCheckoutLayoutProcessor">
    <plugin name="add_delivery_address_to_shipping_address" type="VendorDeliveryAddressChargePluginCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>

app/code/Vendor/DeliveryAddressCharge/Plugin/Checkout/LayoutProcessorPlugin.php

<?PHP

 namespace VendorDeliveryAddressChargePluginCheckout;

 use MagentoCheckoutBlockCheckoutLayoutProcessorInterface;

class LayoutProcessorPlugin
{
public function afterProcess(LayoutProcessorInterface $subject, $jsLayout)
{
    // Add custom field to shipping address form
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['delivery_address'] = [
            'component' => 'Vendor_DeliveryAddressCharge/js/view/delivery-address',
            'provider' => 'checkoutProvider',
            'config' => [
                'customScope' => 'shippingAddress',
            ],
            'dataScope' => 'shippingAddress.delivery_address',
            'label' => __('Delivery Address'),
            'options' => [
                [
                    'value' => 'home',
                    'label' => __('Home'),
                ],
                [
                    'value' => 'business',
                    'label' => __('Business'),
                ],
            ],
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'delivery-address'
        ];

    return $jsLayout;
 }
}

app/code/Vendor/DeliveryAddressCharge/view/frontend/web/js/view/delivery-address.js

define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote' // Import the quote object

], function ($, ko, Component, quote) {
‘use strict’;

return Component.extend({
    defaults: {
        template: 'Vendor_DeliveryAddressCharge/delivery-address'
    },
    selectedOption: ko.observable('home'), // Default selected option
    deliveryCharge: ko.observable(5), // Default delivery charge for Home option
    initialize: function () {
        this._super();
    },
    onClickRadio: function(option) {
          console.log('Selected option:', option);
        this.selectedOption(option);
        // Update delivery charge based on selected option
        if (option === 'home') {
            this.deliveryCharge(5);
        } else if (option === 'business') {
            this.deliveryCharge(10);
        }
        // Save selected delivery option to quote
        if (quote) { // Ensure quote object is defined
            quote.shippingAddress().extensionAttributes = {
                delivery_option: option
            };
        }
     }
  });
});

app/code/Vendor/DeliveryAddressCharge/view/frontend/web/template/delivery-address.html

<div>
 <label>Delivery Address</label>
 <div>
    <!-- Radio buttons for Home and Business options -->
    <input type="radio" name="delivery_address" value="home" data-bind="click: onClickRadio.bind($data, 'home')"> Home<br>
    <input type="radio" name="delivery_address" value="business" data-bind="click: onClickRadio.bind($data, 'business')"> Business
 </div>
</div>