The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 06-28-2012, 08:01 PM
Jesse Taft's Avatar
Jesse Taft is offline
Junior Member
 
Join Date: Jun 2012
Posts: 2
Default

Integrating with responsive site


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...oduct=13019377 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!
The Following User Says Thank You to Jesse Taft For This Useful Post:
  #2  
Old 07-05-2012, 09:53 AM
Jason Fazey's Avatar
Jason Fazey Jason Fazey is offline
 
Join Date: May 2012
Location: Brisbane Australia
Posts: 118
Default Changing Layouts based on Screen size

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

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

Code:
<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

Code:
.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

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

Code:
<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

Last edited by Jason Fazey; 07-30-2012 at 10:39 PM.
The Following 3 Users Say Thank You to Jason Fazey For This Useful Post:
hoosker (08-07-2012), Matt Ecwid (07-13-2012), Maya (07-16-2012)
  #3  
Old 07-13-2012, 09:49 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Please, refer to this post: http://www.ecwid.com/forums/showthre...6626#post56626
  #4  
Old 07-13-2012, 03:25 PM
Guitar Hangar's Avatar
Guitar Hangar Guitar Hangar is offline
Junior Member
 
Join Date: Jul 2012
Posts: 4
Default

Hello Everyone,

I'm using Wordpress and would like to know where exactly do you change this code?
  #5  
Old 07-13-2012, 09:34 PM
Jason Fazey's Avatar
Jason Fazey Jason Fazey is offline
 
Join Date: May 2012
Location: Brisbane Australia
Posts: 118
Default

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.
The Following User Says Thank You to Jason Fazey For This Useful Post:
Maya (07-16-2012)
  #6  
Old 07-17-2012, 03:05 AM
rockette's Avatar
rockette rockette is offline
Junior Member
 
Join Date: Apr 2011
Posts: 2
Default

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:
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.
  #7  
Old 07-17-2012, 03:19 AM
Jason Fazey's Avatar
Jason Fazey Jason Fazey is offline
 
Join Date: May 2012
Location: Brisbane Australia
Posts: 118
Default

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.
The Following User Says Thank You to Jason Fazey For This Useful Post:
rockette (07-17-2012)
  #8  
Old 07-17-2012, 03:46 AM
rockette's Avatar
rockette rockette is offline
Junior Member
 
Join Date: Apr 2011
Posts: 2
Default

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.
  #9  
Old 07-17-2012, 09:55 AM
Dee Jing's Avatar
Dee Jing Dee Jing is offline
 
Join Date: Nov 2011
Posts: 25
Question [Q] Is it possible to have a responsive storefront?

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.
  #10  
Old 07-17-2012, 11:02 AM
Jason Fazey's Avatar
Jason Fazey Jason Fazey is offline
 
Join Date: May 2012
Location: Brisbane Australia
Posts: 118
Default

no problem
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
design, flexible, responsive, wordpress

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:27 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.