Magento 2 Checkout – Add Placeholder and Remove All Labels

checkoutformslayoutmagento2.2template

Searched a lot but didn't found anything removing the

Lables like "First Name, Last Name, City, Address, Email, Phone etc"

Add Placeholders in all "shipping fields" and "sign In" places.
After Login Placeholders in "new add address popup"

https://imgur.com/Wm3aQNj

Please help me struggling from so many days didn't found any exact thing.

Best Answer

I don't find any proper solution but give you quick and good solution.

Magento checkout's input fields are render by Magento_Ul module component's file

vendor/magento/module-ui/view/base/web/templates/form/element/input.html

On this files, you need to changes

placeholder: placeholder to placeholder: label

So, first copy this html to your frontend theme folder

app/design/frontend/{Vendor}/{Themename}/Magento_Ui/web/templates/form/element/

On this input.html add this code:

<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
    }"/>

Then, you need to add _extend.less at your theme folder

app/design/frontend/{Vendor}/{Themename}/Magento_Theme/web/css/source/_extend.less

add this code for hidden the label css:

.checkout-index-index label{display:none}

Then You must flush cache by run

php bin/magento cache:flush

Or delete all files from view_procecced, cache,page_cache.

Then you should static content deploy

php bin/magento setup:static-content:deploy

Related Solutions

Check for Customer Email Address Exists in Checkout – Magento

Looking at Using Javascript to validate response in the text box pointed me in the right direction.

I still have to clean up the code and integrate it correctly in firecheckout, but the following code basically does exactly what I want:

/** 
 * Check if customer email address already exists 
 */ 

public function checkEmailexistsAction()
{       

    if ($this->_expireAjax()) {
        echo 'Ajax Expired'; 
        return;
    }
    if (!$this->getRequest()->isPost()) {
        echo '!isPost'; 
        return;
    }

    $websiteId = Mage::app()->getWebsite()->getId();
    $data = $this->getRequest()->getPost('billing', array());
    $email = $data['email'];

    $customer = Mage::getModel('customer/customer');

    if ($websiteId) {
        $customer->setWebsiteId($websiteId);
        }

    $customer->loadByEmail($email);

    if ($customer->getId()) {
        // This is the part of the code that runs when a customer exists ... 
        echo 'Yup - this one exists!, email address = ' . $email . ' and ID = ' . $customer->getId(); 
        }
    else {
        // This is the part of the code that runs when a customer does not yet exist ...
        echo 'Nope.. This one is not there...'; 
    }
}

Posting 'billing[email]=someemailaddress@somehost.org' to /firecheckout/index/checkEmailexists now reliably returns a yes or no.

Magento 2 Checkout – How to Add Placeholder Text to Street Fields

Add these file in any of your custom module :

app/code/Vendor/ModuleName/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_ModuleName" setup_version="2.0.0" />
</config>

app/code/Vendor/ModuleName/registration.php

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

app/code/Vendor/ModuleName/etc/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\AttributeMerger">
    <plugin name="shippingAddress" type="Vendor\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
  </type>
</config>

Vendor\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin.php

<?php
namespace Vendor\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger;

class Plugin
{
  public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
  {
    if (array_key_exists('street', $result)) {
      $result['street']['children'][0]['placeholder'] = __('Flat No/House No/Building No');
      $result['street']['children'][1]['placeholder'] = __('Street Address');
      $result['street']['children'][2]['placeholder'] = __('Landmark');
    }

    return $result;
  }
}

Best Answer

Related Solutions

Check for Customer Email Address Exists in Checkout – Magento

Magento 2 Checkout – How to Add Placeholder Text to Street Fields

Related Topic