Alokai•2y ago

Weird url parameters

Hello 🙂 My Product Id seems whack or not VSF friendly. The are formatted as rest style urls: "gid://shopify/Product/8051870433578/-name" which in vuetools which returns 404. The correct and working product ID seems to be "8051870433578/-name" I did this as short term solution but it's a terrible hack and shows Im need help:

:link="
                localePath(
                  `/p/${productGetters
                    .getId(product)
                    .toString('ascii')
                    .split('/')
                    .pop()}/${productGetters.getSlug(product)}`
                )
              "

:link="
                localePath(
                  `/p/${productGetters
                    .getId(product)
                    .toString('ascii')
                    .split('/')
                    .pop()}/${productGetters.getSlug(product)}`
                )
              "

8 Replies

skirianov•2y ago

Hey @Christo44 if you have a custom/non-standardized URL you can always create your own custom getter function and use it to retrieve the link. Afaik Shopify integration doesn't have a dedicated getter to retrieve product URL

Christo44OP•2y ago

I dont want to add complexity, i just want use the menu to connect or click to my products. But how does your Shopify Demo handle it ? From what I can see out of the box it's transforming the url somehow ? So here mine would be: https://demo.vuestorefront.io/p/gid://shopify/Product/Sample-Fog-Linen-Chambray-Towel-Beige-Stripe and your demo is: https://demo.vuestorefront.io/p/77/Sample-Fog-Linen-Chambray-Towel-Beige-Stripe

skirianov•2y ago

Let me take a look at it and I'll get back to you later on 🙂 Hey there!

export const getProductOriginalId = (product): string => {
  if (product && product?._id) {
    const buff = Buffer.from(product?._id, 'base64');
    const decodedId = buff.toString('ascii');
    const extractedInfo = decodedId.split(/[\s/]+/).pop();
    return extractedInfo;
  }
  return '';
};

export const getProductOriginalId = (product): string => {
  if (product && product?._id) {
    const buff = Buffer.from(product?._id, 'base64');
    const decodedId = buff.toString('ascii');
    const extractedInfo = decodedId.split(/[\s/]+/).pop();
    return extractedInfo;
  }
  return '';
};

There's one undocumented Product getter, we will contact with the maintainers and let them know to document it. Can you please try it out, since it looks almost the same as your solution but already built-in 🙂

Christo44OP•2y ago

Hehe im just really asking why my urls dont work. Then i noticed your demo urls were different Can i use your getter ? Looks much better than mine 🙂

skirianov•2y ago

This is built-in getter, it's available under the productGetters object Unfortunately it was not documented for some reason, we will fix it now! Thanks for letting us know tho ❤️

Christo44OP•2y ago

so in your demo, that was being used ? Does that mean the shopify starter is out of sync in that it would not use the getter ?

skirianov•2y ago

this is what is used in demo

:link="
                localePath(
                  `/p/${productGetters.getId(product)}/${productGetters.getSlug(
                    product
                  )}`
                )
              "

:link="
                localePath(
                  `/p/${productGetters.getId(product)}/${productGetters.getSlug(
                    product
                  )}`
                )
              "

Christo44OP•2y ago

@skirianov if that's what you use in demo, how is the URL formatted without the GID ? I dont understand. Using that getter my urls look like => http://localhost:3001/p/gid:/shopify/Product/8001570434570/chocolate However, if I use the new getter you gave me => http://localhost:3001/p/8001570434570/chocolate

Gaming

Programming

Weird url parameters