Magento Question posted in
The official documentation can be found here.

Magento 2 Checkout – dynamically populated dropdown in shippment method section

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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 AyakilCustomShippingMethodControllerStoreOptions;

use MagentoFrameworkAppActionHttpPostActionInterface;
use MagentoFrameworkAppResponseInterface;
use MagentoFrameworkControllerResultInterface;
use MagentoFrameworkExceptionNotFoundException;
use AyakilPickupStoresModelPickupStores; // My custom module to get stores

use MagentoFrameworkControllerResultJsonFactory;

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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search