0

In checkout page sidebar, there's a block that displays shipping information, based on the shipping address that customer uses.

enter image description here

The file that displays it is

vendor/magento/module-checkout/view/frontend/web/template/shipping-informations/address-renderer/default.html 

and it uses the following code:

<span html="address().region"></span>

Region is a selectbox that contains values like this:

<option data-title="Region A" value="570">Region A</option>
<option data-title="Region B" value="571">Region B</option>
<option data-title="Region C" value="572">Region C</option>

address().region displays "571" instead of "Region B".

How can I fix this?

  • Can you add a screenshot of the area you are talking about. Cause I guess you are digging in a wrong file. – Korbin Feb 20 at 11:30
  • posted screenshot – zekia Feb 20 at 11:51
  • @Korbin I think you're right, this is probably the wrong html file, but I can't find the right one. Can you help? – zekia Feb 20 at 13:46
0

To solve this I created a custom version of

vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html 

in my theme and replaced:

<span html="address().region"></span>

with

<text args="getStateName(address().region,address().countryId)"/>

I also created a custom version of file

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/address-renderer/default.js 

in my theme. There, I added this new function:

getStateName: function (stateId,countryId) {
    if (_.isEmpty(countryData())) {
        countryData(customerData.reload(['directory-data'], false));
    }
    var state_obj = countryData()[countryId].regions[stateId];

    return state_obj.name;
}
| improve this answer | |
0

Create a file under theme with this path

app/design/frontend/VENDOR/YOUR_THEME/Magento_Checkout/web/template/billing-address/details.html

<div class="billing-address-details" data-bind="if: isAddressDetailsVisible() && currentBillingAddress()">
<!-- ko text: currentBillingAddress().prefix --><!-- /ko --> <!-- ko text: currentBillingAddress().firstname --><!-- /ko -->
<!-- ko text: currentBillingAddress().lastname --><!-- /ko --> <!-- ko text: currentBillingAddress().suffix --><!-- /ko --><br/>
<!-- ko if: (currentBillingAddress().company) --><!-- ko text: currentBillingAddress().company --><!-- /ko --><br/><!-- /ko -->
<!-- ko text: currentBillingAddress().street --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().city --><!-- /ko -->, <!-- ko text: currentBillingAddress().region --><!-- /ko --> <!-- ko text: currentBillingAddress().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(currentBillingAddress().countryId) --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().telephone --><!-- /ko --><br/>
<!-- ko foreach: { data: currentBillingAddress().customAttributes, as: 'element' } -->
    <!-- ko foreach: { data: Object.keys(element), as: 'attribute' } -->
        <!-- ko if: element[attribute].value != null -->
            <!-- ko text: element[attribute].value --><!-- /ko -->
        <!-- /ko -->
        <!-- ko if: element[attribute].value == null -->
            <!-- ko text: element[attribute] --><!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
<!-- /ko -->
<button type="button"
        class="action action-edit-address"
        data-bind="visible: !isAddressSameAsShipping(), click: editAddress">
    <span data-bind="i18n: 'Edit'"></span>
</button>

You should also add the following file

app/design/frontend/VENDOR/YOUR_THEME/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

<!-- ko if: (visible()) -->
<!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
<!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
<!-- ko if: (address().company) --><!-- ko text: address().company --><!-- /ko --><br/><!-- /ko -->
<!-- ko text: address().street --><!-- /ko --><br/>
<!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
<!-- ko text: address().telephone --><!-- /ko --><br/>
<!-- ko foreach: { data: address().customAttributes, as: 'element' } -->
    <!-- ko foreach: { data: Object.keys(element), as: 'attribute' } -->
        <!-- ko text: element[attribute].value --><!-- /ko -->
    <!-- /ko -->
<!-- /ko -->

I set the region after

currentBillingAddress().city -->,

Remember to flush cache and also deploy static content. As that is html file and it is static content. You can also try to remove generated/code.

| improve this answer | |
  • billing-address/details.html is not the right file – zekia Feb 24 at 10:14
  • @zekiaI updated my answer. – Korbin Feb 24 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.