Mryntu

I'm trying to add a custom field in between the shipping address and shipping method sections. And I want values of this field to be stored in both quote and sales_order tables ultimately. This is something similar to adding an "order comment" field but this field should appear right after the shipping address section and before the shipping method section.

I went through Magento dev guides on how to add a custom field and a custom form to the checkout and implemented a solution to a certain extent.

What I have done so far:

1. Updated the checkout_index_index.xml layout, added a new uiComponent (a container) under the item "shippingAddress".


2. Added the element (field) I require inside the container.


3. Override the /js/view/shipping.js and shipping.phtmlin my custom module.


4. Invoked the above made container inside shipping.phtml in between checkout shipping address and shipping method (something similar to adding a new static form)

Now the field I want is being rendered on the onepage checkout exactly where I want. But I have met with below problems.

1. 
   

   How to access the value of the custom field I have added above? I'm trying to save the value to a shippingAddress extension attribute. I added a mixin to setShippingInformationAction inside that try to do the below

   
   
   

   shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];

   
   

But above code actually fails since the element is not in the shipping-address-fieldset. I might be able to get the value through the window element. But is there a way to access this through Magento?

2. Is there a way to save the value of this element in local cache storage (Magento_Checkout/js/checkout-data) so the value will persist even after a page refresh?

Based on your question I'm under the assumption you already have your extension attributes set up. I have carried out a similar modification and hopefully my answer helps.

In your Custom module create a requirejs-config file to extend the default shipping processor/default

Namespace/CustomModule/view/frontend/requirejs-config.js
var config = 
 "map": 
 "*": 
 'Magento_Checkout/js/model/shipping-save-processor/default': 'Namespace_CustomModule/js/model/shipping-save-processor/default'
 
 
;

Add your extension attribute to the payload.

/*global define,alert*/
define(
 [
 'jquery',
 'ko',
 'Magento_Checkout/js/model/quote',
 'Magento_Checkout/js/model/resource-url-manager',
 'mage/storage',
 'Magento_Checkout/js/model/payment-service',
 'Magento_Checkout/js/model/payment/method-converter',
 'Magento_Checkout/js/model/error-processor',
 'Magento_Checkout/js/model/full-screen-loader',
 'Magento_Checkout/js/action/select-billing-address'
 ],
 function (
 $,
 ko,
 quote,
 resourceUrlManager,
 storage,
 paymentService,
 methodConverter,
 errorProcessor,
 fullScreenLoader,
 selectBillingAddressAction
 ) 
 'use strict';

 return 
 saveShippingInformation: function () 
 var payload;

 if (!quote.billingAddress()) 
 selectBillingAddressAction(quote.shippingAddress());
 
 //Adding the extension attributes to your shipping address
 payload = 
 addressInformation: 
 shipping_address: quote.shippingAddress(),
 billing_address: quote.billingAddress(),
 shipping_method_code: quote.shippingMethod().method_code,
 shipping_carrier_code: quote.shippingMethod().carrier_code,
 extension_attributes:
 custom_field: $('#custom_field').val(), 
 
 
 ;

 fullScreenLoader.startLoader();

 return storage.post(
 resourceUrlManager.getUrlForSetShippingInformation(quote),
 JSON.stringify(payload)
 ).done(
 function (response) 
 quote.setTotals(response.totals);
 paymentService.setPaymentMethods(methodConverter(response.payment_methods));
 fullScreenLoader.stopLoader();
 
 ).fail(
 function (response) 
 errorProcessor.process(response);
 fullScreenLoader.stopLoader();
 
 );
 
 ;
 
);

Save the Attribute to your Quote with a plugin (Not sure if you could use an observer here I have not checked).

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="MagentoCheckoutModelShippingInformationManagement">
 <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="NamespaceCustomModulePluginCheckoutSaveAddressInformation" />
 </type>

</config>

SaveAddressInformation.php

class SaveAddressInformation

 protected $quoteRepository;
 public function __construct(
 MagentoQuoteModelQuoteRepository $quoteRepository
 ) 
 $this->quoteRepository = $quoteRepository;
 
 /**
 * @param MagentoCheckoutModelShippingInformationManagement $subject
 * @param $cartId
 * @param MagentoCheckoutApiDataShippingInformationInterface $addressInformation
 */
 public function beforeSaveAddressInformation(
 MagentoCheckoutModelShippingInformationManagement $subject,
 $cartId,
 MagentoCheckoutApiDataShippingInformationInterface $addressInformation
 ) 
 $extensionAttributes = $addressInformation->getExtensionAttributes();
 $customField = $extensionAttributes->getCustomField();
 $quote = $this->quoteRepository->getActive($cartId);
 $quote->setCustomField($customField);

 

Save the Attribute to your order with an Observer
events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
 <event name="sales_model_service_quote_submit_before">
 <observer name="unique_observer_name" instance="NamespaceCustomModuleObserverSaveCustomFieldToOrder"/>
 </event>
</config>

SaveCustomFieldToOrder.php

class SaveCustomFieldToOrder implements ObserverInterface

 /**
 * @var MagentoFrameworkObjectManagerInterface
 */
 protected $_objectManager;

 /**
 * @param MagentoFrameworkObjectManagerInterface $objectmanager
 */
 public function __construct(MagentoFrameworkObjectManagerInterface $objectmanager)
 
 $this->_objectManager = $objectmanager;
 

 public function execute(EventObserver $observer)
 
 $order = $observer->getOrder();
 $quoteRepository = $this->_objectManager->create('MagentoQuoteModelQuoteRepository');
 /** @var MagentoQuoteModelQuote $quote */
 $quote = $quoteRepository->get($order->getQuoteId());
 $order->setCustomField( $quote->getCustomField() );

 return $this;
 

Create a plugin for this
MagentoCheckoutBlockCheckoutLayoutProcessor::process method.

Make an entry in di.xml on this path

app/code/CompanyName/Module/etc/frontend/di.xml

Create plugin class on this Directory.

app/code/CompanyNameModuleModelPluginCheckout

2 => Create plugin class on this Directory.
app/code/CompanyNameModuleModelPluginCheckout

 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
 'component' => 'Magento_Ui/js/form/element/abstract',
 'config' => [
 'customScope' => 'shippingAddress.custom_attributes',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/input',
 'options' => [],
 'id' => 'custom-field'
 ],
 'dataScope' => 'shippingAddress.custom_attributes.custom_field',
 'label' => 'Custom Field',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [],
 'sortOrder' => 250,
 'id' => 'custom-field'
 ];


 return $jsLayout;
}

}

Once this is done, check the checkout page.