How to search products in specific languages on Hydrogen store?

WhatIsLav
Shopify Partner
6 0 0

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?

Replies 8 (8)

Martin_staff
Shopify Staff
3 0 3

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?

To learn more visit the Shopify Help Center or the Community Blog.

WhatIsLav
Shopify Partner
6 0 0

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. 

Screenshot 2023-07-06 at 14.39.40.png

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

Screenshot 2023-07-06 at 14.41.02.png

 

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: 

Screenshot 2023-07-06 at 14.43.08.png

Screenshot 2023-07-06 at 14.43.27.png

 It is not working even in graphiQL

Screenshot 2023-07-06 at 14.46.53.png

WhatIsLav
Shopify Partner
6 0 0

To translate products i'm using Translate & Adapt app

Transcy
Shopify Partner
285 19 83

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.

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
WhatIsLav
Shopify Partner
6 0 0

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

Screenshot 2023-07-11 at 10.28.03.png

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
Shopify Staff
3 0 3

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.

To learn more visit the Shopify Help Center or the Community Blog.

Martin_staff
Shopify Staff
3 0 3

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.

To learn more visit the Shopify Help Center or the Community Blog.

WhatIsLav
Shopify Partner
6 0 0

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?