Unable to translate "Buy it now button to Norwegian

[hamarsen]

Hi, 

I am using the Translate & Adapt Shopify app. Currently there are two languages on the website: English (Default) and Norwegian. The website has been successfully localized in Norwegian, except for the "Buy it now" button. 

This record does not exist when searching for it in the store's content within the Translate & Adapt app. Is there a way to translate this button? 🙂

[makkaomakka · Accepted solution]

Hi @hamarsen ,

I have custom written a JS solution for this. 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

{% if request.locale.iso_code == "no" %}
<style>
    [data-testid="Checkout-button"] {
      display: none!important;
    }
    [data-testid="Checkout-button"].show {
      display: block!important;
    }
</style>
<script>  
    let timer = 0;
    const maxTime = 10000;
    const intervalDuration = 100;          
    const searchCheckoutButton = () => {
      const checkoutButton = document.querySelector('[data-testid="Checkout-button"]');
      if (checkoutButton) {
          checkoutButton.innerText = "Kjøp nå"; 
          checkoutButton.classList.add('show');
          clearInterval(intervalId);
          console.log('Found');
      } else if (timer >= maxTime) {
          clearInterval(intervalId);
          console.log('Time limit reached. Button not found.');
      } else {
          timer += intervalDuration;
      }
    };          
    const intervalId = setInterval(searchCheckoutButton, intervalDuration);      
</script>
{% endif %}

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[makkaomakka · Accepted solution]

Hi @hamarsen ,

Please replace the previous code with the new one and see if this works.

{% if request.locale.iso_code == "no" %}
<style>
    [data-testid="Checkout-button"] {
      display: none!important;
    }
    [data-testid="Checkout-button"].show {
      display: block!important;
    }
</style>
<script>
  const m_intervalDuration = 50;
  const m_searchCheckoutButton = () => {
    const m_checkoutButton = document.querySelector(
      '[data-testid="Checkout-button"]'
    );
    if (m_checkoutButton && m_checkoutButton.innerText == "Buy it now") {
      m_checkoutButton.innerText = "Kjøp nå";
      setTimeout(function () {
        m_checkoutButton.classList.add("show");
      }, 500);
      console.log("Found");
    }
  };
  const m_intervalId = setInterval(m_searchCheckoutButton, m_intervalDuration);
</script>
{% endif %}

[makkaomakka]

Hi @hamarsen ,

Bu default, we cannot update the buy now text. However, I have comeup with a workaround to dynamically change it on multiple language. Can you provide me with the link to your store and also the translated text?

[hamarsen]

Hi @makkaomakka,

I could be interested in hearing more about this. The link is www.handtverk.com and the button should say "Kjøp nå" instead of "Buy it now" when Norwegian is selected as a language.

[makkaomakka · Accepted solution]

Hi @hamarsen ,

I have custom written a JS solution for this. 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

{% if request.locale.iso_code == "no" %}
<style>
    [data-testid="Checkout-button"] {
      display: none!important;
    }
    [data-testid="Checkout-button"].show {
      display: block!important;
    }
</style>
<script>  
    let timer = 0;
    const maxTime = 10000;
    const intervalDuration = 100;          
    const searchCheckoutButton = () => {
      const checkoutButton = document.querySelector('[data-testid="Checkout-button"]');
      if (checkoutButton) {
          checkoutButton.innerText = "Kjøp nå"; 
          checkoutButton.classList.add('show');
          clearInterval(intervalId);
          console.log('Found');
      } else if (timer >= maxTime) {
          clearInterval(intervalId);
          console.log('Time limit reached. Button not found.');
      } else {
          timer += intervalDuration;
      }
    };          
    const intervalId = setInterval(searchCheckoutButton, intervalDuration);      
</script>
{% endif %}

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[hamarsen]

Thank you so much! This did the trick 😍

[hamarsen]

Hello Makka,

I  have found an issue with the implementation. After I added products variants (in this case different languages of the digital product), the buy button disappears after switching. The user can still add the product to the cart and the button reappears when refreshing. WDYT? 🙂

This only occurs on the Norwegian version of the site.

https://handtverk.com/products/rekke-guide?variant=42040727929015

[richbrown_staff]

Hey @hamarsen , 'Buy it now' is an unusual string and is managed centrally by Shopify. We aim to add translations in every language. Norwegian has two versions on Shopify, just 'Norwegian' and 'Norwgian (Bokmål)' - which are you using? We should be able to deploy a fix from here.

[hamarsen]

Hi @richbrown_staff! That is good to hear. I am using the just "Norwegian" one.

Btw, I also expect this is the one most common in use in Norway as this is default Norwegian, which equals Norwegian (Bokmål). 

[makkaomakka · Accepted solution]

Hi @hamarsen ,

Please replace the previous code with the new one and see if this works.

{% if request.locale.iso_code == "no" %}
<style>
    [data-testid="Checkout-button"] {
      display: none!important;
    }
    [data-testid="Checkout-button"].show {
      display: block!important;
    }
</style>
<script>
  const m_intervalDuration = 50;
  const m_searchCheckoutButton = () => {
    const m_checkoutButton = document.querySelector(
      '[data-testid="Checkout-button"]'
    );
    if (m_checkoutButton && m_checkoutButton.innerText == "Buy it now") {
      m_checkoutButton.innerText = "Kjøp nå";
      setTimeout(function () {
        m_checkoutButton.classList.add("show");
      }, 500);
      console.log("Found");
    }
  };
  const m_intervalId = setInterval(m_searchCheckoutButton, m_intervalDuration);
</script>
{% endif %}

[hamarsen]

Thank you! It works, although the button flickers. You can test it here: https://handtverk.com/products/rekke-guide?variant=42041497321655

[makkaomakka · Accepted solution]

Hi @hamarsen ,

I have created a new CSS to achieve this translation. Can you replace the previous code with this new one and check if this works.

 {% if request.locale.iso_code == "no" %}
    <style>
      .product-form__buttons [data-testid="Checkout-button"] {
          color: transparent;
      }
      
      .product-form__buttons [data-testid="Checkout-button"]:after {
          content: "Kjøp nå";
          color: rgb(var(--color-button-text));
          display: flex;
          align-items: center;
          justify-content: center;
      }
      </style>
    {% endif %}

 This works good on my test store [https://mangit.myshopify.com/no/products/product-1?variant=35864135958681] 

[hamarsen]

Amazing! This works perfectly. Thanks again!