[Jesse Taft]

I was wondering if there's any way Ecwid can be configured to adapt better to a responsive website. Its almost working but not quite.

If you look at this test page: http://jksample4.clearmarble.net/ecwidtest/ and make the browser window more narrow you'll see what I mean. It works ok until it gets to the tablet and phone size.

Also, if you look at one of the actual product pages like: http://jksample4.clearmarble.net/ecw... you'll see that it actually works all the way down to the tablet size. But when you get to phone size it falls apart.

The checkout page has similar issues.

I'm guessing that Ecwid was not really designed with this functionality in mind and what little luck I'm having is just things working coincidentally with my sites responsive layout. Still, if there was a way to make this properly responsive it would be the best possible choice to use on my site. If not then I can't really use it at all.

Any help or advice would be greatly appreciated. Thanks!

[Jason Fazey]

I thought I'd share this for those that want to change the layouts of their shopping cart dependant on the screen size thats looking at the website.

Before I start, I realise that Ecwid works fine by itself with mobile devices by changes the layout to suit.
But I found that for those of us that use wordpress and themes that already do that, when viewing the store in my portable devices, the categories in thumbnail view would mean still having to scroll sideways to see everything. Also the bag if in float mode on the store normally, would take up quite a lot of space on the screen on the portable device.

So all of the above led me to working this out.

To change the grid layout on thumbnails so that it will go from how ever many you currently use to one per row, you need to change the normal javascript

<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style="); </script>

to

<script type="text/javascript">
if (screen.width <= 320) {
	document.getElementById('ProductBrowser-1').className += ' ecwid-Mobile'
	xProductBrowser("categoriesPerRow=1","views=grid(10,1) list(10) table(20)","categoryView=grid","searchView=list","style=");
} else {
xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=");
}
</script>

Then add this code to your Ecwid css file

.ecwid-Mobile img.ecwid-SpacerImage {
  display: none !important;
}

You can play around with this for exactly how many items to show and such

The next item, was showing the bag on your site normally, and then hiding it when you're using a device

To do this you will need to change the normal javascript

<script type="text/javascript"> xMinicart("style=","layout=attachToCategories"); </script>

to

<script type="text/javascript">
if (screen.width <= 320)
  {
xMinicart("style=","display:none !important");
  }
else
  {
xMinicart("style=","layout=floating");
}
</script>

Hopefully this is helpful for people, as it was something I discovered I wanted to achieve a few days ago when viewing my store on my iphone

to test
Please note, that to see this working in action, look at your site on the devices you want to see it change on. If you just try and resize the browser window you use on your computer, it wont show the change. The only reason I can think of for this is maybe because the screen resolutions settings on computers can't be reduced down to 320 pixels wide

[Eugene Rimmer]

Please, refer to this post: http://www.ecwid.com/forums/showthre...

[Guitar Hangar]

Hello Everyone,

I'm using Wordpress and would like to know where exactly do you change this code?

[Jason Fazey]

You will need to go to the store page on your wordpress site and use the code that ecwid supplies for embedding the store, rather than the code that wordpress supplies.

[rockette]

Thanks for this information.

I've attempted to add this to a Wordpress site using Twenty Eleven (a responsive theme) but am not getting any responsive behaviour based on the conditional javascript.

Here's the page: http://www.francescarockette.com.au/collections

and the code:

<script charset="utf-8" type="text/javascript" src="http://app.ecwid.com/script.js?326247"></script>
<script type="text/javascript">// <![CDATA[
  ecwidMessages = {
    "CategoryPathPanel.store":"Collections",
    "PaymentDetails.enter_email":"Enter your e-mail"
  };
if (screen.width <= 1040)
  {
 xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(99) table(20)","categoryView=grid","searchView=list","style="); 
  }
else
  {
 xProductBrowser("categoriesPerRow=4","views=grid(3,3) list(99) table(20)","categoryView=grid","searchView=list","style="); 
}
</script>
<script type="text/javascript">
if (screen.width <= 1000)
  {
xMinicart("style=","display:none !important");
  }
else
  {
xMinicart("style=","layout=floating");
};
// ]]</script>

There's no change when I hit the breakpoints at 1040px and 1000px - what might I be missing?

I'm only seeing 4 categories per row regardless of the pixel width of the screen.

[Jason Fazey]

Hi Rockette, when I look at this on my iphone, the store changes to 3 categories wide.

I know when you physically try and reduce your browser window down it doesnt decrease as per the javascript, i Believe this is because your screen size is actually set within your monitor settings, not within how wide your browser window is.

Try changing the resolution of your monitor to lower than the 1040 pixels you're showing in the script and see if it changes there.

The main thing is that it definitely works on the iphone screen size, so it should work on a tablet screen size as well, as they are under the 1040 pixels as well.

[rockette]

Thanks so much!

I was testing it using http://responsivepx.com/ which must only work on css media queries and not javascript.

Thanks for your help.

[Dee Jing]

I think it is a very great ideas to have a responsive storefront (contents can be resized automatically when having to different screen resolution), because now smart phone and tablets are come in action and it become more everyday. Now my site is responsive but the storefront is not, so I would like to ask "is it a way to have responsive design of ecwid?, if have then how to do it.

Thanks and Best Regard.

[Eugene Rimmer]

Originally Posted by Dee Jing

I think it is a very great ideas to have a responsive storefront (contents can be resized automatically when having to different screen resolution), because now smart phone and tablets are come in action and it become more everyday. Now my site is responsive but the storefront is not, so I would like to ask "is it a way to have responsive design of ecwid?, if have then how to do it.

Thanks and Best Regard.

Please, refer to this post: http://www.ecwid.com/forums/showthre...