0

I used module delivery date from: https://github.com/sohelrana09/magento2-module-delivery-date/tree/master/SR/DeliveryDate

I want to this module add custom dropdown option, should be like this: enter image description here

Here I edit file: Modify following class app/code/SR/DeliveryDate/Model/DeliveryDateConfigProvider.php

namespace SR\DeliveryDate\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Store\Model\ScopeInterface;

class DeliveryDateConfigProvider implements ConfigProviderInterface
{
    const XPATH_FORMAT = 'sr_deliverydate/general/format';
    const XPATH_DISABLED = 'sr_deliverydate/general/disabled';
    const XPATH_HOURMIN = 'sr_deliverydate/general/hourMin';
    const XPATH_HOURMAX = 'sr_deliverydate/general/hourMax';

    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $storeManager;

    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $scopeConfig;

    /**
     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->storeManager = $storeManager;
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $store = $this->getStoreId();
        $disabled = $this->scopeConfig->getValue(self::XPATH_DISABLED, ScopeInterface::SCOPE_STORE, $store);
        $hourMin = $this->scopeConfig->getValue(self::XPATH_HOURMIN, ScopeInterface::SCOPE_STORE, $store);
        $hourMax = $this->scopeConfig->getValue(self::XPATH_HOURMAX, ScopeInterface::SCOPE_STORE, $store);
        $format = $this->scopeConfig->getValue(self::XPATH_FORMAT, ScopeInterface::SCOPE_STORE, $store);

        $noday = 0;
        if($disabled == -1) {
            $noday = 1;
        }

        $config = [
            'shipping' => [
                'delivery_date' => [
                    'format' => $format,
                    'disabled' => $disabled,
                    'noday' => $noday,
                    'hourMin' => $hourMin,
                    'hourMax' => $hourMax,
                    'customOptionValue' => $this->getCustomOptionValue()
                ]
            ]
        ];

        return $config;
    }

    public function getStoreId()
    {
        return $this->storeManager->getStore()->getStoreId();
    }

    public function getCustomOptionValue()
    {
        return [
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3'
        ];
    }
}

app/code/SR/DeliveryDate/view/frontend/web/js/view/delivery-date-block.js

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

    return Component.extend({
        defaults: {
            template: 'SR_DeliveryDate/delivery-date-block',
            customOptionValue: ''
        },
        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.datetimepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);
                    //initialize datetimepicker
                    if(noday) {
                        var options = {
                            minDate: 0,
                            dateFormat:format,
                            hourMin: hourMin,
                            hourMax: hourMax
                        };
                    } else {
                        var options = {
                            minDate: 0,
                            dateFormat:format,
                            hourMin: hourMin,
                            hourMax: hourMax,
                            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;
        },
        initObservable: function () {

            this._super()
                .observe([
                    'customOptionValue'
                ]);
            return this;
        },
        getCustomOption: function() {
            return _.map(window.checkoutConfig.shipping.delivery_date.customOptionValue, function(value, key) {
                return {
                    'value': key,
                    'label': value
                }
            });
        }
    });
});

app/code/SR/DeliveryDate/view/frontend/web/template/fields/delivery-date.html

   <input class="input-text" type="text" data-bind="
    event: {change: userChanges},
    hasFocus: focused,
    value: value,
    datetimepicker: true,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        disabled: disabled
    }" readonly="true"/>

    <select name="custom_option"
            class="select"
            data-bind="
                                  options: getCustomOption(),
                                  optionsValue: 'value',
                                  optionsText: 'label',
                                  optionsCaption: $t('Option'),
                                  value: customOptionValue">
    </select>

and here is result: enter image description here

Something went wrong. Because when I select this dropdown then no option available. Can anyone check this code?

update2:

Now this option working but I see is any issue with confirmation of the order. In 2/2 step checkout during select payment method and confirm order we received issue. enter image description here

log:

[2020-04-25 20:55:45] main.CRITICAL: Invalid Delevery Date {"exception":"[object] (Exception(code: 0): Invalid Delevery Date at /home/usr/domains/domain.com/public_html/app/code/SR/DeliveryDate/Observer/SalesModelServiceQuoteSubmitBefore.php:46)"} []
1

Your all code correct.But you show output put the wrong file.So You html code put delivery-date-block.html file .

<!-- ko foreach: getRegion('delivery-date-block') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<select name="custom_option"
            class="select"
            data-bind="
                                  options: getCustomOption(),
                                  optionsValue: 'value',
                                  optionsText: 'label',
                                  optionsCaption: $t('Option'),
                                  value: customOptionValue">
    </select>

After run the : ---

php bin/magento s:up
php bin/magento c:f

And check output :-

enter image description here

Hope help you

Thanks...

9
  • Now this option working but I see is any issue with confirmation of the order. In 2/2 step checkout during select payment method and confirm order we received issue. Can you plaese check our update? – Sylvester Apr 25 '20 at 20:58
  • you means showing issues ??? yes, what issues showing??? – Mohit Patel Apr 25 '20 at 21:13
  • I update my question with error log and screen. – Sylvester Apr 25 '20 at 21:18
  • my place order button working fine and place the order – Mohit Patel Apr 25 '20 at 21:22
  • i think you run all command with permission – Mohit Patel Apr 25 '20 at 21:23

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.