X-core
@X-core
начинающий веб разработчик

Как отобразить datepicker в форме оформлении заказа Magento2?

скачал готовый модуль добавления даты и времени, установил и почистил кеш, но не отбражается кнопка добавления даты на странице site.com/checkout,только присутствует поле инпут.
603f655793e17420446005.jpeg
Так же имеются две ошибки в консоле разработчика, возможно из-за них не отображается, не могу знать,т.к. только изучаю Мадженто2.
Возможно у вас найдется решение,буду длагодарен.
код, на который ссылается ошибка:
define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Ecomteck_DeliveryDate/delivery-date-block'
        },
        initialize: function () {
            this._super();
            var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
            var enableTimePicker = window.checkoutConfig.shipping.delivery_date.enableTimePicker;
            var noday = window.checkoutConfig.shipping.delivery_date.noday;
            var hourMin = parseInt(window.checkoutConfig.shipping.delivery_date.hourMin);
            var hourMax = parseInt(window.checkoutConfig.shipping.delivery_date.hourMax);
            var afterDays = parseInt(window.checkoutConfig.shipping.delivery_date.afterDays);
            var format = window.checkoutConfig.shipping.delivery_date.format;
            if(!format) {
                format = 'yy-mm-dd';
            }
            var disabledDay = disabled.split(",").map(function(item) {
                return parseInt(item, 10);
            });

            ko.bindingHandlers.datetimepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);
                    //initialize datetimepicker
                    var options = {
                        showTimepicker: false,
                        minDate: afterDays,
                        dateFormat:format
                    };
                    if(enableTimePicker){
                        options.hourMin = hourMin;
                        options.hourMax = hourMax;
                        options.showTimepicker = true;
                    }

                    if(!noday) {
                        options.beforeShowDay = function(date) {
                            var day = date.getDay();
                            if(disabledDay.indexOf(day) > -1) {
                                return [false];
                            } else {
                                return [true];
                            }
                        }
                    }

                    $el.datetimepicker(options);

                    var writable = valueAccessor();
                    if (!ko.isObservable(writable)) {
                        var propWriters = allBindingsAccessor()._ko_property_writers;
                        if (propWriters && propWriters.datetimepicker) {
                            writable = propWriters.datetimepicker;
                        } else {
                            return;
                        }
                    }
                    writable($(element).datetimepicker("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;
        }
    });
});

Ошибки:

[Report Only] Refused to load the image 'https://www.gstatic.com/images/branding/product/2x/translate_24dp.png' because it violates the following Content Security Policy directive: "img-src assets.adobedtm.com amcglobal.sc.omtrdc.net dpm.demdex.net cm.everesttech.net widgets.magentocommerce.com data: www.googleadservices.com www.google-analytics.com www.paypalobjects.com t.paypal.com *.ftcdn.net *.behance.net www.paypal.com fpdbs.paypal.com fpdbs.sandbox.paypal.com *.vimeocdn.com s.ytimg.com d3sbl0c71oxeok.cloudfront.net dhkkzdfmpzvap.cloudfront.net d2bpzs5y44q6e0.cloudfront.net d37shgu97oizpd.cloudfront.net d1zlqll3enr74n.cloudfront.net d1jynp0fpwn93a.cloudfront.net d2cb3tokgpwh3v.cloudfront.net d1re8bfxx3pw6e.cloudfront.net d35u8xwkxs8vpe.cloudfront.net d13s9xffygp5o.cloudfront.net d388nbw0dwi1jm.cloudfront.net d11p2vtu3dppaw.cloudfront.net d3r89hiip86hka.cloudfront.net dc7snq0c8ipyk.cloudfront.net d5c7kvljggzso.cloudfront.net d2h8yg3ypfzua1.cloudfront.net d1b556x7apj5fb.cloudfront.net draz1ib3z71v2.cloudfront.net dr6hdp4s5yzfc.cloudfront.net d2bomicxw8p7ii.cloudfront.net d3aypcdgvjnnam.cloudfront.net d2a3iuf10348gy.cloudfront.net *.ssl-images-amazon.com *.ssl-images-amazon.co.uk *.ssl-images-amazon.co.jp *.ssl-images-amazon.jp *.ssl-images-amazon.it *.ssl-images-amazon.fr *.ssl-images-amazon.es *.ssl-images-amazon.de *.media-amazon.com *.media-amazon.co.uk *.media-amazon.co.jp *.media-amazon.jp *.media-amazon.it *.media-amazon.fr *.media-amazon.es *.media-amazon.de *.yotpo.com 'self' 'unsafe-inline'".

knockout.js:3381 Uncaught TypeError: Unable to process binding "datetimepicker: function(){return true }"
Message: $el.datetimepicker is not a function
    at init (delivery-date-block.js:54)
    at knockout.js:3358
    at Object.ignore (knockout.js:1470)
    at knockout.js:3357
    at Object.arrayForEach (knockout.js:159)
    at applyBindingsToNodeInternal (knockout.js:3343)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3223)
    at applyBindingsToDescendantsInternal (knockout.js:3205)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3232)
    at applyBindingsToDescendantsInternal (knockout.js:3205)
файл delivery-block.js
<code lang="javascript">
define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Ecomteck_DeliveryDate/delivery-date-block'
        },
        initialize: function () {
            this._super();
            var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
            var enableTimePicker = window.checkoutConfig.shipping.delivery_date.enableTimePicker;
            var noday = window.checkoutConfig.shipping.delivery_date.noday;
            var hourMin = parseInt(window.checkoutConfig.shipping.delivery_date.hourMin);
            var hourMax = parseInt(window.checkoutConfig.shipping.delivery_date.hourMax);
            var afterDays = parseInt(window.checkoutConfig.shipping.delivery_date.afterDays);
            var format = window.checkoutConfig.shipping.delivery_date.format;
            if(!format) {
                format = 'yy-mm-dd';
            }
            var disabledDay = disabled.split(",").map(function(item) {
                return parseInt(item, 10);
            });

            ko.bindingHandlers.datetimepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);
                    //initialize datetimepicker
                    var options = {
                        showTimepicker: false,
                        minDate: afterDays,
                        dateFormat:format
                    };
                    if(enableTimePicker){
                        options.hourMin = hourMin;
                        options.hourMax = hourMax;
                        options.showTimepicker = true;
                    }

                    if(!noday) {
                        options.beforeShowDay = function(date) {
                            var day = date.getDay();
                            if(disabledDay.indexOf(day) > -1) {
                                return [false];
                            } else {
                                return [true];
                            }
                        }
                    }

                    $el.datetimepicker(options);

                    var writable = valueAccessor();
                    if (!ko.isObservable(writable)) {
                        var propWriters = allBindingsAccessor()._ko_property_writers;
                        if (propWriters && propWriters.datetimepicker) {
                            writable = propWriters.datetimepicker;
                        } else {
                            return;
                        }
                    }
                    writable($(element).datetimepicker("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;
        }
    });
});


</code>
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы