Magento 2 - How to affect street address in checkout forms with layout xml/ui arguments
The best solution for me was to base yourself in the same method mentioned above: (getMultilineFieldConfig)
However creating a NEW MODULE.
In your new or existing module, add Magento_Checkout
in the node sequence (VendorName/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="VendorName_ModuleName" setup_version="1.0.0">
<sequence>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>
Now, set dependency injection for Magento\Checkout\Block\Checkout\LayoutProcessor
(VendorName/ModuleName/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="vendorname_modulename" type="VendorName\ModuleName\Block\LayoutProcessor" sortOrder="100"/>
</type>
</config>
What is missing is to create the block (VendorName/ModuleName/Block/LayoutProcessor.php):
<?php
namespace VendorName\ModuleName\Block;
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']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => true,
'additionalClasses' => 'additional',
'label' => __('Street')
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => true,
'label' => __('Number')
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '2',
'provider' => 'checkoutProvider',
'validation' => true,
'label' => __('District')
]
]
];
return $jsLayout;
}
}
Result:
For street address,you need do some coding.
At checkout, the fields are rendered from Magento\Checkout\Block\Checkout\AttributeMerger.
As for showing placeholder for street , go to the function getMultilineFieldConfig
, and paste:
if($attributeCode=='street') {
$line['label'] = $attributeConfig['label'];
}
After
if ($isFirstLine && isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
$line['value'] = $attributeConfig['default'];
}
And see that magic. I have already tried it with a magento 2 instance, and it is working.