2

i have followed this reference link https://github.com/sbodak/magento2-checkout-custom-form it is working fine for input fields saving.

1) I would like to display custom drop down field with the options (dynamically) at checkout page, in the layout file checkout_index_index.xml i have hard coded drop down values now. if want to achieve dynamically how to do?

checkout_index_index.xml

<?xml version="1.0"?>
<page 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="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom-checkout-form-container" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Bodak_CheckoutCustomForm/js/view/checkout/custom-checkout-form</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="template" xsi:type="string">Bodak_CheckoutCustomForm/checkout/custom-checkout-form</item>
                                                                    </item>
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="custom-checkout-form-fieldset" xsi:type="array">
                                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                                            <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                                            <item name="children" xsi:type="array">
                                                                                <item name="checkout_buyer_name" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>                                                                                        
                                                                                    </item>
                                                          <!-- Added for drop down values hard coded-->                          
                                                          <item name="options" xsi:type="array">
                                                                <item name="0" xsi:type="array">
                                                                    <item name="label" xsi:type="string">Please select value</item>
                                                                    <item name="value" xsi:type="string"></item>
                                                                </item>
                                                                <item name="1" xsi:type="array">
                                                                    <item name="label" xsi:type="string">Value 1</item>
                                                                    <item name="value" xsi:type="string">value_1</item>
                                                                </item>
                                                                <item name="2" xsi:type="array">
                                                                    <item name="label" xsi:type="string">Value 2</item>
                                                                    <item name="value" xsi:type="string">value_2</item>
                                                                </item>
                                                            </item>
                                                            <!-- Added for drop down values hard coded -->         
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_name</item>
                                                                                    <item name="label" xsi:type="string">Buyer name</item>
                                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                                </item>

                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

enter image description here

Instead of static how to do dynamic?

1
  • Looks like Knockout.js job.
    – Avesh Naik
    Jul 30, 2018 at 13:16

1 Answer 1

0

You can create a plugin for the checkout LayoutProcessor to dynamically populate the options for that dropdown.

1. Declare the Plugin

app/code/YourNamespace/YourModule/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="your_checkout_layout_processor" type="YourNamespace\YourModeul\Plugin\Block\Checkout\LayoutProcessorPlugin"/>
    </type>
</config>

2. Create the "afterProcess" Plugin

Simplified Hardcoded Version

app/code/YourNamespace/YourModule/Plugin/Block/Checkout/LayoutProcessorPlugin.php

<?php
namespace YourNamespace\YourModule\Plugin\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

class LayoutProcessorPlugin
{
    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param LayoutProcessor $processor
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $processor, array $jsLayout): array
    {
        $yourSelect = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
        ['custom-checkout-form-container']['children']['custom-checkout-form-fieldset']['children']
        ['checkout_buyer_name'];

        if (isset($yourSelect)) {
            $yourSelect['options'] = $this->getYourOptions();
        }

        return $jsLayout;
    }

    /**
     * Get referral options
     *
     * @return array
     * @todo inject the classes you need in the construct and call it here
     */
    protected function getYourOptions()
    {
        return [
            [
                'value' => '',
                'label' => __('-- Please Select --')
            ],
            [
                'value' => 'value_1',
                'label' => __('Value 1')
            ],
            [
                'value' => 'value_2',
                'label' => __('Value 2')
            ]
        ];
    }
}

The above is basically the same as what you wrote in the XML for the options. I kept the values hardcoded for now to keep it simple. However, now that we are in the PHP we can inject a model and dynamically populate the options by adding the __construct() and updating the method with the array...

Dynamic Version

<?php
namespace YourNamespace\YourModule\Plugin\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessor;
use Magento\Directory\Model\ResourceModel\Region\CollectionFactory;

class LayoutProcessorPlugin
{
    /**
     * @var CollectionFactory
     */
    protected $regionCollectionFactory;

    /**
     * @param CollectionFactory $regionCollectionFactory
     */
    public function __construct(
        CollectionFactory $regionCollectionFactory
    ) {
        $this->regionCollectionFactory = $regionCollectionFactory;
    }

    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param LayoutProcessor $processor
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $processor, array $jsLayout): array
    {
        $yourSelect = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
        ['custom-checkout-form-container']['children']['custom-checkout-form-fieldset']['children']
        ['checkout_buyer_name'];

        if (isset($yourSelect)) {
            $yourSelect['options'] = $this->getYourOptions();
        }

        return $jsLayout;
    }

    /**
     * Get referral options
     *
     * @return array
     */
    protected function getYourOptions()
    {
        $regionOptions = [
            [
                'value' => '',
                'label' => __('-- Please Select --')
            ]
        ];
        $regionsCollection = $this->regionCollectionFactory->create()->load();
        $regionsCollection->addFieldToFilter('country_id', 'US');
        $regionData = $regionsCollection->getData();
        foreach ($regionData as $region) {
            $regionOptions[] = [
                'value' => $region['region_id'],
                'label' =>  $region['default_name']
            ];
        }
        return $regionOptions;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.