How can a sales channel app look up a product based on the product page being viewed?

Solved
Excursionist
51 3 5

Example URL: https://storeName.myshopify.com/products/bedside-table

 

I want to be able to pull information on this product using a script tag. My thinking:

 

1. Use a script tag to isolate the handle "bedside-table"

2. Script then calls the self hosted client app to run a GET request to /admin/api/2019-10/product_listings.json to grab ALL products

3. Self hosted client app sorts thrugh the list and matches the product based on a matching "handle" property. Then it returns the matching product object to the front end script tag.

 

Is this the best option or is there a better way? I am hoping there is a way to extract the product ID based on the page the user is on (so I can get only the relevant product for that page). But this information does not seem to be present for a script tag to access.

0 Likes
Highlighted

Success.

Excursionist
35 1 7

A handle is just as unique as a product ID. So it shouldn't actually matter which one is provided to you in your script tag I think.

 

If you only run your Script Tag on a product page, you could just parse the handle:

 

var productHandle = window.location.pathname.replace("/products/");

// API call to your self hosted client app should include this productHandle.

fetch("https://myselfhostedapp.com/api/product_listing?handle=" + productHandle).then(...etc);

The /admin/api/2019-10/product_listings.json API also support passing in a handle. Now that you send it to your self hosted app, you can leave the filtering to Shopify. It will only return the products that match that handle.

 

The option I would explore:

When creating your Sales Channel app, you can also generate a Storefront token. With this token, you can use the JS Buy SDK to fetch all data of a product (even by product Handle).

1 Like