0

I have a datepicker block on the checkout shipping step that I would like to be able to hide based on a condition. If the user doesn't qualify for a certain shipping method, I would like for the datepicker to be hidden. I tried adding this logic to the js file associated with the datepicker block, but nothing worked.

HTML

<div class="date-wrapper" id="date-wrapper" >
<label class="label">Delivery Date</label>
<div class="control">
    <input class="input-text" type="text" data-bind="datepicker: true"  name="delivery_date" id="delivery_date" readonly="true"/>
</div>

<label class="label">Comment</label>
<div class="control">
    <textarea name="delivery_comment" id="delivery_comment" ></textarea>
</div>
</div>
</br>

JS

define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'SR_DeliveryDate/delivery-date-block'
        },
        initialize: function () {
            this._super();
            var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
            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 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.datepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);
                    //initialize datetimepicker
                    if(noday) {
                        var options = {
                            minDate: 0,
                            dateFormat:format

                        };
                    } else {
                        var options = {
                            minDate: 0,
                            dateFormat:format,
                            beforeShowDay: function(date) {
                                var day = date.getDay();
                                if(disabledDay.indexOf(day) > -1) {
                                    return [false];
                                } else {
                                    return [true];
                                }
                            }
                        };
                    }

                    $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;
        }
    });
});
0

In your code you can call one method which return it is visible or not.

JS

define([
'jquery',
'ko',
'uiComponent' 
],function ($, ko, Component) {
'use strict';

return Component.extend({
    defaults: {
        template: 'SR_DeliveryDate/delivery-date-block'
    },

    initialize: function () {
        this._super();
        var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
        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 format = window.checkoutConfig.shipping.delivery_date.format;
    this.showDatepicker(disabled);
        if(!format) {
            format = 'yy-mm-dd';
        }
        var disabledDay = disabled.split(",").map(function(item) {
            return parseInt(item, 10);
        });

        ko.bindingHandlers.datepicker = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                var $el = $(element);
                //initialize datetimepicker
                if(noday) {
                    var options = {
                        minDate: 0,
                        dateFormat:format

                    };
                } else {
                    var options = {
                        minDate: 0,
                        dateFormat:format,
                        beforeShowDay: function(date) {
                            var day = date.getDay();
                            if(disabledDay.indexOf(day) > -1) {
                                return [false];
                            } else {
                                return [true];
                            }
                        }
                    };
                }

                $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;
    },
   showDatepicker:function () {
        //put your condition here. I assumed this as your condition
        var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
         //if disabled return false to not to show block else return true to display        
        if(disabled){
           return false;
        }else{
            return true;
        }
    },
  });
});

Now in your HTML Template

<!-- ko if: (showDatepicker()) -->
<div class="date-wrapper" id="date-wrapper" >
<label class="label">Delivery Date</label>
<div class="control">
    <input class="input-text" type="text" data-bind="datepicker: true"  name="delivery_date" id="delivery_date" readonly="true"/>
</div>

<label class="label">Comment</label>
<div class="control">
    <textarea name="delivery_comment" id="delivery_comment" ></textarea>
</div>
</div>
</br>
<!-- /ko -->

After that you need to clear cache and deploy static content.

  • Say I have a global PHP variable from a model file, can I call it within the JS function? I tried assigning a php value to a javascript variable within that script and it seems to accept only strictly JS/JQuery. I ask this because I need to hide the block based on a PHP response from the collectrates function in my shipping module – jameson1128 Feb 22 '17 at 9:25
  • Yes you can do it also but for that you need to call that controller which will return that – Salma Saiyad Feb 22 '17 at 9:50
  • Well thank you very much. You have helped me out greatly – jameson1128 Feb 22 '17 at 21:13

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.