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>
