Добавить средство выбора даты на странице оформления заказа

Я попытался добавить средство выбора даты после этой страницы. Но когда я открываю страницу оформления заказа, это всего лишь значок загрузки, и когда я проверяю элемент, на Test_Show/js/view/custom-checkout написано, что сценарий ошибки. Вот мой код ниже.

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>
Author: Edwin Widhiyanto, 2017-10-17
Source

1 answers

Изменить местоположение custom-checkout.js до

Test/Show/view/frontend/web/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/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-шаблона должно быть 

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

Удалите статическое содержимое и очистите кэш.

 4
Author: Sohel Rana, 2017-10-17 04:00:41