0

How to add placeholder in checkout page like street address,city,Zip code etc Filed in magento 2.4

enter image description here

1
  • You want to do by theme or from module? Apr 9 '21 at 11:45
1

override below file in your theme directory

path : app/design/frontend/{vendor}/{theme}/Magento_Ui/web/template/form/element/input.html

<input class="admin__control-text" type="text"
       data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: label,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }"/>

After run the below commands,

php bin/magento s:up
php bin/magento s:s:d -f {language_code}
php bin/magento c:f
0

I had a similar task some time ago, here is how I achieved it.

Create a plugin for Magento\Checkout\Block\Checkout\LayoutProcessor

Vendor/Module/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="[Vendor]_[Module]_Plugin_Frontend_Magento_Checkout_Block_Checkout_LayoutProcessor" type="W2\ExtendCheckout\Plugin\Frontend\Magento\Checkout\Block\Checkout\LayoutProcessor" sortOrder="10" disabled="false"/>
    </type>
</config>

And here is the plugin class

<?php
/**
 * Copyright © WebO2 All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace [Vendor]\[Module]\Plugin\Frontend\Magento\Checkout\Block\Checkout;

class LayoutProcessor
{

    protected array $_bindings = [
        'company' => [
            'label' => 'Company name (optional)'
        ],
        'country_id' => [
            'sortOrder' => '65'
        ],
        'street' => [
            'label' => 'Address',
            'children' => [
                0 => [
                    'placeholder' => 'Add house number and street name'
                ],
                1 => [
                    'placeholder' => 'Add apartment, suite, unit etc. (optional)'
                ]
            ]
        ],
        'postcode' => [
            'label' => 'Postcode / ZIP',
            'additionalClasses' => 'columns-fields-left',
            'placeholder' => 'Add your postcode',
            'sortOrder'=>'90'
        ],
        'city' => [
            'label'=> 'Town/City',
            'additionalClasses' => 'columns-fields-right',
            'placeholder' => 'Add your town/city',
            'sortOrder'=>'100'
        ],
        'region' => [
            'label'=> 'Province',
            'sortOrder'=>'110',

        ],
        'region_id' => [
            'sortOrder'=>'110'
        ],
        'telephone' => [
            'additionalClasses' => 'columns-fields-right express-checkout-telephone',
            'config' => [
                'tooltip' => false
            ]
        ]
    ];

    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
    {
        $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
        $billingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
        ['children']['payment']['children']['afterMethods']['children'];




        //Checks if shipping step available.
        if (isset($shippingConfiguration)) {
            $shippingConfiguration = $this->applyBindingToAddresses($shippingConfiguration);
        }

        //Checks if billing step available.
        if (isset($billingConfiguration)) {
            //Iterate over billing forms.
            foreach($billingConfiguration as $key => &$billingForm) {
                //Exclude not billing forms
                if (!strpos($key, '-form')) {
                    continue;
                }
                $billingForm['children']['form-fields']['children'] = $this->applyBindingToAddresses($billingForm['children']['form-fields']['children']);


            }
        }

        return $jsLayout;
    }

    protected function applyBindingToAddresses($shippingConfiguration)
    {

        foreach ($this->_bindings as $field => $configurations) {
            //Shipping Address Fields Form
            if(isset($shippingConfiguration[$field])){
                foreach ($configurations as $key => $data) {
                    if(isset($shippingConfiguration[$field][$key])){

                        if($field == 'street' and $key == 'children'){
                            $shippingConfiguration[$field][$key][0]['placeholder'] = $data[0]['placeholder'];
                            $shippingConfiguration[$field][$key][1]['placeholder']  = $data[1]['placeholder'];
                            continue;
                        }

                        if(is_array($shippingConfiguration[$field][$key]) && is_array($data)) {
                            $shippingConfiguration[$field][$key] = array_merge($shippingConfiguration[$field][$key], $data);
                            continue;
                        }

                        if($key == 'label' || $key == 'placeholder'){
                           $shippingConfiguration[$field][$key] = __($data);
                        } else {
                            $shippingConfiguration[$field][$key] = $data;
                        }

                    } else {
                        if($key == 'label' || $key == 'placeholder'){
                            $shippingConfiguration[$field][$key] = __($data);
                        } else {
                            $shippingConfiguration[$field][$key] = $data;
                        }
                    }
                }
            }
        }




        return $shippingConfiguration;
    }


}

Where [Vendor]_[Module] are your Vendor and Module values.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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