Js-buy-sdk: How do you get the Shopify Product IDs from API?

Created on 19 Jan 2019  路  2Comments  路  Source: Shopify/js-buy-sdk

Describe the bug
Hello.

With the Shopify Buy Button API, I'm able to do the following to iterate through all of my products:

client.product.fetchAll().then((products) => { // Do something with the products });
I would like to create a component for each of the products, using this call:

  ui.createComponent('product', {
  id: 12345,
  node: document.getElementById('product-0')
});

However, it seems that the IDs gathered by client.product.fetchAll() do not correspond with the ID for ui.createComponent. The client IDs seem to be some GraphQL IDs (eg Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzI0NDk3Mjg4MzE1ODg=), while createComponent has some numerical IDs that correspond to the URLs on the shopify admin.

Is there no way to get the IDs that correspond to ui.createComponent?

Thank you!

To Reproduce
See above

Expected behavior
Ability to get the correct IDs for ui.createComponent

Bug Report Checklist

  • [x ] I have read and agree to the CODE_OF_CONDUCT.md
  • [ x] I have read the CONTRIBUTING.md guidelines.
  • [x ] I have provided a detailed description of the bug, including code samples, and/or network data.
  • [ x] I have provided information about my development environment, including SDK version.

Most helpful comment

The GraphQL IDs are base 64 encoded. If you need to get the underlying numerical ID, you can base 64 decode it and then extract the ID.

Running atob("Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzI0NDk3Mjg4MzE1ODg=")
will give you "gid://shopify/Product/2449728831588"
which means that your Product ID is 2449728831588.

All 2 comments

The GraphQL IDs are base 64 encoded. If you need to get the underlying numerical ID, you can base 64 decode it and then extract the ID.

Running atob("Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzI0NDk3Mjg4MzE1ODg=")
will give you "gid://shopify/Product/2449728831588"
which means that your Product ID is 2449728831588.

@rebeccajfriedman Thanks for clarifying, big help for my app!

Was this page helpful?
0 / 5 - 0 ratings