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
- Home
- 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
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>