Have a moment to answer a few questions? We'd love your feedback on working with FoxyCart templates: Click here for more information
Different Cart/Checkout/Receipt Templates for Desktop vs Mobile
  • mattymatty
    Member
    Hi guys and girls.

    I'm needing to produce differently customized cart, checkout, and receipt pages for mobile and desktop users. Any suggestions? Do I need 2 different foxycart accounts in order to maintain the 2 different templates? Or is there some other option for displaying a more customized cart/checkout/receipt system in the mobile browser while still using the "standard" cart/checkout/receipt for the desktop browsers?

    On a side note, any updates on the progress of your own mobile cart implementation?

    -Matt
  • lukeluke
    FoxyCart Team
    Hey Matt. Just this weekend I got a demo of the latest prototype for our responsive design and it's unfreaking believable. I'm really stoked about it. It resizes so nicely and the experience is seamless no matter what interface you're using. Unfortunately, I don't have a timeline for you. We're working hard, but it's a pretty significant redesign which involves introducing some new technologies such as Twig for better control of the templates.

    I think @sparkweb's team has done some mobile stuff recently, so you might want to ping him about it in the mean time. I don't think you'll need multiple accounts since media queries should help get you there.
  • sparkwebsparkweb
    MemberIntegration DeveloperFoxyShopOrder Desk
    Basically, that's what I've been doing: using media queries to push different CSS for different browser sizes. Not so much on the checkout but a little bit for different browser view sizes on the storefront itself.

    I'm pretty excited to hear about the new responsive design for mobile checkout. Can we just speed time forward a few months and see this thing released? ;)
  • fc_adamfc_adam
    FoxyCart Team
    This might be helpful too, to give you an idea of how media queries work: http://css-tricks.com/css-media-queries/
  • mattymatty
    Member
    Thanks guys for all the input on this. I'm excited for the new version, and I'm also excited about Twig and am hoping to have good reason to use it soon.

    I'll try the css media queries. That concept is completely new to me, and my brief reading so far has been quite enlightening. Thanks again for the input.

    -Matt
  • How will this work if the mobile and desktop versions of the site look different?

    I can see scenarios where CSS alone will not be enough as most mobile sites have a completely different look and feel to the desktop equivalent. As an example, on mobile sites, the navigation nodes and site structure may be different between the two because different things will be important to mobile users compared to desktop users.

    In many cases, mobile design is not just a case of making the same thing fit on different screens, but the overall layout and structure of the page will be different.

    I'm intrigued to hear how the new cart design will handle these sorts of scenarios... Will it be possible to use different HTML templates for mobile and desktop sites when this new cart design is released?

    Cheers
  • lukeluke
    FoxyCart Team
    @babblebib You may want to look into "responsive design" techniques. It's AMAZING what can be done. I got a demo of what our team has been working on last weekend and it's incredible. The idea being that the experience itself is as consistent as possible regardless of the viewing platform. Kevin, one of our team members that is working on the responsive checkout, put this slideshare together that you may enjoy: http://www.slideshare.net/utbkevin/why-mobile-first-isnt-enough-developing-a-better-user-experience
  • mattymatty
    Member
    @luke I enjoyed that slideshow and am reading some of the other resources he points out. But I don't see solutions to the current problem. I do see opportunities to do this better if I go back to the drawing board. I'll certainly do that on a future project, but for this project, I really just want to plug in a shopping cart that works for both desktop and mobile experiences.

    @babblebib You've described the obstacle I'm up against very well. Theoretically, the css media queries could "work" or at least help, but the reality of the different experience for mobile vs desktop vs tablet requires that I deliver an experience that's more real than the theoretical experience I designed in my head while reading about the media queries.

    For example, I can use the css media queries to determine the size of the device, but I can't use them to determine whether or not shopping cart is loaded in a colorbox iframe or in an independent page. For smaller devices, I'm delivering a different layout, different size images, (i.e. different html). Re this colorbox in particular, it doesn't work well on the mobile devices (scrolling especially), so it needs to be avoided on the mobile browsers. If the cart is in an independent page due to being rendered on a mobile device (in my determination of "mobile" rather than a simple determination based on screen size), then I need to provide a "continue shopping" button that executes "history.go(-2)" when the user want to continue shopping. If the cart is in an iframe, then executing the history.go(-2) statement is obviously bad.

    In addition, I don't see how I can override the placement and style of many of the cart's elements using css since many of those elements have inline css implemented via style attributes. I don't think I can override these attributes with an external style sheet.

    It's possible that I can do this with a lot of javascript hacking, however I really don't want to approach the problem with that MO.

    The only 3 solutions I see are to 1. use 2 different foxycart accounts, and 2. skip the colorbox for both desktop and mobile, and 3. use json to retrieve data and display it in my own shopping cart.

    Of course, solving the problem for the shopping cart page doesn't actually handle the problem for the checkout and receipt pages. I expect to find additional challenges with those pages right around the next corner...

    Any other ideas? Am I missing a grand opportunity with media queries and responsive design? How are other folks implementing foxycart on mobile? Are other customers using 2 different accounts in order to provide 2 different experiences?

    -Matt
  • I think that @matty makes a really good point and I'd just like to follow up with another example.....

    On mobile sites it is common practice to include your 'top navigation' at the footer as a vertically arranged list of links. However on desktop sites, these are typically along the top navigation. I cannto see how CSS along could do this? ... having said that, I accept that I coudl be wrong as I am certainly no CSS guru!

    Also, on desktop sites you are able to use fly-out menus which are not possible on mobile sites because the concept of 'hover over' does not exist on a touch device. This affects the overall IA of your sites and means that you will generally need different sets of HTML for each.
  • brettbrett
    FoxyCart Team
    The points you (@babblebib and @matty) bring up are the heart of the debate that's been raging for a while, and I think they're valid points (though Kevin may chime in to address some of them). That said, as far as just making something happen with an existing site like @matty seems to be dealing with, I'd probably go for a combination of both CSS media queries and some quick jQuery. For example, if you want to move the navigation to the footer, I'd do that with a quick bit of jQuery, but I'd style it with CSS. Similarly, for whether or not to use the Colorbox I'd use CSS on the cart to show/hide the "continue shopping" link, but I'd use jQuery to determine whether or not to associate the add-to-cart links or forms with Colorbox in the first place.

    For working around hover states, you could handle that with an "active" class on the li elements of your nav, which is pretty common. CSS to make li.active>ul visible instead of using the hover state. Again, just a thought.

    I'm not saying that's necessarily the best way to do it. That's just what I'd do _right now_ :) Maybe not next month or next year, but if I was midway through a project and needed it done, that's what I'd do.

    For the future, Luke's already mentioned the new responsive stuff we're doing, but we're also moving towards "template sets", which would allow multiple template sets per store. That's a bit down the road, but it is on the roadmap.
    In addition, I don't see how I can override the placement and style of many of the cart's elements using css since many of those elements have inline css implemented via style attributes. I don't think I can override these attributes with an external style sheet.
    An "!important" should work to override in those situations.
  • foxykevinfoxykevin
    MemberFoxyCart Team
    Since my ears are burning in this discussion I figured I'd jump in. The beauty of the new responsive cart is that the functionality adapts to the context of the user, plus it's not using an iFrame at all, so you've got a bit more freedom with your modifications. Based on what you've described as far as having separate "mobile" and "desktop" sites I think the new cart will meet your needs really really well.
    On mobile sites it is common practice to include your 'top navigation' at the footer as a vertically arranged list of links. However on desktop sites, these are typically along the top navigation. I cannto see how CSS along could do this?

    I see two ways to go about this. Either hide a copy of your nav for "mobile" devices at the bottom of your page and set it to display block while hiding your top nav, or set position:relative; on your site's outer wrapper, and position:absolute; your nav when your media query kicks in, but then you have to add a bunch of padding/margin at the bottom of the site's outer wrapper to "make room" for shifting the nav to the bottom (so the second way may or may not be worth it).

    I agree there are going to be scenarios where you have to branch your site for a mobile specific implementation and a desktop specific implementation, but in my experience thus far these cases seem to be the exception rather than the rule.

    Regarding this whole discussion and some larger ramifications, Stephanie Rieger has an awesome article on A List Apart that just came out. She's incredible and along with her husband, Bryan, they've done a LOT of work in this area. http://www.alistapart.com/articles/the-best-browser-is-the-one-you-have-with-you/

    Media Queries are not a silver bullet, and will often need to be paired with some JavaScript and potentially server-side logic (UA Detection), but you can accomplish a lot with media queries alone. It helps to have some killer CSS chops, and following the previously mentioned http://css-tricks.com will go a long way to helping you with that.

    Let me know if you've got further questions for what you can do with the existing implementation. I haven't given it a lot of thought since I've been focused on the new version, but I'll chime back in if I think of something.
    An "!important" should work to override in those situations.
    Yes it does.
  • Thanks for the responses guys ... one last query before I just wait and see! :)

    How about scenarios where my content is different between the two sites. For example, I sell in the UK and in Ireland. In the UK, I offer free shipping but not in Ireland. I have two separate sites for each geography, but I want to use the same Foxycart store.

    How do I address this scenario because the actual URLs are different on the two sites (one is mydomainname.co.uk and one is mydomainname.ie).

    So even if the content and design on the two sites were the same (which they are not), my cart would still not work with a single template.

    For my business, this scenario also applies to mobile, because the mobile site is a completely different site with a different IA and different content.

    As far as I can see, the only scenario is a separate FoxyCart store for each site, which is probably prohibitively expensive! :)
  • lukeluke
    FoxyCart Team
    Currently, you will have to have two separate FoxyCart stores unless you wanted to get really creative with the CSS and JavaScript and kept your products in separate categories (which would handle the no shipping vs. shipping problem). That being said, our future plans include template sets which you can add to your store. They will also have an additional charge, but it will be less (and less hassle) than two stores.
  • Hi all,

    I'd welcome an update on the topic discussed here.

    I'm agreeing in principle with what @luke recommended by way of
    http://www.slideshare.net/utbkevin/why-mobile-first-isnt-enough-developing-a-better-user-experience

    And there's much common sense in
    http://www.alistapart.com/articles/the-best-browser-is-the-one-you-have-with-you/

    @brett gives a suggestion for "right now" and that was made back in March. How would it be different "now" in October?

    And @foxykevin makes mention of the responsive cart, which is cool. But I understand that's not coming, and so Twig templating would be the recommended course. Yes?
  • fc_adamfc_adam
    FoxyCart Team
    How would it be different "now" in October?

    Unfortunately you're still restricted to a single template set per store - so you'd still need to tackle this the same way that's been discussed so far in this thread.

    And foxykevin makes mention of the responsive cart, which is cool. But I understand that's not coming, and so Twig templating would be the recommended course. Yes?

    The responsive cart/checkout is still being developed and will indeed be added to a future version of FoxyCart - I'm not sure what gave you the impression that wasn't the case, but it is indeed still coming.

    The twig template functionality could definitely assist you with setting up templates that work well for both mobile and traditional - but you're still restricted to that single template.
  • brettbrett
    FoxyCart Team
    Unfortunately you're still restricted to a single template set per store - so you'd still need to tackle this the same way that's been discussed so far in this thread.
    Well… you could conceivably detect mobile on your end, pass in a value as a session variable, then serve up entirely separate templates via Twig. So that's a new option.

    Even though "you're still restricted to that single template", you could basically do two entirely separate templates and stick them in an if/else block in Twig (based on a session variable or whatever).

    I haven't actually done this yet as a proof of concept, but it should be totally doable.

    And like @fc_adam said, the responsive template is _definitely_ coming. Just needs to be prettied up a bit. (It's got a new cart display too, JSONP based instead of iframe based, which actually makes it even faster than the normal cart.)
  • As a side note to this and 'jumping on the responsive band wagon' I have recently seen a number of articles regarding 'Responsive email design'. There is a good starting article here linked to again from the brilliant css-tricks.com http://css-tricks.com/responsive-email-design/.

    I believe you could possibly start implementing some of these features now for the email receipts with the current email 'single template' functionality.

    I understand that the support of CSS3 is quite good in mobiles browsers and email clients, not bad for desktop browsers and awful for desktop email clients (Outlook still uses MS Word to render HTML eurgh!) So you basically code up an full sized email for desktop browsers / clients (Outlook etc) then drop in some media queries for the mobile devices that *should* support them and then do the standard responsive hiding / restructuring / re-sizing.

    Might be of interest...

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

Tagged