0

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(
        \Bss\OrderDeliveryDate\Helper\Data $helper
        ) {
        $this->_helper = $helper;
    }

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $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);




    });
});
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.