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:
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:
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.
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)"} []
