0

I want add two fields in checkout page (text type). How can I do this in Magento 2.4.2?

3 Answers 3

1

Try these steps,

1.Create a di.xml in this path app/code/CompanyName/Module/etc/frontend/di.xml

<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="add_custom_field_checkout_form" type="Vendor\Module\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>
  1. Use this plugin at app\code\CompanyName\Module\Model\Plugin\Checkout\LayoutProcessor.php

    <?PHP
      namespace Vendor\Module\Model\Plugin\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']['custom_field'] = [
             'component' => 'Magento_Ui/js/form/element/abstract',
             'config' => [
                 'customScope' => 'shippingAddress.custom_attributes',
                 'template' => 'ui/form/field',
                 'elementTmpl' => 'ui/form/element/input',
                 'options' => [],
                 'id' => 'custom-field'
             ],
             'dataScope' => 'shippingAddress.custom_attributes.custom_field',
             'label' => 'Custom Field',
             'provider' => 'checkoutProvider',
             'visible' => true,
             'validation' => [],
             'sortOrder' => 250,
             'id' => 'custom-field'
         ];
    
    
         return $jsLayout;
     }}
    

enter image description here

1

Try this all step it will be very useful to you

1.Create a custom module: Create a directory structure for your custom module. Let's assume the module name is "Custom_CheckoutFields". Place it in the app/code directory.

2.Define module structure: Create the necessary files to define the module. In the module's root directory (app/code/Custom/CheckoutFields/registration.php)

registration.php:

 <?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Custom_CheckoutFields',
    __DIR__
);

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="Custom_CheckoutFields" setup_version="1.0.0" />
</config>

3.Create a layout file: Create the layout file (checkout_index_index.xml) in the following location: app/code/Custom/CheckoutFields/view/frontend/layout/checkout_index_index.xml.

 <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom-checkout-fields" xsi:type="array">
                                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                                    <item name="displayArea" xsi:type="string">afterMethods</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="template" xsi:type="string">Custom_CheckoutFields/checkout/custom-checkout-fields</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

4.Create template file: Create the template file (custom-checkout-fields.html) in the following location: app/code/Custom/CheckoutFields/view/frontend/web/template/checkout/custom-checkout-fields.html.

 <div>
    <div class="field">
        <label class="label" for="field1">Field 1</label>
        <div class="control">
            <input type="text" class="input-text" name="field1" id="field1" data-bind="value: getField1Value()" />
        </div>
    </div>
 </div>

5.Run necessary commands: Run the following commands from your Magento root directory to update the system:

  • php bin/magento setup:upgrade

  • php bin/magento setup:di:compile

  • php bin/magento cache:clean

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.