4

I want to add an afterRender callback to the delivery_time_slot element. However I am not sure how to do this using the LayoutProcessorPlugin.php. Is this added through the LayoutProcessorPluging.php or from the select.html template? Also where do I include the callback method? In the select component js file?

I have extended both the element template and the component for the select form element.

LayoutProcessorPlugin.php

        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' => 'MyVendor_MyModule/js/form/element/select',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'MyVendor_MyModule/form/element/select',
                    'id' => 'delivery-time-slot'
                ],
                'caption' => 'Please select delivery time slot',
                'dataScope' => 'shippingAddress.delivery_time_slot',
                'label' => 'Delivery Time Slot',
                'notice' => 'Need it by today? Anything is possible, it\'s just a phone call away',
                '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' => 'MyVendor_MyModule/js/form/element/select',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'MyVendor_MyModule/form/element/select',
                    'id' => 'delivery-time-slot'
                ],
                'caption' => 'Please select delivery time slot',
                'dataScope' => 'shippingAddress.delivery_time_slot',
                'label' => 'Delivery Time Slot',
                'notice' => 'Need it by today? Anything is possible, it\'s just a phone call away',
                'provider' => 'checkoutProvider',
                'visible' => true,
                'validation' => [],
                'options' => $this->_helper->getTimeSlot(),
                'sortOrder' => 201,
                'id' => 'delivery-time-slot',
            ];
        }

MyVendor/MyModule/view/base/web/js/form/element/select.js

define([
    'jquery',
    'ko',
    'Magento_Ui/js/form/element/select',
    'MyVendor_MyModule/js/view/shipping',
    'MyVendor_MyModule/js/order-delivery-date'
], function ($,
             ko,
             Select,
             Shipping,
             OrderDeliveryDate
) {
    'use strict';

    ko.bindingHandlers.timeSlotBinding = {
        init: function(element, valueAccessor) {
            OrderDeliveryDate.saveTimeSlots();
            OrderDeliveryDate.datePickerRadioTrigger();
        },
        update: function(element, valueAccessor) {
            OrderDeliveryDate.datePickerRadioTrigger();
        }
    }

    return Select.extend({

    });


});

MyVendor/MyModule/view/frontend/web/template/form/element/select.html

<select class="admin__control-select" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': noticeId,
        placeholder: placeholder
    },
    timeSlotBinding: value
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label'"
        />
  • have you found any solution for this? – Knight017 Nov 23 '19 at 16:20
1

You can add do this by using the afterRender custom binding. In select.html, and in the data-bind attribute, add: afterRender: yourMethod().

Create a yourMethod() function inside the returned object of select.js:

return Select.extend({
    yourMethod: function() {
        console.log('action');
    }
});
| improve this answer | |

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.