smartphone use

cowtancowtan Member
in Help edited January 2013
Hi - I'm in the process of putting together a smartphone version of a site for a client at the moment. They already use foxycart on the site. The smartphone version will be a cut-down version of the exisiting 'desktop' site using different pages designed specifically for smartphones. I'm expecting there will be a few challenges in getting the existing foxycart account to work elegantly on smartphones and I've found a few forum posts discussing the types of things others have encountered trying to do similar things but I haven't found anything in the wiki about it yet.

At the moment, my thoughts on how to make this work are to forget about trying to use the cart in the colorbox window but just go through to it as another page and then see if there's some way I can turn the checkout page into a single column by over-riding the CSS using some responsive CSS techniques so that it only appears like this on smartphone size browsers.

Currently the site uses version 0.7.0 of foxycart which may not be the best place to start but I've shied away from upgrading because there is quite a bit of both CSS and JS customisation already that I'm worried about having to re-think or re-do.

If anyone has any experience or thoughts on this I'd be *very* happy to hear them before I start.

cheers,
Gordon
Comments
  • Me too!
  • fc_adamfc_adam FoxyCart Team
    edited January 2013
    @cowtan,

    Currently, this is the approach I would suggest:

    On your own site, have a library that detects the users device they are visiting the site from, and add that into the site's markup - possibly as a class on the body.

    Using javascript, on page load grab the device type from that class and add it to the customers json session as a hidden attribute.

    After your store's FoxyCart includes, overwrite the existing process function (which loads the colorbox window) by copying it and putting an additional condition in there that checks the device the user is using. If they're using a PC, then load up the modal as it already does, but if they're on a mobile or tablet device, then load in a custom cart setup. That could be by simply redirecting to the cart template so it displays full screen, or utilising the JSON cart object to build out your own cart display. You could also completely remove the colorbox setup and instead roll your own JSON cart object for all devices, and just adjust depending on the users device.

    Finally, on the checkout, you can use media queries in your CSS to change the way the checkout is displayed depending on the users screen size. If you upgrade to 1.0, you could also utilise the Twig templating feature and based on that hidden attribute that describes the device being used completely change the way that the checkout markup is built.

    I hope that helps give you some ideas on what you could do.
  • Thanks Adam. The second part (using media queries) was roughly what I was planning to use there. I'll probably need to do a bit more digging to understand a bit more about how to do the first part but it sounds very much along the lines I was hoping to do. One advantage I have is that I'm serving different pages to smartphone users than desktop or tablet users rather than being pure 'reponsive' design.
  • @fc_adam

    This basically looks fine and I understand in principle what needs to happen but I'm not sure how to go about overwriting the existing process function. I *think* the process function is this one -
    fcc.events.cart.process.add(function(e){
    	var href = '';
    	if (e.tagName == 'A') {
    		href = e.href;
    	} else if (e.tagName == 'FORM') {
    		href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
    	}
    	if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
    		return true;
    	} else {
    		jQuery.colorbox({
    			href: href,
    			iframe: true,
    			width: colorbox_width,
    			height: colorbox_height,
    			onClosed: function(){fcc.events.cart.postprocess.execute(e);}
    		});
    		return false;
    	}
    });
    

    which looks like it's what gets called when a user adds an item to their shopping cart. I also think that it's probably the last chunk where the colorbox is being defined that I need to be thinking about.

    Any clues on how I go about doing this would be gratefully received. Also if I'm on completely the wrong trail please tell me!
  • fc_adamfc_adam FoxyCart Team
    @cowtan,

    This should give you an idea of how you'd go about it: http://pastie.org/private/zbzh25so75sgzjcf4f6qig

    That script isn't complete - you'd need to add in some sort of device checking set up to set that device_type variable up the top of the script, and then expand on the 'if device_type == "mobile"' conditional to do whatever you want it to do. By simply returning true as it does now, that would redirect the customer to the full cart page, which might be desirable for mobile users.
  • @fc_adam

    Thanks for that Adam. Just what I was after.
  • cowtancowtan Member
    edited February 2013
    @fc_adam

    Hi Adam - I've used that piece of code and it works fine. However, I also noticed that because I'm not using pages that are shared between different devices but using pages that are specific to smartphones, I could just miss out including the foxycart javascript altogether so that the links are just standard html links through to the foxycart shopping cart.

    Is there any reason why I shouldn't use this method instead of javascript? I've nothing against using javascript, just prefer to keep things simple.

    The only glitch I've found, and this applies both to the javascript and non-javascript methods, is that if you add something to the cart and then go back to the main site and forward again to the shopping cart (using the back and forward buttons on the browser) the item will be added again. I don't think this is a big problem and I can't see a way round it at the moment.
  • fc_adamfc_adam FoxyCart Team
    @cowtan,

    You don't need to use that script - on your mobile site you could simply not use colorbox at all. It depends on how you manage the two sites - if it's two separate code-bases, then that might be the simpler approach. If it's one code-base, using that javascript will allow you to manage both approaches from one script.

    The only glitch I've found, and this applies both to the javascript and non-javascript methods, is that if you add something to the cart and then go back to the main site and forward again to the shopping cart (using the back and forward buttons on the browser) the item will be added again. I don't think this is a big problem and I can't see a way round it at the moment.

    That's not actually a glitch. When you open the cart in a new tab, that is opening the cart with the add to cart information as the URL. So if you go back to that URL again, it's going to add that product again as that's what the URL is telling FoxyCart to do.
  • @fc_adam

    As ever, thanks for the advice. I've now stripped the script out because it is two separate code-bases.

    I take your point about whether adding the item again is a glitch. I know that in a technical sense it's doing exactly what it should, I'm just not sure that from a user's point of view it's desirable behaviour. Having said that, it's not something I'm going to lose any sleep over.

    cheers,
    Gordon
  • fc_adamfc_adam FoxyCart Team
    I take your point about whether adding the item again is a glitch. I know that in a technical sense it's doing exactly what it should, I'm just not sure that from a user's point of view it's desirable behaviour.

    We definitely hear you there. I'm not saying that it's the way it should be - just that what it's doing is technically the expected behaviour.

    We'll look into that from our side and see if it's something we could address somehow. They key will be reliably telling that someone has returned to the add to cart from a back/forward action as opposed to clicking the same add to cart link a second time.
  • Yeah, I'm not sure what the right solution - whether it's possible to do some form of redirection after the item has been added to the cart so that the url for adding the item is never a displayed page in the browser history or something similar.

    If it's of any use to anyone else, I've now written this project up as a blog post - http://www.gordoncowtan.co.uk/a-mobile-site-with-cms-made-simple-and-foxycart/ - which includes a link through to the CSS I ended up with for the checkout and receipt pages.
Sign In or Register to comment.