A menu redirecting to a product does not work because of the link returned by Shopify Storefront

[tonytangdev]

Expected Behavior

When I create a new menu from Shopify and want the menu to display one product, a new link appears in my header. When I click on it, I expect the product page to be displayed.

Current Behavior

When I click on the new menu link, I get a 404 page not found.

Possible Solution

When we fetch the menus (https://github.com/vercel/commerce/blob/main/lib/shopify/index.ts#L340), the returned values when we have a menu that's meant to redirect to one product looks like this :

[
  {
    title: 'echarpe',
    url: 'https://ivivi-fr.myshopify.com/products/echarpe'
  }
]

Notice products is plural. However, to redirect to a product page, in this project, the link must look like this : https://ivivi-fr.myshopify.com/product/echarpe. Notice product is sungular. A solution would be to rename the folder product to products and to update every href meant to redirect to a product page.

Steps to Reproduce

1.Go to https://[your-shopify-store-subdomain].myshopify.com/admin/menus 2.Create a new Element inside your Next.js Frontend Header Menu menu 4.Choose any product

5. Save
6. A new menu should appear on your NextJS app
7. Click on it
8. Notice the link is wrong

[leerob]

Is this not updatable on the Shopify side?

[tonytangdev]

At the time I was working on it, I tried to see if that could be updatable on Shopify and I didn't find a way to do it.

I'm not working on it anymore, maybe it has changed since then. If anyone who has time and wants to have a look, be my guest.

[leerob]

I'm pretty confident this is updatable on the Shopify side, so I'm comfortable leaving it is as. But thanks for opening this and suggesting alternatives!