My requirement
I want to show available stores in checkout when customer choose Store pickup( Custom shipping method).
I did not use Magento default because inventory is not managing location wise.
Great Thanks to this wonderful Article.I followed this Article https://zanetabaran.com/how-to-in-magento-2-how-to-add-additional-dropdown-with-options-based-on-selected-shipping-methods-in-the-checkout/ to do the task. But i am getting below error on console.
[2022-10-28 09:03:23] [ERROR] Failed to load the "Ayakil_CustomShippingMethod/additional_shipping_option" template requested by "checkout.steps.shipping-step.shippingAddress.shippingAdditional.shipping-option-wrapper".
I will share my files below. checkout_index_index.xml file - ( Ayakil/CustomShippingMethod/view/frontend/layout/checkout_index_index.xml )
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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="shipping-option-wrapper" xsi:type="array">
<!-- Component Magento_Checkout/js/view/additional-shipping-option is used as a wrapper for content -->
<item name="component" xsi:type="string">Ayakil_CustomShippingMethod/js/view/additional_shipping_option</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="sortOrder" xsi:type="string">0</item>
<item name="children" xsi:type="array">
<item name="shipping-option" xsi:type="array">
<!-- uiComponent is used as a wrapper for select (its template will render all children as a list) -->
<item name="component" xsi:type="string">uiComponent</item>
<!-- the following display area is used in template -->
<item name="displayArea" xsi:type="string">additionalShippingOptionField</item>
<item name="children" xsi:type="array">
<item name="select-date" xsi:type="array">
<item name="component" xsi:type="string">Ayakil_CustomShippingMethod/js/view/shipping_option_select</item>
<item name="config" xsi:type="array">
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
<item name="customScope" xsi:type="string">shippingOptionSelect</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
</item>
<item name="dataScope" xsi:type="string">shippingOptionSelect.select_data</item>
<item name="label" xsi:type="string" translate="true">Please select a day of delivery</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="validate-no-empty" xsi:type="boolean">true</item>
</item>
<item name="sortOrder" xsi:type="number">0</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
additional_shipping_option.js file - (Ayakil/CustomShippingMethod/view/frontend/web/js/view/additional_shipping_option.js)
define([
'uiComponent',
'ko',
'Magento_Checkout/js/model/quote'
], function (Component, ko, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Ayakil_CustomShippingMethod/additional_shipping_option'
},
initObservable: function () {
var self = this._super();
this.showAdditionalOption = ko.computed(function() {
var method = quote.shippingMethod();
if(method && method['carrier_code'] !== undefined) {
return true;
}
return false;
}, this);
return this;
}
});
});
shipping_option_select.js file - (Ayakil/CustomShippingMethod/view/frontend/web/js/view/shipping_option_select.js)
edefine([
'jquery',
'ko',
'Magento_Ui/js/form/element/select',
'Magento_Checkout/js/model/quote'
], function ($, ko, select, quote) {
'use strict';
var self;
return select.extend({
initialize: function () {
self = this;
this._super();
this.selectedShippingMethod = quote.shippingMethod();
quote.shippingMethod.subscribe(function(){
var method = quote.shippingMethod();
if(method && method['carrier_code'] !== undefined) {
if(!self.selectedShippingMethod || (self.selectedShippingMethod && self.selectedShippingMethod['carrier_code'] != method['carrier_code'])) {
self.selectedShippingMethod = method;
self.updateDropdownValues(method);
}
}
}, null, 'change');
},
/**
* Called when shipping method is changed.
* Also called when initial selection is made.
*
* @param value
* @returns {Object} Chainable
*/
updateDropdownValues: function(method) {
var valuesCollection = [];
if(method['carrier_code'] == 'freeshipping'){
valuesCollection = [
{
label: 'Monday',
value: 'Monday'
},
{
label: 'Wednesday',
value: 'Wednesday'
},
{
label: 'Friday',
value: 'Friday'
}
];
} else {
valuesCollection = [
{
label: 'Today',
value: 'Today'
},
{
label: 'Tomorrow',
value: 'Tomorrow'
}
];
}
self.updateDropdown(valuesCollection);
},
/**
* Called when option is changed in store selection list.
* Also called when initial selection is made.
*
* @param value
* @returns {Object} Chainable
*/
updateDropdown: function(value) {
this.setOptions(value);
}
});
});
additional_shipping_option.html file - ((Ayakil/CustomShippingMethod/view/frontend/web/template/additional_shipping_option.html)
<div class="additional-shipping-option-wrapper" data-bind="visible: showAdditonalOption()" style="display: block;"> Test
<div class="step-title" data-role="title" data-bind="i18n: 'Choose Store'"></div>
<!-- ko foreach: element.getRegion('additonalShippingOptionField') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
Can anyone help me to sort this issue?
