cart.js on subdomain

Solved
Highlighted
Tourist
7 0 2

Hello.

 

We run a WordPress blog on a subdomain e.g. blog.shop.com 

 

Previously we had a minimal page on shop.com that contained just the basket count and iframed that on blog.shop.com which allowed us to show the users basket count on the subdomain. That request is being blocked by your X-Frame-Options headers.

 

Am now looking at using cart.js to get the cart total - but that's now being blocked by CORS policy. ( as outlined below) :
https://shopify.dev/docs/themes/ajax-api/getting-started

What's the best approach for showing the users basket total on a subdomain.

 

Thanks,

 

Ian.

0 Likes
Highlighted
Tourist
7 0 2

Anyone got any suggestions, thanks!

0 Likes
Highlighted
Tourist
7 0 2

To add some more detail.

 

Previously we loaded a very paired back page in an <iframe> which just included the basket count. Example of this below:

https://www.scp.co.uk/pages/remote-cart

It's loaded on a subdomain, but in Chrome we see the page doesn't load with console message, error and test page below:
https://news.scp.co.uk/test/iframe.html

Refused to frame 'https://www.scp.co.uk/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

Believe this is due to the following header that Shopify is serving on the file.

 

x-frame-options: DENY

 

If I add a meta tag to the 'remote-cart' page in Shopify this seems to make no difference, e.g.

<meta http-equiv="Content-Security-Policy" content="child-src https://news.scp.co.uk; frame-ancestors https://www.scp.co.uk;">
Seems to me the security policy is a little too strict given we're on the same domain. Is there anyway to still frame the storefront?

/
 
Alternatively have tried the cart.js method outlined below, and test page:
https://shopify.dev/docs/themes/ajax-api/getting-started
https://news.scp.co.uk/test/ajax.html
 
But this get's blocked by CORS as there is no Access-Control-Request-Headers set on cart.js
Access to XMLHttpRequest at 'hhttps://www.scp.co.uk/cart.js' from origin 'https://news.scp.co.uk' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Again don't think I have any control over the access-control headers for cart.js - and also would suggest that a subdomain could be ok to use?
 
Also If I try and request JSONP to work around the CORS issue I then run into the following CORB issue in Chrome:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.scp.co.uk/cart.js with MIME type text/javascript. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Hoping someone has some insight here, as Shopify support keeping relaying me back to this forum. Happy to try any approaches, just need a simple way to show a customers basket count on a subdomain.

Thanks.

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1040 140 165

This is an accepted solution.

You might be able to use JSONP. Here's an example.

0 Likes
Highlighted
Tourist
7 0 2

@scottydont ah nice one - that's worked!

 

For anyone else stuck, it's cart.json to request via JSONP not cart.js

 

$.ajax({ 
dataType:'jsonp',
url: 'https://domain.co.uk/cart.json?callback=?',
success: function(d){
/* do something with the data. In this example we are just loggin it */
console.log(d)
}
});
1 Like