Coder Social home page Coder Social logo

Langauge for checkout about js-buy-sdk HOT 7 OPEN

felixknox avatar felixknox commented on September 17, 2024
Langauge for checkout

from js-buy-sdk.

Comments (7)

ansmlc avatar ansmlc commented on September 17, 2024 2

@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]);

from js-buy-sdk.

ansmlc avatar ansmlc commented on September 17, 2024

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:

image

from js-buy-sdk.

SanchezWarren avatar SanchezWarren commented on September 17, 2024

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

Thanks

from js-buy-sdk.

felixknox avatar felixknox commented on September 17, 2024

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.

from js-buy-sdk.

SanchezWarren avatar SanchezWarren commented on September 17, 2024

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 :)

from js-buy-sdk.

owenhoskins avatar owenhoskins commented on September 17, 2024

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

from js-buy-sdk.

JeffJassky avatar JeffJassky commented on September 17, 2024

Does this also change the currency that is returned?

from js-buy-sdk.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.