Langauge for checkout

[Knox Knox]

Hi

I am using js-buy-sdk for a headless web-shop.
"shopify-buy": "^2.18.0",

My shop supports two languages.
ja-JP and en-US.

When I buildClient and adding parameter like this (hardcoded for test purpose)
const client = Client.buildClient({ domain: process.env.NEXT_PUBLIC_SHOP, storefrontAccessToken: process.env.NEXT_PUBLIC_ACCESS_TOKEN, language: 'ja-JP', });
As stated in the docs

It still takes me to the english checkout.
I can confirm that the JA version of checkout works as I can navigate to that via the none-headless version of the web-shop.
But using this lib I am unable

Please advice what I am doing wrong.

[ansmlc]

I have the same issue. Try clearing cache, reload the site, go to checkout again. That should work.

But the problem is it only works the first time. Once the client initialized, the checkout is cached, so any subsequent language changes don't have any effect. I tried re-initializing the client once the user switches to a different language on headless site, but the checkout persists in using the language that was set on initial load.

I was told on Shopify Discord I have to set buyerIdentity { countryCode: "" } as input for the client. But this API doesn't seem to support this field:

[Miguel Pajaro]

I have the same problem and @ansmlc solution does not work with me with language: 'ar-SA'
Any other suggestions on this?

Thanks

[Knox Knox]

I ended up doing a fundamental update of the web-shop to use the storefront graphql api and now I have full control.

I like shopify-buy lib, it get's you going quickly, but it also has serious limitations (as also stated in docs). Would be great it extendability was easy/do-able.

[Miguel Pajaro]

Thanks @felixknox
It looks odd that the language parameter is there but it does not work at all.

For the simple redirection I wanted to do going for the storefront is overkilling...
Perhaps someone else has a hint :)

[ansmlc]

@SanchezWarren @felixknox The language parameter should work if you've also set the corresponding languages in Shopify -> Settings -> Languages, with one language being set as default.

With that in place, it's than possible to switch Checkout language in real-time based on user-selected headless site language. This is what works for me:

// memo buildClient function with language state

let client;
function ShopifyBuyInit(isLang) {
  client = useMemo(
    () =>
      Client.buildClient(
        {
          domain: process.env.GATSBY_SHOPIFY_STORE_URL,
          storefrontAccessToken: process.env.GATSBY_SHOPIFY_STOREFRONT_TOKEN,
          language: isLang,
        },
        fetch
      ),
    [isLang]
  );
}

// in StoreProvider component get language code and initialize client

ShopifyBuyInit(getNewLang(location));

  // intializing Checkouts

  useEffect(() => {
    const initializeCheckout = async () => {
    // ...
        // ... if there's existing checkout get language prop from customAttributes
            // ... compare lang prop with current location
            // ... if language is different, create new checkout
            // ... addLineItems from previous checkout
        // ... else create a fresh checkout with customAttribute lang input 
    };
    initializeCheckout();
  }, [location]);

[Owen Hoskins]

Thank you @ansmlc. This is working for me. 🌟 Only note is that I could only access the current language on client.config.language.

[Jeff Jassky]

Does this also change the currency that is returned?