Magento：结帐表单自定义字段的问题

Question

Magento 2.4

我使用布局处理器插件添加了一些自定义字段（下面共享的代码），自定义字段按预期可见，但有以下两个问题。如果您能指导我解决这些问题，我将非常感激。

1. 用户输入送货地址并移至帐单地址部分后，选中付款选项下的“我的帐单和送货地址相同”复选框，在帐单地址显示为文本的区域下方，出现 datascopesinput_value 对。请参阅下面的屏幕截图。我需要避免显示它们（所选文本）。

屏幕截图 - https://i.sstatic.net/Mro2Z.png

我的自定义 LayoutProcessor 插件代码下面给出。

<?php
namespace Custom\CheckoutExt67\Plugin\Checkout\Block;
 
class LayoutProcessorPlugin
{
    /**
     * @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']['shipping_block'] = [
            'component' => 'Magento_Ui/js/form/element/select',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'shipping_block',
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_block',
            'label' => 'Block',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 72,
            /*'customEntry' => null,*/
            'id' => 'shipping_block',            
            'options' => [
                [
                    'value' => '',
                    'label' => 'Please Select a city first. ',
                ]
            ]
        ];
        
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_street'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'shipping_street'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_street',
            'label' => 'Street',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 73,
            /*'customEntry' => null,*/
            'id' => 'shipping_street'
        ];
        
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_avenue'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'shipping_avenue'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_avenue',
            'label' => 'Avenue',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 74,
            /*'customEntry' => null,*/
            'id' => 'shipping_avenue'
        ];
               
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_building'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'shipping_building'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_building',
            'label' => 'Building',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 75,
            /*'customEntry' => null,*/
            'id' => 'shipping_building'
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_floorno'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'shipping_floorno'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_floorno',
            'label' => 'Floor ',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 76,
            /*'customEntry' => null,*/
            'id' => 'shipping_floorno'
        ];         
        

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_doorno'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'shipping_doorno'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_doorno',
            'label' => 'Door No ( Flat )',
            'placeholder' => 'Test Placeholder',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 77,
            /*'customEntry' => null,*/
            'id' => 'shipping_doorno'
        ];


        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['shipping_nearest_landmark'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/textarea',
                'options' => [],
                'id' => 'shipping_nearest_landmark',                
                'tooltip' => [
                    'description' => 'Explain a nearest landmark which would helpful for the delivery person',
                ]
            ],
            'dataScope' => 'shippingAddress.custom_attributes.shipping_nearest_landmark',
            'label' => 'Nearest Landmark',
            'placeholder' => 'Describe a nearest landmark',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => false
            ],
            'sortOrder' => 78,
            /*'customEntry' => null,*/
            'id' => 'shipping_nearest_landmark'
        ];

        //Start of shipping form sorting
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['firstname']['sortOrder'] = 18;
        
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['lastname']['sortOrder'] = 20;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['country_id']['sortOrder'] = 25;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['region_id']['sortOrder'] = 35;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['city']['sortOrder'] = 45;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['company']['sortOrder'] = 85;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['shipping-step']['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children']
        ['telephone']['sortOrder'] = 13;
        //End of shipping form sorting

        //Start of Check/money order
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['firstname']['sortOrder'] = 18;
        
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['lastname']['sortOrder'] = 20;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['country_id']['sortOrder'] = 25;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['region_id']['sortOrder'] = 35;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['city']['sortOrder'] = 45;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['company']['sortOrder'] = 85;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['telephone']['sortOrder'] = 13;

        //End of Check or money order
        //Start myfatoorah //
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['firstname']['sortOrder'] = 18;
        
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['lastname']['sortOrder'] = 20;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['country_id']['sortOrder'] = 25;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['region_id']['sortOrder'] = 35;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['city']['sortOrder'] = 45;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['company']['sortOrder'] = 85;

    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['myfatoorah_gateway-form']['children']
        ['form-fields']['children']['telephone']['sortOrder'] = 13;

        //End of myfatoorah

        //Start COD //
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['firstname']['sortOrder'] = 18;
        
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['lastname']['sortOrder'] = 20;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['country_id']['sortOrder'] = 25;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['region_id']['sortOrder'] = 35;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['city']['sortOrder'] = 45;
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['company']['sortOrder'] = 85;        
    
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['cashondelivery-form']['children']
        ['form-fields']['children']['telephone']['sortOrder'] = 13;

        //End of COD
        
        return $jsLayout;
    }
}

我尝试在自定义模块中覆盖 Magento_Checkout/template/billing-address/details.html，

Magento_Checkout/template/billing-address/details.html 中的默认代码

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div if="isAddressDetailsVisible() && currentBillingAddress()" class="billing-address-details">
    <text args="currentBillingAddress().prefix"/> <text args="currentBillingAddress().firstname"/> <text args="currentBillingAddress().middlename"/>
    <text args="currentBillingAddress().lastname"/> <text args="currentBillingAddress().suffix"/><br/>
    <text args="_.values(currentBillingAddress().street).join(', ')"/><br/>
    <text args="currentBillingAddress().city "/>, <span text="currentBillingAddress().region"></span> <text args="currentBillingAddress().postcode"/><br/>
    <text args="getCountryName(currentBillingAddress().countryId)"/><br/>
    <a if="currentBillingAddress().telephone" attr="'href': 'tel:' + currentBillingAddress().telephone" text="currentBillingAddress().telephone"></a><br/>

    <each args="data: currentBillingAddress().customAttributes, as: 'element'">
        <text args="$parent.getCustomAttributeLabel(element)"/>
        <br/>
    </each>

    <button visible="!isAddressSameAsShipping()"
            type="button"
            class="action action-edit-address"
            click="editAddress">
        <span translate="'Edit'"></span>
    </button>
</div>

requirejs-config.js

var config = {
    "map": {
        "*": {
            'Magento_Checkout/template/billing-address/details.html':
            'Custom_CheckoutExt67/template/billing-address/details.html'            
        }
    },
    deps: ['Custom_CheckoutExt67/js/custom']
};

Custom_CheckoutExt67/template/billing-address/details.html 在文件夹 view/frontend/web/template/billing-address/details.html 中

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div if="isAddressDetailsVisible() && currentBillingAddress()" class="billing-address-details">
    <text args="currentBillingAddress().prefix"/> <text args="currentBillingAddress().firstname"/> <text args="currentBillingAddress().middlename"/>
    <text args="currentBillingAddress().lastname"/> <text args="currentBillingAddress().suffix"/><br/>
    <text args="_.values(currentBillingAddress().street).join(', ')"/><br/>
    <text args="currentBillingAddress().city "/>, <span text="currentBillingAddress().region"></span> <text args="currentBillingAddress().postcode"/><br/>
    <text args="getCountryName(currentBillingAddress().countryId)"/><br/>
    <a if="currentBillingAddress().telephone" attr="'href': 'tel:' + currentBillingAddress().telephone" text="currentBillingAddress().telephone"></a><br/>

    <button visible="!isAddressSameAsShipping()"
            type="button"
            class="action action-edit-address"
            click="editAddress">
        <span translate="'Edit'"></span>
    </button>
</div>

2. ，使用与上面相同的 LayoutProcessor 插件，我向发货表单添加一个自定义文本区域字段，它是在没有名称属性的情况下创建的，我已经给出了 dataScope 值。

屏幕截图 - https://i.sstatic.net/nTuk3.png