在结帐时编辑客户送货地址 - magento 2

Question

想知道如何为客户帐户下提供的原始送货地址添加编辑字段并正确编辑地址。一直在检查 magento 功能和文档，但不知道如何正确提出解决方案。有什么建议吗？

Answer 1

模板是 vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html。您可以通过将此文件复制到 Magento_Checkout/web/template/shipping-address/address-renderer/default.html 中的主题文件夹来覆盖此模板。

<div class="shipping-address-item" css="'selected-item' : isSelected() , 'not-selected-item':!isSelected()">
    <text args="address().prefix"/> <text args="address().firstname"/> <text args="address().middlename"/>
    <text args="address().lastname"/> <text args="address().suffix"/><br/>
    <text args="_.values(address().street).join(', ')"/><br/>
    <text args="address().city "/>, <span text="address().region"></span> <text args="address().postcode"/><br/>
    <text args="getCountryName(address().countryId)"/><br/>
    <a if="address().telephone" attr="'href': 'tel:' + address().telephone" text="address().telephone"></a><br/>

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

<button visible="address().isEditable()" type="button"
        class="action edit-address-link"
        click="editAddress">
    <span translate="'Edit'"></span>
</button>
<!-- ko if: (!isSelected()) -->
<button type="button" click="selectAddress" class="action action-select-shipping-item">
    <span translate="'Ship Here'"></span>
</button>
<!-- /ko -->

并且 JS 文件是 vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/address-renderer/default.js。您可以通过将此文件复制到 Magento_Checkout/web/js/view/shipping-information/address-renderer/default.js 中的主题文件夹来覆盖此 javascript，或者使用 mixins 来扩展 JavaScript（请参阅：https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html）

我明白了，地址上的 isEditable() 函数对于新地址为 true，对于现有地址为 false（请参阅 vendor/magento/module-checkout/view/frontend/web/js/model/new-customer-address. js 和 vendor/magento/module-customer/view/frontend/web/js/model/customer/address.js），其中 isEditable 方法返回 true 或 false。您可以尝试覆盖或扩展此文件并始终返回 true 并检查它是否有效。

vendor/magento/module-customer/view/frontend/web/js/model/customer/address.js：

        /**
         * @return {Boolean}
         */
        isEditable: function () {
            return false;
        },

也许另一种解决方案是获取地址 ID 并将现有地址的“编辑”链接链接到：customer/address/edit/{id} 但我不认为这是你想要的，因为那样你会离开结帐。