1

I want to add a drop-down here enter image description here

I can add area text field but when it comes to drop-down, I am facing problem.

2

1 Answer 1

5

Step 1: Create module.xml

app/code/Vendor/CheckoutAdditionalField/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_CheckoutAdditionalField" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 2: Create composer.json

app/code/Vendor/CheckoutAdditionalField/composer.json

{
    "name": "Vendor/module-checkoutadditionalfield",
    "description": "Checkout Additional Field",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "100.0.*",
        "magento/module-ui": "100.0.*",
        "magento/module-config": "100.0.*",
        "magento/module-checkout": "100.0.*"
    },
    "type": "magento2-module",
    "version": "100.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [ "registration.php" ],
        "pVendor-4": {
            "Vendor\\CheckoutAdditionalField\\": ""
        }
    }
}

Step 3: Create registration.php

app/code/Vendor/CheckoutAdditionalField/registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_CheckoutAdditionalField',
    __DIR__
);

Step 4: Now need to overwrite Magento\Checkout\Block\Checkout\LayoutProcessor process method. So create a plugin,

Vendor/CheckoutAdditionalField/Plugin/Checkout/Model/Checkout/LayoutProcessor.php

namespace Vendor\CheckoutAdditionalField\Plugin\Checkout\Model\Checkout;




class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['delivery_date'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/date',
                'options' => [],
                'id' => 'delivery-date'
            ],
            'dataScope' => 'shippingAddress.delivery_date',
            'label' => 'Delivery Date',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'delivery-date'
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['drop_down'] = [
            'component' => 'Magento_Ui/js/form/element/select',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'drop-down',
            ],
            'dataScope' => 'shippingAddress.drop_down',
            'label' => 'Drop Down',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 251,
            'id' => 'drop-down',
            'options' => [
                [
                    'value' => '',
                    'label' => 'Please Select',
                ],
                [
                    'value' => '1',
                    'label' => 'First Option',
                ]
            ]
        ];

        return $jsLayout;
    }
}
9
  • yes i tried that it just add field in the Fronted buti want to have the info in database Commented Jan 13, 2019 at 6:14
  • 1
    you can create manually after run below command php bin/magento setup:di:compile Commented Jan 16, 2019 at 5:42
  • so you mean just with this code i will have the two attributes frop down and delivery date in base ???? Commented Jan 16, 2019 at 8:09
  • page not found for this link Commented Jan 16, 2019 at 8:47
  • 1
    you can modify above extension and unnecessary files remove this extension is very useful and needful Please check and accept the answer if it's helpful. Commented Jan 16, 2019 at 8:55

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.