FoxyCart Forum
›

The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Tutorial Request: JSON minicart

M2_in_SJM2_in_SJ Member
in Bugs & Feature Requests edited April 2009
On the front page of FoxyCart is that ever-so-cool script that shows/hides a JSON minicart when you mouseover the top right corner of the page. The script even has some teaser text saying that this is something you can do with the JSON cart.

Any chance of getting a tutorial on how to build that cart? I tried picking apart the .js on the page but couldn't get it to work.

Thanks,
Matt
Comments
  • justinlancasterjustinlancaster Member
    I'd love to know how this is done too.
  • brettbrett FoxyCart Team
    Sounds great. Let's make it happen.

    Either of you want to design it how you'd like it to look? That way we could use some real life examples for the tutorial. Go ahead and link to a mockup or a Photoshop file (or preferably a mockup with a zip of the slices necessary to build the HTML to create the cart) and we can create a tutorial on the wiki as we discuss it on the forum.

    Yes? It's definitely time we did something like this.
  • M2_in_SJM2_in_SJ Member
    edited April 2009
    sure, I'll give it a whirl.

    Here's a little monochrome number I whipped up. The zip file has a flat mockup and the slices necessary to recreate it with CSS.

    json_cart_tutorial.zip
  • M2_in_SJM2_in_SJ Member
    just bumping this thread. Any chance of getting a tutorial on this?

    Thanks.
  • brettbrett FoxyCart Team
    Oh, sorry, I hadn't seen your attachment. I'll take a look at this in the next few days. Thanks for bumping!
  • brettbrett FoxyCart Team
    Hi M2_in_SJ.
    Can you perhaps tweak that mockup so it includes what a product _in_ the cart would actually look like?

    Also, fwiw, it might be a little easier to go less image-heavy on the design, particularly with the "action" buttons. It's obviously possible to use an image as a link, but it might be more reusable code if we just rely on CSS and not images for stuff like that (at least for this example).
  • rthrashrthrash Member
    Hi Brett, basically duplicating your front page as a demo would be a fine tutorial. The CSS will likely need to be customized on a per-store basis anyway. It would be cool to show an order comment in the mini-cart too. For me, we'd like to use this for a Unified Order Form internal order system.
  • jpmssijpmssi Member
    Did this ever get turned into a tutorial?
  • brettbrett FoxyCart Team
    Not really, no. (Well, we have a tutorial to replicate what's on the homepage of www.foxycart.com, but it's for an old version, and it's not really what it should be.)

    We've tried to get good examples from our users to turn into tutorials, but they generally turn into more specific approaches that don't generalize well.

    What I'd really like to get a tutorial for would be a "fly to cart" JSONP approach. If you have mockups of what you'd like to do we'd be happy to take a look. If it'd make for a good "generic" type of tutorial we'd be happy to walk through it and turn it into a tutorial. And we're always happy to help regardless. But we'd love to get a tutorial going.
  • jackaubreyjackaubrey Member
    FWIW, I'd love to see a basic tutorial put together too. I'm relatively new to foxycart, but that nifty minicart on the homepage was a nice selling point for me!

    -JA
  • jackaubreyjackaubrey Member
    edited January 2011
    I was just reading over this thread again, and was wondering if you were still looking to create a tutorial, possibly with a user-supplied mockup to kickstart it?

    I'd love to implement a very basic minicart to put on my wordpress site and would be happy to provide some mockups of this. I'm not a great coder so I wouldn't be able to do the heavy lifting on that front, but at the very least I was wondering if we could try and push this forward a bit. And I'm always helpful for tutorials, since if I can be made to understand it, then just about anyone can!

    Just say the word and I can try to put a simple mockup together...

    -JA
  • brettbrett FoxyCart Team
    If you have a mockup to kickstart it it'd be _great_! We do have Adam tasked with doing a tutorial but a mockup would definitely be nice.
  • jackaubreyjackaubrey Member
    Hi Brett -

    Sounds good. I'm assuming it's okay if I just do it in photoshop and send it to you (or Adam) that way?

    -JA
  • brettbrett FoxyCart Team
    Probably best if you post them somewhere public just in case anybody else wants to help or follow along. Or if not the source at least a comp. But yeah, that'd be fantastic.
  • jackaubreyjackaubrey Member
    edited January 2011
    Okay -

    Well I was monkeying around with this last night and came up with the following:

    minicart-mockup.jpg

    This is very basic though and really not much different than what the old version looks like on the FC homepage. Ideally you'd want it to be very customizable of course so that the font fits with your site, etc. Essentially it would just be nice to be able to have a simple minicart for me to drop on a widget on my own site (which is built on wordpress), so I'm not sure how transferable this would be to others.

    Not sure if this is what you had in mind for a mockup - I'd certainly be happy to take another crack at it.

    -JA
Sign In or Register to comment.