Get Product Handle from ScriptTag

Amit_Smoller
Shopify Partner
3 0 3

Hi,

I am planning to build a ScriptTag, which will be some Javascript which will be included in Shops using my API.

I would like my JavaScript to know:

a. the shop loading the script

b. what kind of page it's being loaded on

c. if its a product page then the product id or name

Thanks

0 Likes
Matt_Stubbs
Shopify Partner
65 0 9

Hi Amit,

 

a. the shop loading the script

 

I don't think it's documented anywhere, but the name of the shop will be appended to the script tag request.  So if your src attribute for a shop script tag is  http://amitsapp.com/script.js the store will load it as http://amitsapp.com/script.js?shop=testing123-80.myshopify.com

If you want to access the name of the shop from your JS code in the page you can use the Shopify.shop object:

console.log(Shopify.shop)

b. what kind of page it's being loaded on

I don't know if this is possible without editing the template. You could just look at the URL. If it's a product page, it will have '/products/' in the URL.

 

c. if its a product page then the product id or name

You can use the AJAX API to access product data.

Hope that helps!

Matt

Developer of Back in Stock, the easiest way to increase sales on out of stock products. https://apps.shopify.com/back-in-stock
0 Likes
Amit_Smoller
Shopify Partner
3 0 3

Hey Matt,

Thanks for your post.

The JS Shopify.shop, is really nice. That solves (a).

However it is a shame that there isn't something similar for the Product, like Shopify.CurrentProduct.

I don't think the Ajax API helps me here, since I have all the product data from the SDK, I just need to know the current product being shown.

I wonder if I can count on it that (regardless what theme or domain is used) the URL will always end with /products/{productID}

and if in fact {productID} maps to the product ID/handle/whatever it's called.

If you can verify the last bit that would be great.

Thanks

Amit

 

 

 

0 Likes
Matt_Stubbs
Shopify Partner
65 0 9

Hi Amit,

Yes, Shopify stores have a common URL structure, so you can detect it that way. A basic product URL looks like this:

http://testing123-80.myshopify.com/products/green-shirt

This is a simple case. A product page could be loaded with a more complex URL:

http://testing123-80.myshopify.com/collections/t-shirts/products/green-shirt#detail?utm_source=twitt...

or something like that. You should be able to clean that up fairly easily in your script and extract the handle.

Hope that helps.

Matt

 

 

 

Developer of Back in Stock, the easiest way to increase sales on out of stock products. https://apps.shopify.com/back-in-stock
0 Likes
Jason
Shopify Expert
10039 119 1874

However it is a shame that there isn't something similar for the Product, like Shopify.CurrentProduct.

If you want to access the product details with javascript just use the json version. Aka:
http://yourdomain/com/products/product-name.json

Same logic will work for pages and collections too.

If you want to access the name of the shop from your JS code in the page you can use the Shopify.shop object:

Do note that it's possible to remove the Shopify functions so don't assume you will always have access to it.

[edit] removed some info already posted above.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Amit_Smoller
Shopify Partner
3 0 3

Thanks guys.

To summarize: I will need to parse the URL to get the information I am after.

Seems to me that if Shopify would like real frontend apps/widgets to be built for the platform, they should provide some additional meta data and some minimal layout structure to the shops - Just my 2 cents...

Klopp
Tourist
12 1 0

Hi guys,

I know this is an old thread, but any updates about it? 

Did Shopify add a Product or Cart object or we just need to use the AJAX API to get the data?

 

0 Likes