Magento 2 - Cách ảnh hưởng đến địa chỉ đường phố trong các hình thức thanh toán với các đối số xml / ui bố cục

Tôi đang cố gắng đặt một trình giữ chỗ trên các trường địa chỉ đường phố trên mẫu địa chỉ giao hàng trong thanh toán. Thực hiện theo ví dụ này: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html Tôi đã sửa đổi các mô-đun của mình checkout_index_index.xml.

Hầu hết các trường hiện có một trình giữ chỗ trong thanh toán bằng cách xác định:

<item name="telephone" xsi:type="array">
  <item name="config" xsi:type="array">
    <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
  </item>
</item>

Điện thoại làm việc. Mẫu đầu vào được sử dụng.

Địa chỉ đường phố là một nhóm, xem magento-ui/view/frontend/view/frontend/templates/group/group.html Và nó chứa 2 yếu tố đầu vào.

Không thể ảnh hưởng đến các yếu tố mẫu từ bố cục checkout_index_index.xml.

Lần cuối tôi đã thử điều này, nhưng không thành công:

<item name="street" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="0" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
        <item name="1" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
    </item>
</item>

Các phím 0và 1dường như là chính xác. Tôi thấy chúng trong JSON lớn trong nguồn trang thanh toán, trên nhóm đường phố:

<script type="text/x-magento-init">
{
  "#checkout":
    "Magento_Ui/js/core/app":  { ... }
}
</script>

Bất cứ ai cũng biết làm thế nào các trường nhập địa chỉ đường phố có thể bị ảnh hưởng?

PS: Giữ chỗ đầu vào có thể được kích hoạt chỉnh sửa mẫu HTML đầu vào như ở đây: https://stackoverflow.com/questions353406440/magento2-checkout-form-how-to-display-placeholder-attribution-value-in-fields/

Đối với địa chỉ đường phố, bạn cần làm một số mã hóa.

Khi thanh toán, các trường được kết xuất từ Magento\Checkout\Block\Checkout\AttributeMerger.

Để hiển thị trình giữ chỗ cho đường phố , hãy đi tới chức năng getMultilineFieldConfigvà dán:

if($attributeCode=='street') {
    $line['label'] = $attributeConfig['label'];
}

Sau

if ($isFirstLine && isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
        $line['value'] = $attributeConfig['default'];
}

Và thấy điều kỳ diệu đó. Tôi đã thử nó với phiên bản magento 2 và nó đang hoạt động.

Giải pháp tốt nhất cho tôi là căn cứ vào chính phương pháp đã đề cập ở trên: (getMultilineFieldConfig)

Tuy nhiên, tạo ra một MODULE MỚI .

Trong mô-đun mới hoặc hiện có của bạn, hãy thêm Magento_Checkoutvào chuỗi nút ( 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>

Bây giờ, hãy đặt nội dung phụ thuộc cho 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>

Điều còn thiếu là tạo khối (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;
     }
 }

Kết quả: