Ttdfjt

I need to add message "Need it by today? Anything is possible, it's just a phone call away" in a KO template. However, this template is created through the afterProcess method LayoutProcessPlugin.php file.

I do not know how to modify the template so that I can add this messaging after the Delivery Time Slots field. Right now to get around that, I created a custom js file that appends a HTML element after the Delivery Time Slots field. However, the JS file is loading before the KO template finishing loading so doesn't append the message. I wrapped it around a 3 second settimeout() event, but I do not think this is the best way to do this. Below I included the php file that processes the layout (LayoutProcessorPlugin.php) and the custom JS file I created (orderdeliverydate.js).

File: Bss/OrderDeliveryDate/Block/Plugin/Checkout/LayoutProcessorPlugin.php

class LayoutProcessorPlugin

 protected $_helper;
 const DELIVERY_FORM_DISPLAY_AT_SHIPPING_ADDRESS = 0;
 const DELIVERY_FORM_DISPLAY_AT_SHIPPING_METHOD = 1;
 const DELIVERY_FORM_DISPLAY_AT_REVIEW_PAYMENTS = 2;

 public function __construct(
 BssOrderDeliveryDateHelperData $helper
 ) 
 $this->_helper = $helper;
 

 public function afterProcess(
 MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
 array $jsLayout
 ) 
 $container = null;
 if(!$this->_helper->isEnabled()) return $jsLayout;
 if($this->_helper->getDisplayAt() == self::DELIVERY_FORM_DISPLAY_AT_SHIPPING_ADDRESS) 
 $container = 'shipping-address-fieldset';
 elseif($this->_helper->getDisplayAt() == self::DELIVERY_FORM_DISPLAY_AT_SHIPPING_METHOD) 
 $container = 'before-shipping-method-form';
 

 if($this->_helper->getTimeSlot())
 // before place order
 if($this->_helper->getDisplayAt() == self::DELIVERY_FORM_DISPLAY_AT_REVIEW_PAYMENTS)
 $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
 ['payment']['children']['payments-list']['children']['before-place-order']['children']['delivery_time_slot'] = [
 'component' => 'Magento_Ui/js/form/element/select',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/select',
 'id' => 'delivery-time-slot'
 ],
 'caption' => 'Please select delivery time slot',
 'dataScope' => 'shippingAddress.delivery_time_slot',
 'label' => 'Delivery Time Slot',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [],
 'options' => $this->_helper->getTimeSlot(),
 'sortOrder' => 201,
 'id' => 'delivery-time-slot',
 ];
 else
 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children'][$container]['children']['delivery_time_slot'] = [
 'component' => 'Magento_Ui/js/form/element/select',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/select',
 'id' => 'delivery-time-slot'
 ],
 'caption' => 'Please select delivery time slot',
 'dataScope' => 'shippingAddress.delivery_time_slot',
 'label' => 'Delivery Time Slot',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [],
 'options' => $this->_helper->getTimeSlot(),
 'sortOrder' => 201,
 'id' => 'delivery-time-slot',
 ];
 
 
 // before place order
 if($this->_helper->getDisplayAt() == self::DELIVERY_FORM_DISPLAY_AT_REVIEW_PAYMENTS)
 $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
 ['payment']['children']['payments-list']['children']['before-place-order']['children']['shipping_arrival_comments'] = [
 'component' => 'Magento_Ui/js/form/element/textarea',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/textarea',
 'id' => 'shipping-arrival-comments',
 'rows' => 5
 ],
 'dataScope' => 'shippingAddress.shipping_arrival_comments',
 'label' => 'Shipping Arrival Comment',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [],
 'sortOrder' => 202,
 'id' => 'shipping-arrival-comments'
 ];
 else
 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children'][$container]['children']['shipping_arrival_comments'] = [
 'component' => 'Magento_Ui/js/form/element/textarea',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/textarea',
 'id' => 'shipping-arrival-comments',
 'rows' => 5
 ],
 'dataScope' => 'shippingAddress.shipping_arrival_comments',
 'label' => 'Shipping Arrival Comment',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [],
 'sortOrder' => 202,
 'id' => 'shipping-arrival-comments'
 ];
 
 return $jsLayout;
 

File: MyVendor/OrderDeliveryDate/view/frontend/web/orderdeliverydate.js

require([
 'jquery'
], function($) 
 'use strict';


 $(document).ready(function() 
 console.log("I am getting executed");
 setTimeout(function()
 
 console.log("In Timeout");
 if ($("div[name='shippingAddress.delivery_time_slot']").length) 
 console.log("It exists!");
 $("div[name='shippingAddress.delivery_time_slot']").after("<div class='field' id='delivery_time_sot_message'>Need it by today? Anything is possible, it's just a phone call away</div>");
 
 , 3000);




 );
);

I think the way to do this is to make a copy of the file Magento_Ui/view/frontend/web/templates/form/field.html into your module under module_directory/view/frontend/web/templates/form/. You'll then insert your text element into this file somewhere towards the bottom.
Then modify the LayoutProcessorPlugin by replacing the occurrences of ui/form/field under the 'Delivery Time Slot' element with Your_Module/form/field.