1

I tried to add date picker following this page. But when i open the checkout page, it's all just loading icon, and when i inspect the element, it's said error script on Test_Show/js/view/custom-checkout. Here is my code below.

Test/Show/etc/frontend/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="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">Test\Show\Model\CustomDatePick</item>
            </argument>
        </arguments>
    </type>
</config>

Test/Show/Model/CustomDatePick.php

<?php
namespace Test\Show\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Store\Model\ScopeInterface;

class CustomDatePick implements ConfigProviderInterface
{
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $scopeConfiguration;


    /**
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
     * @codeCoverageIgnore
     */
    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
    ) {
        $this->scopeConfiguration = $scopeConfiguration;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $showHide = [];
        $enabled = $this->scopeConfiguration->getValue('learning_block_config/general/enabled', ScopeInterface::SCOPE_STORE);
        $showHide['show_hide_custom_block'] = ($enabled)?true:false;
        return $showHide;
    }
}

Test/Show/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Test_Show/js/view/custom-checkout</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Test/Show/js/view/custom-checkout.js

define([
    'jquery',
    "underscore",
    'ko',
    'uiComponent',
    'mage/calendar'
], function ($, _, ko, Component, calendar) {
    'use strict';
    var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
    return Component.extend({
        defaults: {
            template: 'Test_Show/view/frontend/templates/custom-checkout'
        },
        initialize: function () {
            this._super();
            ko.bindingHandlers.datepicker = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);


                //initialize datepicker with some optional options
                var options = { minDate: 0
                };
                $el.datepicker(options);

                var writable = valueAccessor();
                if (!ko.isObservable(writable)) {
                    var propWriters = allBindingsAccessor()._ko_property_writers;
                    if (propWriters && propWriters.datepicker) {
                        writable = propWriters.datepicker;
                    } else {
                        return;
                    }
                }
                writable($(element).datepicker("getDate"));

            },
            update: function(element, valueAccessor)   {
                var widget = $(element).data("DateTimePicker");
                //when the view model is updated, update the widget
                if (widget) {
                    var date = ko.utils.unwrapObservable(valueAccessor());
                    widget.date(date);
                }
            }
        };

        return this;
    },
    canVisibleBlock: show_hide_custom_blockConfig
});
});

Test/Show/view/frontend/templates/custom-checkout.phtml

<input data-bind="datepicker: true" type="text" class="input-text required-entry" id="calendar_inputField" name="calendar_inputField" aria-required="true" >

<script>
     require([
          "jquery",
          "mage/calendar"
     ], function($){
         $("#calendar_inputField").calendar({
              buttonText:"<?php echo __('Select Date') ?>",
         });
       });
</script>
  • We didn't use the phtml file for form instead we have used HTML file. In this case where the script to place which is mentioned in "custom-checkout.phtml". Can I put this on HTML file? – Siva May 30 at 6:50
4

Change location custom-checkout.js to

Test/Show/view/frontend/web/js/view/custom-checkout.js

And content:


define([
    'jquery',
    "underscore",
    'ko',
    'uiComponent',
    'mage/calendar'
], function ($, _, ko, Component, calendar) {
    'use strict';
    var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
    return Component.extend({
        defaults: {
            template: 'Test_Show/view/custom-checkout'
        },
        initialize: function () {
            this._super();
            ko.bindingHandlers.datepicker = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);


                    //initialize datepicker with some optional options
                    var options = { minDate: 0 };
                    $el.datepicker(options);

                    var writable = valueAccessor();
                    if (!ko.isObservable(writable)) {
                        var propWriters = allBindingsAccessor()._ko_property_writers;
                        if (propWriters && propWriters.datepicker) {
                            writable = propWriters.datepicker;
                        } else {
                            return;
                        }
                    }
                    writable($(element).datepicker("getDate"));

                },
                update: function(element, valueAccessor)   {
                    var widget = $(element).data("DateTimePicker");
                    //when the view model is updated, update the widget
                    if (widget) {
                        var date = ko.utils.unwrapObservable(valueAccessor());
                        widget.date(date);
                    }
                }
            };

            return this;
        },
        canVisibleBlock: show_hide_custom_blockConfig
    });
});

Html template location should be

Test/Show/view/frontend/web/template/view/custom-checkout.html

Remove static content and clear cache.

  • how to hide a time by options – divya sekar Feb 21 at 13:31

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.