Streaming live at 10am (PST)

Unable to change billing country from Designer

The problem

I’m unable to select a different billing country other than the United States in the designer.

The consequences

The problem renders me unable to select Australia in the select field, making impossible to get the tax info specific for Australia to show up in the designer. I don’t have such problem in the live version, since there I’m able to change the country.

image

This also means that I’m unable to edit the text from “Country Taxes” to something else. Even though that area works just like a collection list and I can unbind the name, I’m unable to change the static content from “This is a text inside of a div block” to any other text.

The workaround:

I was able to come up with a bit of JS to make that page work the way I needed it to:

// DOM Ready
$(() => {
  const dom = {
    templateScript: document.querySelector(
      '.w-commerce-commercecheckoutsummarylineitem'
    ).nextSibling,
    countrySelect: document.querySelectorAll(
      'select[name="address_country"]'
    )[1],
    // ⬇ Function because the element below gets deleted based on the
    // user selection
    taxGroupText: () =>
      document.querySelector(
        '.w-commerce-commercecheckoutordersummaryextraitemslistitem div'
      ),
  };

  // Template string that webflow uses to regenerate the tax element
  const originalTemplateText = dom.templateScript.textContent;

  const updateTaxesTemplate = () => {
    const selection = dom.countrySelect.value;
    const taxTextElem = dom.taxGroupText();

    if (selection) {
      if (selection === 'AU') {
        if (taxTextElem) taxTextElem.textContent = 'GST';
        dom.templateScript.innerHTML = originalTemplateText.replace(
          'This%20is%20some%20text%20inside%20of%20a%20div%20block.',
          'GST'
        );
      } else {
        if (taxTextElem) taxTextElem.textContent = 'Country Taxes';
        dom.templateScript.innerHTML = originalTemplateText.replace(
          'This%20is%20some%20text%20inside%20of%20a%20div%20block.',
          'Country%20Taxes'
        );
      }
    }
  };

  updateTaxesTemplate();
  dom.countrySelect.addEventListener('change', updateTaxesTemplate);
});

It makes use of the template element that Webflow uses to recreate the div block for the tax data.

image

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.