Integrating the new collection and product slugs

[DennisKraaijeveld]

Hi! I saw that there was an update we all(?) have been waiting for. The ability to translate collection and product slugs is an awesome update in terms of UX and SEO.

Now my question is: How can we use this in Hydrogen 2. I use Sanity (Connect) to source my web store but I am not that concerned on how to setup that with the new update. The only thing I have troubles with is figuring out how to build /collections/collectieA and en/collections/collectionA

[DennisKraaijeveld]

The following handle is the default handle which we wanted to translate to an English handle. The only way to get the English page is to input the original handle. Using the translated handle will return null.

query getTranslatedCollection @inContext(language: EN) {
    collection(handle: "kerstboomversiering") {
    id
    handle
  }
}

Output:

"data": {
    "collection": {
      "id": "gid://shopify/Collection/448104005942",
      "handle": "christmas-tree-decoration"
    }
  },

[DennisKraaijeveld]

Someone on the Discord channel responded that this is probably an oversight by the API team. Do we know how much time it will take to sort out something like this? Do we talk about days, weeks or months?

[blittle]

As it's a new feature, I assume they will want to cleanup some of these edge cases. But I'm not sure I can give a definitive time frame, but I doubt it will be within the next week or two.

[plcdnl]

Did you find any solution? I'm trying to get the other internationalized slug when i query a product or collection

[blittle]

I think everything should work properly. For example, see mock.shop with the handle sweatpants localized to jogginghose for the German market. Note that @inContext is providing the german language and country.

Make sure that you have the Translate & Adapt app installed, and the language published in the admin.

[plcdnl]

Yes, it works. I’m wondering if it’s possible to also retrieve the slug in other languages. This can be useful when switching from one page to another. In other CMS platforms, I receive an object containing the slug in multiple languages. Is there a way to achieve the same here?

[blittle]

Are you trying to pull all of the available slugs for a given product? Already the translated slugs show up when you pull references from the SFAPI. For example, loading all products or products in a collection, the handle is translated if you provide an @inContext() directive: https://mock.shop/?query=cXVlcnkgcHJvZHVjdHMgQGluQ29udGV4dChsYW5ndWFnZTogREUsIGNvdW50cnk6IERFKSB7CiAgcHJvZHVjdHMoZmlyc3Q6IDIpIHsKICAgIG5vZGVzIHsKICAgICAgaGFuZGxlCiAgICB9CiAgfQp9Cg%3D%3D

[plcdnl]

The same product can have different slugs in different languages. When fetching data in one language, the API response should include the slugs for all available languages to facilitate routing.

[blittle]

Could you please give me a step by step problem you are trying to solve?