Commerce displaying country name instead of state on the final checkout screen (prior to payment)
Hello,
Under certain conditions, Commerce fails to correctly display the correct state on the final payment screen prior to the checkout screen. Instead, it will display whatever country is the nearest alphabetical match to the selected state. For example, selecting Colorado results in Columbia being displayed instead.
This may only be affecting certain Commerce stores depending on whether or not multiple countries have been added, but I haven't bothered to check.
The problem appears to be with the javascript selectors not being specific enough.
Adding in the following selectors (in red) to the addNewShippingAddress(e) addNewBillingAddress(e) functions in the checkout-form-helper.js file as shown below corrects the problem:
- function addNewShippingAddress(e) {
- var t = $D.getById(NEWLY_ADDED_SHIPPING_ADDRESS);
- if (t && e) {
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_FULL_NAME, e.first_name + " " + e.last_name);
- var n = new RegExp("\n","g")
- , s = e.address.replace(n, " ");
- if (setInnerHTMLForId(NEWLY_ADDED_SHIPPING_ADDRESS_PARTIAL_ADDRESS, s),
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_CITY, e.city),
- e.state && "" != e.state) {
- var r = e.state
- , a = document.querySelector("[name='state'][value='" + r + "']");
- (a = a || document.querySelector("[name='state'][data-value='" + r + "']")) && (r = a.innerText),
- setInnerHTMLForId(NEWLY_ADDED_SHIPPING_ADDRESS_STATE, r + ", ")
- } else
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_STATE, "");
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_POSTAL_CODE, e.postal_code);
- var E = e.country
- , i = document.querySelector("[name='country'][value='" + E + "']");
- (i = i || document.querySelector("[name='country'][data-value='" + E + "']")) && (E = i.innerText),
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_COUNTRY, E),
- setInnerTextForId(NEWLY_ADDED_SHIPPING_ADDRESS_TELEPHONE, e.telephone),
- addClassInElement(t, THEME_CHECKOUT_LIST_SELECTED),
- showElement(t)
- }
- }
- function addNewBillingAddress(e) {
- var t = $D.getById(NEWLY_ADDED_BILLING_ADDRESS);
- if (t && e) {
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_FULL_NAME, e.first_name + " " + e.last_name);
- var n = new RegExp("\n","g")
- , s = e.address.replace(n, " ");
- if (setInnerHTMLForId(NEWLY_ADDED_BILLING_ADDRESS_PARTIAL_ADDRESS, s),
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_CITY, e.city),
- e.state && "" != e.state) {
- var r = e.state
- , a = document.querySelector("[name='state'][value='" + r + "']");
- (a = a || document.querySelector("[name='state'][data-value='" + r + "']")) && (r = a.innerText),
- setInnerHTMLForId(NEWLY_ADDED_BILLING_ADDRESS_STATE, r + ", ")
- } else
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_STATE, "");
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_POSTAL_CODE, e.postal_code);
- var E = e.country
- , i = document.querySelector("[name='country'][value='" + E + "']");
- (i = i || document.querySelector("[name='country'][data-value='" + E + "']")) && (E = i.innerText),
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_COUNTRY, E),
- setInnerTextForId(NEWLY_ADDED_BILLING_ADDRESS_TELEPHONE, e.telephone),
- addClassInElement(t, THEME_CHECKOUT_LIST_SELECTED),
- showElement(t)
- }
- }
Thanks,
Bryan