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>
1
  • 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
    Commented May 30, 2019 at 6:50

1 Answer 1

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.

1
  • how to hide a time by options Commented Feb 21, 2019 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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