d
Topic
Posts:
15
Last edited December 04, 2012
g
1
upvotes

Shopify and respond.js This post is outdated

Anyone here able to get respond.js working with Shopify? I believe it will not work because of the way the CSS files are hosted via CDN.

Any suggestions would be greatly appreciated. Thanks.

Update:

Just to show how I am doing this:

<!-- Respond.js proxy on external server -->
<link href="http://scottjehl.com/respond-proxy/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="{{ 'respond.proxy.gif' | asset_url }}" id="respond-redirect" rel="respond-redirect" />
<script src="{{ 'respond.proxy.js' | asset_url }}"></script>

https://github.com/scottjehl/Respond

i
Replies
Matt Member
Posts:
15
January 08, 2013

Is your update an example of how you've managed to get this to work, or were you simply showing how you were trying to do it? I'm in the same situation of needing to get respond.js to play nicely with Shopify, but the cross-domain proxy method outlined on the respond.js page (and which it looks like you were trying to use above) doesn't seem to have any effect when I try using it.

Can anyone confirm whether they've managed to get respond.js working with Shopify and if so how, as it's not working for me.

Posts:
15
January 08, 2013

Hey Matt,

The updated example was just to show how I was attempting to achieve it, but still failing.

Would absolutely love a solution for this.

Matt Member
Posts:
15
January 11, 2013

I spent hours on this and in the end gave up. Whatever I tried I could not get the cross-domain proxy 'fix' to work.

i resorted to disabling my responsive layout in IE8 and below and defaulting to the full desktop style, but if anyone else can shed any light I'd be interested.

The odd thing is, the proxy thing is obviously working for most people, otherwise the respond.js issue tracker would be full of reports of it not working, but despite several such reports it would seem most people can get it working just fine. But is there something specific to Shopify that prevents it working I wonder??

Posts:
15
January 11, 2013

My guess is it has to be specific to Shopify. I checked out a couple of other responsive Shopify themes to see if anyone was using this, but never found a theme using respond.js

I essentially did the same for IE8, but it was a huge pain to do, because typically all of my CSS is in a single file and I use IE conditional tags to append a class instead of loading a separate stylesheet. This meant I had to go through all of my media queries and merge them for a separate IE stylesheet, which took time to do and isn't the most practical when I need to make an adjustment to any of the styles.

If anyone from Shopify reads this thread, any chance you can offer some insight into why this might happen with the Shopify CDN?

Posts:
65
May 11, 2013
g
4
upvotes

Hi all,

I was running into the same problem as well and the general consensus above was correct - the way Shopify hosts CDN assets makes it impossible to use Respond.js out of the box, even with the cross-domain proxy.

I did a little further digging however, and have developed a technique for using Respond.js with Shopify, which I've made available on my blog here: Using Respond.js with Shopify.

Hope that helps a few people!

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Matt Member
Posts:
15
May 13, 2013

Great work Gavin, that's awesome, thanks :)

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
May 13, 2013

Upvoted, Thanks for noodling out a fix and posting your results!

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
2
May 30, 2013

This is not working for me and I followed your directions Gavin.

Mind taking a look and seeing if you notice anything out of place?

http://magnum-detox.myshopify.com

Posts:
65
May 30, 2013

Hi Drew!

I think the issue with your site is the order that you've included the files. Here's the order they should be included in:

<!-- HTML5 shim and Respond.js support for HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://cdn.shopify.com/s/files/1/0208/4054/t/2/assets/js-respond-min.js?2088"></script>;
  <link href="https://cdn.shopify.com/s/files/1/0208/4054/t/2/assets/respond-proxy.html"; id="respond-proxy" rel="respond-proxy" />
  <link href="http://bootstrap-2.myshopify.com/pages/respond"; id="respond-redirect" rel="respond-redirect" />
  <script src="http://bootstrap-2.myshopify.com/pages/respond"; type="text/javascript"></script>
<![endif]-->

Note that they can all be wrapped inside <!--[if lt IE 9]><![endif]--> - this will stop browsers that already support media queries from wasting time downloading any Respond.js assets.

Hope that helps, let me know if you run in to any other issues!

 

 

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
2
Last edited May 30, 2013

Gavin, I owe you a beer my friend! That worked perfectly.

You were right, it was just an order issue with including the files.

Thanks again for the incredibly quick reply!

Posts:
65
May 30, 2013

No worries, good luck with the store :).

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
89
Last edited November 26, 2013

Hmmm I can't seem to get this to work... Would someone mind taking a look?

http://stoked-prototype.myshopify.com/

Help would be very appreciated! Thanks!

 

Edit: I got it working. Thanks for this nice work around!

Posts:
65
November 27, 2013

Glad to hear you got it working, Dries :).

Would you mind sharing what the problem/solution was? Always good to know in case others have similar problems; I can try to keep the blog post updated!

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
696
November 27, 2013

BOOM! genius

I'm a million different people
Posts:
89
November 27, 2013

I accidentally copied the wrong code somewhere. So all ok!

 

All tough, this solution might have it's problems... What if you want to build a theme that utilizes resond.js? You can't ask buyers to create a page called repsond and copy JS code there... :-)

Would a theme-only solution be possible somehow?  

Posts:
65
November 27, 2013

Ah, that'll do it every time :).

I'm not really sure how you might be able to build a theme-only solution... the respond proxy does need to be coming from the same URL that the page is being served from. I'll have a think about it and see if I can come up with anything :).

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
65
November 30, 2013
g
2
upvotes

Okay, I had a think about it and did come up with something :).

http://gavinballard.com/using-respond.js-with-shopify-redux/

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
51
November 30, 2013

I think you'll find you are re-inventing the wheel a bit. This has already been done very effectively using intention.js

http://radiatorstudios.com/blogs/insight/9040825-conditional-asset-loading-on-shopify-with-intention-js

Posts:
65
November 30, 2013
g
1
upvotes

Thanks for the link, Ian - interesting read.

That said, unless I'm missing something, these are solving two entirely different problems.

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
Posts:
696
Last edited December 01, 2013

I think you'll find you are re-inventing the wheel a bit. This has already been done very effectively using intention.js

Actually, if you read the intenion.js docs there is a note that reads; "jQuery 2.x dropped support for IE8, so obviously using it in conjunction with Intention will not work in IE8. If you don't care about that, rest assured there is nothing Intention needs in jQuery 1.x that isn't available in jQuery 2.x."

Gavin is talking about an implementation for providing @media-query support for IE7 and lower, which for me is really very welcome given I had given up on it some time ago... I understand what intention.js does but it seems like a rather unwieldy hammer to be thrashing around when you just need to shim in support for something that is already in place. Not least since Ian's article is just using it in the context of serving images. Also since I don't quite see how that particular solution supports retina devices, if it does at all?

I'm a million different people
Posts:
51
December 01, 2013

Ah, fair point. I stand corrected.

Posts:
89
December 03, 2013

Gavin,

Thanks for sharing your solution to the community! When I got some more time, I'll try an implement this new method for sure!

 

@rickydazla: Respond.js actually provides support for "@media-query support for IE8 and lower ", IE8 is more used, and it's commonly a good practice to still support IE8 for now. So using html5shiv and Respond.js for a site based on bootstrap is a must, in my opinion.