How to search products in specific languages on Hydrogen store?

[WhatIsLav]

Hello, I'm building my store on Hydrogen + Storefront API. I found that when we on search page and searching for product with different language its searching for default titles only. For example: my store has Arabic locale and products are translated manually, and when Im in Arabic locale i get translated products , but when i search for product on Arabic language (copy & paste) i receive zero products in the meantime when i search for the same product on the same locale but in english i receive wanted product. I using default search page from Hydrogen demo store. How can i search for products in wanted locale?

[Martin_staff]

Hi @WhatIsLav, the search functionality should operate effectively regardless of the locale, provided a translation is available. Could you provide some additional details to help me understand the issue better?

1. Which endpoint are you utilizing for the search?
2. Could you kindly share your store details so I can investigate further?

[WhatIsLav]

Hello, I'm using the default search from hydrogen demo store

<Form method="get" className="relative flex w-full text-heading">
          <Input
            onChange={(e) => {
              setSearchTermDefault(e.target.value);
            }}
            value={searchTermDefault}
            name="q"
            placeholder="Search..."
            type="search"
            variant="search"
            className="font-bebas font-[10px]"
          />
          <button
            aria-label="Go"
            className="absolute right-0 py-2 rtl:right-auto rtl:left-0 font-bebas"
            type="submit"
          >
            Go
          </button>
        </Form>

this form was from beginning, all i changed is value to State and added onChange method that is setting this value to state so i don't modifying value of input. 

 example of what is writing to qu ery and what i received

So it is working properly, but i need to search products in Arabic locale, and when i trying to do so, i receive empty array: 

 

 It is not working even in graphiQL

 

[WhatIsLav]

To translate products i'm using Translate & Adapt app

[Transcy]

Hello @WhatIsLav ,

When using Hydrogen + Storefront API, the default search functionality may not automatically search for products in the desired locale when using different languages. Here's a general approach to searching for products in a specific locale using the Storefront API:

• Retrieve the locale code: Determine the locale code based on the language selection. In your case, the locale code for Arabic might be 'ar'.
• Modify the search query: In your search request to the Storefront API, include the locale parameter to specify the desired locale code. Here's an example:

query {
  products(first: 10, query: "your search query", locale: "ar") {
    edges {
      node {
        title
        // other product fields you want to retrieve
      }
    }
  }
}

Save and preview

Hope this can help.

Transcy team.

[WhatIsLav]

Hi Transcy, i checked your solution and I found that products have no argument "locale", screen below is confirming that

I researched problem with locale in search Storefront API further and found no info that would solve this. As a temporary solution i receiving all products (glad that there is only 8 of them) and filter them like 

product.title.toLowerCase().includes(queryTitle?.toLowerCase())

and if i'd have like 5000 of products then i would have huge performance issues, and I hope someone could help me to receive products with title in needed locale.

[Martin_staff]

Hi @WhatIsLav ,

There's currently a gap in SFAPI to search for resources by their translated handle. You're correct in that the query argument for the products field doesn't accept translations which explains the behaviour you're seeing. We're working on a fix and I'll update here when it's out. Sorry for the inconvenience.

[Martin_staff]

Hi @WhatIsLav !

We've shipped out some changes to SFAPI, extending the current search by handle, so that you can search by either the original handle or translated handle when combined with the inContext directive:

query ResourcesByHandle @inContext(language: ES){
  product(handle: "original-handle-or-handle-in-spanish"){ ... }
  collection(handle: "original-handle-or-handle-in-spanish"){ ... }
  page(handle: "original-handle-or-handle-in-spanish"){ ... }
  blog(handle: "original-handle-or-handle-in-spanish"){ 
    ...
    articleByHandle(handle: "original-handle-or-handle-in-spanish") { ... }
  }
}

Apologies for the inconvenience this may have caused.

[WhatIsLav]

Hello again Martin,

I really appreciate your help and I can count in my question only on you and Shopify devs team.

The problem is still remains. I tried to search by GraphQL product on arabic locale and I still get zero products. I searchin not by arabic HANDLE, I search by arabic TITLE. How can I get arabic handle.

And one more question - which version of SFAPI do I need to use?