How to make Shopify Buy Buttons redirect to checkout in a specific language?

Question

I have an English and a Dutch version of my external website. On this website, I embed multiple buy buttons for products I want to sell. All these products don't use a cart; they directly go to the checkout page. Since I want a multi-language checkout (because my external website is also multi-language), I bought a Weglot subscription to translate the checkout page. The only thing is, I can view the English version of the store (via this URL https://en.shop.hofleveranciervanrubens.be/), but I can't seem to use this URL on my buy buttons to redirect customers to the correct English version of the checkout (Dutch is the 'main' Shopify language)

I saw a lot of people doing this tutorial to localize their buy button, but the afterInit() event won't trigger (I think because I have direct checkout, not a cart) https://www.felixparadis.com/posts/localization-of-shopifys-buy-buttons/

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: '6750224449710',
    node: document.getElementById('product-component-1627130549176'),
    moneyFormat: '%24%7B%7Bamount%7D%7D',
    options: {
      "product": {
        // Skipping lots of code for brevity ...
      },
      "productSet": {
        // Skipping lots of code for brevity ...
      },
      "modalProduct": {
        // Skipping lots of code for brevity ...
      },
      "option": {},
      "cart": {
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * THIS IS WHERE MAGIC HAPPENS
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        "events": {
          afterInit: (cart) => {
            cart.onCheckout = () => {
              const checkoutUrl = cart.model.webUrl + '&locale=en';
              cart.checkout.open(checkoutUrl);
            };
          },
        },
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * THIS IS WHERE MAGIC HAPPENS
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        "styles": {
          // Skipping lots of code for brevity ...
        },
        "text": {
          // Skipping lots of code for brevity ...
        },
        "popup": false
      },
      "toggle": {
        // Skipping lots of code for brevity ...
      }
    }
  })
})

This is the external URL of my website: https://www.hofleveranciervanrubens.be/

My question summarised: How do I let Shopify know in which language they should display their checkout via their buybutton.js?

Answer 1

I think you're right in saying that the code you pasted doesn't work because you're not using the cart functionality.

In fact, in the documentation here http://shopify.github.io/buy-button-js/ you can see that the Cart component has events, whereas the Checkout seems to not have them.

I think you can try playing a bit with the events and the debugger to see if you manage to break on the right event and change the URL from there.

Anyway there is always a way to make it work. Actually two. You can modify all the checkout links adding your "&locale=en" after shopify buy has been initialized or you can change the link on the go, while is clicking. The second way is a bit more convoluted but it assures that is alway applied, even in case of lazy loading or things like that.

Solution 2 would look like something like this: (I'm taking inspiration from this answer https://stackoverflow.com/a/33616981/343794).

function interceptClickEvent(e) {
    var href;
    var target = e.target || e.srcElement;
    if (target.tagName === 'A') {
        href = target.getAttribute('href');
        if (href.indexOf("checkout")>=0) { //filtering only checkout links
           window.open(href+"&locale=en",'_blank');
           e.preventDefault();
        }
    }
}


//listen for link click events at the document level
document.addEventListener('click', interceptClickEvent);