Magento 2 Checkout - dynamically populated dropdown in shippment method section - class

Question

I am programming a custom shipping method (store pickup).
I added an additional Dropdown Menu with this tutorial: https://zanetabaran.com/how-to-in-magento-2-how-to-add-additional-dropdown-with-options-based-on-selected-shipping-methods-in-the-checkout/
The Values from the dropdown are static at the moment, coming from a js-File from my module->
Pastebin
updateDropdownValues: function(method) {
var valuesCollection = [];
if(method['carrier_code'] == 'customshipping'){
valuesCollection = [
{
label: 'Store1',
value: 'Store1'
},
{
label: 'Store2',
value: 'Store2'
},
{
label: 'Store3',
value: 'Store3'
}
];
} else {
valuesCollection = [];
}
self.updateDropdown(valuesCollection);
},
The dropdown is defined in checkout_index_index.xml -> Pastebin
<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">XXX_CustomShipping/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="markt" xsi:type="array">
<item name="component" xsi:type="string">XXX_CustomShipping/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 choose a market</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>
How can I get values from a class into the dropdown? Right now, I only can access values from the quote class. I need to access my own (just fyi: to show different availabilities for the different stores)
If more infos needed, feel free to ask for them. Thank you in advance.

Answer 1

Ok, i figured it out.
I added an index-controller <Your_Vendor>/<YourModule>/Controller/Options/index.php, and declared it in <Your_Vendor>/<YourModule>/etc/frontent/routes.xml and can get the values with ajax:
updateDropdownValues: function(method) {
var valuesCollection = [];
if(method['carrier_code'] == 'customshipping'){
$.ajax({
url:"/<your_declared_route>/Optionen/index",
contentType: "application/json",
async:false,
success:function (data) {
valuesCollection = [];
var wert=[];
$.each(data, function (index, thevalue) {
wert=[];
wert["label"]=index;
wert["value"]=thevalue;
valuesCollection.push(wert);
});
},
error: function (xhr, ajaxOptions, thrownError) {
console.log("There has been an error retrieving the values from the database.");
}
});
}
else {
valuesCollection = [];
}
self.updateDropdown(valuesCollection);
},
My routes.xml:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="yourid" frontName="<your_declared_route>">
<module name="<your_Vendor/Your_Modulname>" />
</route>
</router>
</config>

Answer 2

I will extend this answer with custom collection( Custom Table ) for any type of dropdown generation. Ex - Show Stores Drop Down.
let customurl = urlBuilder.build('pickupstores/storeoptions/index');
// urlBuilder.build('frontname/storeoptions/index');
updateDropdownValues: function(method) {
var valuesCollection = [];
if(method['carrier_code'] === 'storepickup'){ //You can add your own logic here,
//I added this to show stores dropdown only customer choose custom shipping method **storepickup**
$.ajax({
url:customurl,
type: 'POST',
contentType: "application/json",
async:false,
success:function (data) {
valuesCollection = [];
$.each(JSON.parse(data) , function(index, val) {
valuesCollection.push({
label: val,
value: val
});
});
},
error: function (xhr, ajaxOptions, thrownError) {
console.log("There has been an error retrieving the values from the database.");
}
});
}
self.updateDropdown(valuesCollection);
},
My Controller file
<?php
namespace Ayakil\CustomShippingMethod\Controller\StoreOptions;
use Magento\Framework\App\Action\HttpPostActionInterface;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\Exception\NotFoundException;
use Ayakil\PickupStores\Model\PickupStores; // My custom module to get stores
use Magento\Framework\Controller\Result\JsonFactory;
class Index implements HttpPostActionInterface
{
protected $pickupStores;
protected $resultJsonFactory;
public function __construct(
PickupStores $pickupStores,
JsonFactory $resultJsonFactory,
array $data = array()
) {
$this->pickupStores = $pickupStores;
$this->resultJsonFactory = $resultJsonFactory;
}
public function execute(){
$resultJson = $this->resultJsonFactory->create();
$collection = $this->pickupStores->getCollection();
$storesCollection = $collection->getData();
$stores = [];
foreach($storesCollection as $store){
$stores[] = $store['store_name'];
}
return $resultJson->setData(json_encode($stores));
}
}
I hope this answer will save some ones time in future.