Now THIS is a shopping cart
February 25, 2005 1:56 PM   Subscribe

Now THIS is an eCommerce shopping cart. Holy crap. Ruby and Ruby on Rails: You officially have my attention. (Documentation includes a free first edition book. Intro for OS X friends fiends) and all.
posted by spock (63 comments total)
Ruby on Rails is for programmers, not end users. Am I missing something, or is this just an amazing user interface that could be created with any amount of crappy code?
posted by null terminated at 2:03 PM on February 25, 2005

Beautiful site design, at least as far as the shopping cart I'm getting ideas...and I don't mean copyright it then sue, you bastards.
posted by mystyk at 2:03 PM on February 25, 2005

Stinkymcstinkville in Firefox
posted by zeoslap at 2:04 PM on February 25, 2005

I suspect Google is behind this.
posted by DrJohnEvans at 2:06 PM on February 25, 2005

No problems in Mozilla. Or my Firefox, for that matter.
posted by DrJohnEvans at 2:08 PM on February 25, 2005

Fine in my FireFox. And very elegant in my opinion.
posted by me3dia at 2:11 PM on February 25, 2005

If by Stinkymcstinkville, you mean totally and completely awesome, then yes, I wholeheartedly agree.
posted by recursive at 2:12 PM on February 25, 2005

I'm sure it requires JavaScript be ON for functionality.
posted by spock at 2:13 PM on February 25, 2005

Didja see what happens after you drag something you had in the cart back out again. Didja? Didja, huh?
posted by spock at 2:14 PM on February 25, 2005

I wonder if the inventory explodes in real life, too.
posted by DrJohnEvans at 2:18 PM on February 25, 2005

I wonder if the inventory explodes in real life, too.

If the shirts really did that I'd buy one of each.
posted by Captain Ligntning at 2:20 PM on February 25, 2005

I wouldn't buy 'em. I'd just remove them from my shopping cart, one by one, and watch the warehouse burn down.
posted by DrJohnEvans at 2:21 PM on February 25, 2005

Looks nice, even if drag doesn't work right in FX.

OK, great, so it looks nice. How much of that is Rails stuff that any app would get, and how much is custom coding I'd have to do no matter what tools I was using?
posted by Captain Ligntning at 2:21 PM on February 25, 2005

I'm sure it requires JavaScript be ON for functionality.

If you don't like JS, then move to Russia. Hippy scum.
posted by Captain Ligntning at 2:23 PM on February 25, 2005

The drag-n-drop functionality is JavaScript written just for that site - it has nothing to do with Rails (which is a server-side technology) and could be used on top of any server-side platform. That's not to put down Rails, which really does live up to all the hype - but don't expect Rails to do anything impressive on the client-side for you. That's not what it's for.
posted by simonw at 2:23 PM on February 25, 2005

Lightning: Judging from the comments, roughly 40:60
posted by mystyk at 2:24 PM on February 25, 2005

I'm really glad you guys like the cart!

Yes, it does requires Javascript. Fortunately we've yet to receive the fateful "I do not use the Java scriptings so I cannot buy the stuff" e-mail -- I think it's a good sign that expecting Javascript is a sure thing these days, except perhaps all the beautiful Lynx users. Oh, how I dread that email, though.

And it should work just fine in Firefox...?

(I'm not sure about how Ruby or Rails relates here, though... but I admit not knowing much about either. Looks like I've got some reading to do. :))
posted by cabel at 2:27 PM on February 25, 2005

Yeah, I don't quite get the post either...

Ruby, and its web framework Rails, is a pretty interesting, if not quite ready for primetime, 5th generation toolchain.

This site, is a pretty interesting, if kinda uninspired, use of the AJAX and DHTML techniques everyone's been squeaking about lately.

So I guess, 1) I don't see how they are really connected and 2) Do we want to advertise every random T-shirt place that comes up with a new ajax technique?
posted by PissOnYourParade at 2:27 PM on February 25, 2005

Spock: Was the Ruby on Rails framework used to implement the shopping cart functionality? (Sorry if I need to RTFA a bit more closely)
posted by gigglesticks at 2:27 PM on February 25, 2005

Sweet! Now I have something for show & tell in my UI class.
posted by malaprohibita at 2:29 PM on February 25, 2005

I just messaged Steven Frank and Panic's cart isn't done using Ruby. It does kick ass, but does so using JavaScript (which is the part I think we all find cool) and PHP on the backend.

Spock, out of curiosity why did you assume that this was Ruby on Rails?
posted by jperkins at 2:39 PM on February 25, 2005

I'm afraid my slip is showing. I made a leap in logic when I read a comment mentioning "via the Ruby on Rails mailing list". Unfortunately, now that I have tracked down the original mailing list post, it appears it may have nothing to do with Ruby on Rails. Also the domain appears to be running Apache/2.0.53 (Unix) PHP/5.0.3 mod_ssl/2.0.53 OpenSSL/0.9.7b on an OS X server. (No mention of mod_ruby, which would be required for a Rails on Ruby app).

I think I made the leap in logic because I had just read (on Zeldman) that Basecamp had made his company 413% more productive. Looking into Basecamp, I noticed that it was written with Ruby On Rails as are 43 Things, Ta-da List, Hieraki, S5 Presents, Snowdevil.

I'm still stoked about learning more about Ruby and Ruby on Rails for app development, but it tells me little about the excellent shopping cart app at Panic.

CBS Spock regrets the error.
posted by spock at 2:40 PM on February 25, 2005

gigglesticks: No, no "Ruby on Rails" was used in the making of the front-end -- just a few months of my time and a lot of good ol' fashioned Javascripting. :)

There's also a PHP / MySQL backend used for the order processing, inventory management, invoice printing, etc. The PHP in turn interfaces, via a chunk of XML, with the ever-cool Endicia Mac app, to print live postage on the way out the door. Phew.

[On Preview -- what everyone else said. :)]
posted by cabel at 2:43 PM on February 25, 2005

cabel: Really nice work (as always with all things panic.) Your attention to detail is insane.
posted by gwint at 2:46 PM on February 25, 2005

If I'd paid attention to the previous posts, I'd have seen that cabel already replied. Sorry.
posted by jperkins at 2:47 PM on February 25, 2005

Also, I meant to include a link to this O'Reilly ONLAMP article: Rolling with Ruby on Rails

Maybe you've heard about Ruby on Rails, the super productive new way to develop web applications, and you'd like to give it a try, but you don't know anything about Ruby or Rails. . ."
posted by spock at 2:48 PM on February 25, 2005

Cabel: that app is worthy of a write-up for the Extras section of the site. And by the way, I do love the Panic website. Any chance you guys will be posting new office pics with the new employees and all?
posted by jperkins at 2:50 PM on February 25, 2005

cabel: Awesome work. Small world.

Can you indicate to us (at least give us a hint) as to what is patentable or protected here? I've been learning CSS, etc. mostly through the deconstruction of sites that I admire, but certainly do not want to rip anyone off (intentionally or otherwise).
posted by spock at 2:52 PM on February 25, 2005

Cabel: Thanks for the explanation. Truly great work!
posted by gigglesticks at 2:55 PM on February 25, 2005

There's a really amazing javascript/dhtml api that makes this pretty easy to implement on some level.
posted by miniape at 3:00 PM on February 25, 2005

Why do stores assume I don't care about shipping costs until check-out, after I've filled out my entire address? Especially when they're often exorbitant ($5/shirt), on top of quite high prices in the first place.
posted by smackfu at 3:01 PM on February 25, 2005

(disclaimer: I do UI for a living, and I'm a buttinsky, but I wouldn't bother to offer this advice if you hadn't made such a strong showing so far)

This is a really great start. A few comments for you to consider or discard as you see fit:

1. Consider adding some kind of zoom on the shirts in the shopping cart.

After dragging and dropping two dark shirts, I couldn't tell which one was which without stopping and squinting, and to be sure I pulled them both out and re-dragged them. No fun.

2. Consider that the "Drag any item" with arrow instruction really belongs ABOVE the cart (or top-aligned), rather than inside it. Also consider putting a faint shirt outline in the empty shopping cart, with the aforementioned arrow pointing directly at it.

This syncs the implied instruction (drag item past arrow) with the explicit instruction (drag item here); currently "here" is on the arrow itself. It also gives an explicit destination to the first drag 'n dropped shirt (versus white space or the instruction/arrow itself, as currently implied).

3. Last but not least: I'm only 34, and using a high-quality LCD laptop, but I found the quantity/size symbols in the cart to be too small and lacking in contrast. Going up a point size or two and/or going darker on the font color would make a world of difference.

Just my two cents (which usually costs significantly more than free).

[on preview, edited comments down to the best bang for buck improvements, and smackfu, you're totally right about the shipping cost -- live updating of the shipping cost would would be an unusual and fantastic use of "Ajax"-style programming]
posted by davejay at 3:09 PM on February 25, 2005

spock: That's a really good question. So the somewhat-amusing "patent pending" line came about like this.

It got built. Then we realized we hadn't seen anything quite like it on the web (even after much searching) -- sure, "drag and drop" isn't new, and shopping online isn't either, but the whole package, a drag and drop dock-like cart with badged icons representing the cart items that you can drag out to dynamically remove without requiring page loads etc. etc. is, as far as we know and hope, unique.

Everybody on earth who saw it early said "You should patent that before someone big steals it." I said "Yeah, but I'm not so sure about software patents..." Actual laywer guy says -- and I'm paraphrasing here -- "What people forget is that, just because you get a patent on something, doesn't mean you have to be a dick about it." In other words: it's worth a shot, you don't automatically have to do anything even if you get a patent (unless it really makes sense), and it's a good thing to have in your back pocket, just in case someone "big" likes it.

Long story. Short answer: worry not, this is all a bit of an experiment for us, and it's the whole package that's under consideration.

(I also really tried to comment the code as best I could so that it could be helpful to others. I hope it proves helpful to you in some way! Although I apologize in advance for any code weirdness, of which there is probably much...)

Thanks again for checking it out and for the kind words..
posted by cabel at 3:12 PM on February 25, 2005

smackfu / davejay: Indeed, if you hit "Checkout", and only type in your zip code and tab out of the zip code field, you'll see that we do, in fact, update your shipping cost live and on the fly.

Switch your country to Japan, and boom!, the shipping cost will change as well, without requiring a page refresh!

We don't do this earlier because we have no idea how much it'll cost to ship to you without knowing where you are. Once we have your zip or country, we can act on that. (Shipping cost is based on weight, too, not the number of items.)

davejay: Thanks for the really great feedback, duly noted for the next rev... I also agree that those badges are ridiculously small.

I've blabbed on enough. Thanks again.
posted by cabel at 3:16 PM on February 25, 2005

I've been deep in Rails development for a few months now.

It is un-fucking-believable. I've been a consultant in Java land developing web applications for four years, and the productivity increase you see with Rails can't be explained.

When you do try to explain it, nobody believes you. If you're a PHP developer, consider this your notice: migrate to Rails now. If you're a Java/.NET developer writing web apps that only talk to a database, you're on notice too.

Now if you're a Java/.NET developer working on a fairly large enterprise application that interfaces with multiple legacy systems, you can sit tight. Rails can't help you... yet. Rails isn't really holding you up. Until Ruby provides you the connectors you need, you're SOL.

In case you can't tell, I'm a Rails fan. The expressiveness of Ruby makes development a dream.
posted by AaRdVarK at 3:21 PM on February 25, 2005

Ruby on What now? At least according to the header, this is a php site, not Ruby:

# curl -I
HTTP/1.1 200 OK
Date: Fri, 25 Feb 2005 23:21:28 GMT
Server: Apache/2.0.53 (Unix) PHP/5.0.3 mod_ssl/2.0.53 OpenSSL/0.9.7b
X-Powered-By: PHP/5.0.3
Content-Type: text/html; charset=ISO-8859-1

Even that being said, the coolness here is in the "Ajax" bit, which is the hip new term for the xmlhttprequest thingey that's been around and ignored unfairly forever and a day now.

It is very cool though, no doubt. Me green with envy.
posted by Loctor at 3:28 PM on February 25, 2005

D^mn. That's tight.
posted by Yossarian at 3:29 PM on February 25, 2005

Very nice. Worked fine in Firefox for me. Dedicated online shopper here, this is good.
posted by fixedgear at 3:39 PM on February 25, 2005

just my 0.02$ but all that would be so easy in flash.
great work nonetheless.
posted by zenzizi at 3:48 PM on February 25, 2005

[eliteist XHTML fanboy]Dude, it doesn't even have a DocType definition.. pssshhh...[/elite]
posted by afx114 at 3:59 PM on February 25, 2005

Didn't work for me in Firefox. Javascript is enabled. I have my doubts about a business model which doesn't allow customers to actually purchase anything.
posted by salmacis at 4:10 PM on February 25, 2005

Weird. It works when I open the link in a new tab, but not if I open it in a new window.
posted by salmacis at 4:11 PM on February 25, 2005

cabel, it looks like you have to type your whole address in to get the shipping calculated. That may not be the case, but that doesn't matter.

Of course this ties into my other pet peeve: obsessing over charging shipping costs to the penny when you're making $12 profit per shirt. All this fanciness so you can charge $2 extra on a 4-shirt $80 order. People like reasonable flat rates, love included shipping even if they have to pay extra, and don't care at all about international shipping unless they are located outside the US.
posted by smackfu at 4:16 PM on February 25, 2005

cabal writes: I've blabbed on enough. Thanks again.

Hey, I admire modesty as much as the next guy, but you can "blab" as much as you want on this topic. I'm all ears (and I gather I'm not the only one).

For those still confused, I have inadvertantly made a post with TWO topics here:
a) cabal's most excellent shopping cart
b) Ruby on Rails (unrelated to "a", but a cool topic in and of itself). The O'Reilly article I linked to in an earlier comment seems a good place to start on that topic. Good explanation of what makes it faster for the developer.

I'm interested in anything anyone has to say on either topic!
posted by spock at 4:24 PM on February 25, 2005

salmacis: It definitely works for me in Firefox, new window or tab. Feel free to send me e-mail with more details and I'd be happy to investigate in detail.

smackfu: Nah, just the zip code is necessary. Try typing it in and then tabbing out of that field.

As for shipping in general, I definitely see your point. For the record, we charge precicely what the USPS charges us, plus $2 for all the little extra stupid costs. Actually, if you order around 5 shirts or less, you ARE charged a flat rate (based on weight), that's just how Priority Mail works. Anyway, we'll definitely consider other options in the future, since it would almost certainly be better to abolish annoying shipping charges -- but we're not quite big enough to offer optional flat-rate "Panic Prime" shipping a la Amazon yet. :)
posted by cabel at 4:28 PM on February 25, 2005

adding my voice to the "incredible work, cabel" train.
posted by shmegegge at 4:46 PM on February 25, 2005

I just realized that I've been calling cabel "cabal". More apologies.<sheesh!>
posted by spock at 5:29 PM on February 25, 2005

For OS X Panther users looking for superb instructions on setting up your machine for development (including upgrading Ruby from the Panther-included 1.6 to 1.8.2, and Rails) see:

Only thing I would add is that if you are getting errors following his command line instructions try them with a sudo first.
Example: he says to
curl -O
and you get errors then
sudo curl -O
(enter admin password when asked)

You will be prompted for your admin password the first time and then have sudo privileges for 5 minutes (before it will ask for the admin password again).
posted by spock at 7:13 PM on February 25, 2005

three cheers for cabel. Not only for the awesome shopping cart, but also for being so *cool* about people looking at how it is done and adapting for their use. I know that this it old hat 'round the internets, I just really like seeing it in action.

posted by jmgorman at 8:58 PM on February 25, 2005

For those brand new to programming, check out and see how simple Ruby is!
posted by spock at 10:39 PM on February 25, 2005

Ruby is kind of cool, but I like Lua better.
posted by flabdablet at 3:36 AM on February 26, 2005

Just another article on some (rather random) thoughts about the buzz surrounding the soaring popularity of Ruby on Rails, from programmers of Java, Python, and PHP perspectives.

It seems to me that Ruby would be just another language for people to get into religious wars about, but that now Ruby on Rails is it's killer app and can't be duplicated by the other languages. So if you want to use the killer app, you gotta use the language.

After reading about it, I've decided that my two topics (the Panic shopping cart and Ruby on Rails) could be related with Ruby on Rails duplicating the functionality that cabel currently has PHP doing.
posted by spock at 7:25 AM on February 26, 2005

As a marketing guy who outsources all his "Hello World" tasks, I gotta say that this code is elegant. Nifty. Even fricken cool. Nice job, cabel.
posted by Tacodog at 7:58 AM on February 26, 2005

Can't be duplicated by other languages? Sorry, did something happen to "Turing Complete" overnight?
posted by five fresh fish at 10:44 AM on February 26, 2005

fff: I was wondering that too.

Also, are we really putting code in the html templates again? Didn't PHP already teach us that was a bad idea?
posted by rusty at 10:50 AM on February 26, 2005

In saying "can't be duplicated by other languages" I was referring to -not the functionality- but the time savings. It just takes less configuration and actual coding to use Ruby on Rails, according to those who have made the switch.

I'll let those who are more experienced talk about the "code in html templates" issue. From what I've read, Ruby on Rails does an excellent job of splitting up the Model/View/Controller code. See: MVC: The Most Vexing Conundrum
posted by spock at 11:07 AM on February 26, 2005

"Patent Pending" ... does that mean that you're going to try to patent dragging and dropping?
posted by SpecialK at 12:02 PM on February 26, 2005

cabel: How am I supposed to email you when you don't include an email address in your profile?
posted by salmacis at 4:28 PM on February 26, 2005

What about Twisted.Python? Everything I've read about it suggests that it's complicated to get into but is basically totally amazing once you've got the initial time investment in.
posted by kenko at 4:49 PM on February 26, 2005

(No mention of mod_ruby, which would be required for a Rails on Ruby app

Nonesense. You can run a Rails site using CGI, fastcgi, WEBrick, as well as mod_ruby.
posted by Ayn Marx at 10:09 AM on February 27, 2005

salmacis: Sorry -- it's just cabel at panic dot com. I'll add it to my profile!

SpecialK:: I posted a bit above about patent thing. Short answer to your question: no. :)
posted by cabel at 1:19 AM on February 28, 2005

Sure, slick user interfaces are neat-o gang, but when I was writing them (within the last 2 years) each browser still had their own interpretation of the javascript spec which kept you from running the same code in all browsers with no changes.

As for xmlhttprequest it sounds cool, but I'm too lazy to get all into it since the frontend isn't my specialty. How does it work, do you have to write a custom message/parser or does it use a standard (like SOAP)?
posted by kookywon at 7:46 AM on February 28, 2005

rusty: "Also, are we really putting code in the html templates again? Didn't PHP already teach us that was a bad idea?"

Nope? PHP reiterated that mixing presentational logic with your business logic is a bad idea, not that having logic in your templates is bad -- indeed, Smarty includes conditionals, loops, function calls etc as part of its metalanguage, and you're expected to use them.

Significant logic, of course, doesn't belong in there either. I don't think it's a deficiency of ERb if it doesn't explicitly stop you from doing so; Rails at least strongly encourages you to put it elsewhere (helper methods and such). The important thing is to keep each of M, V and C nicely decoupled, not to keep one of them arbitrarily retarded :)
posted by Freaky at 4:54 PM on March 20, 2005

« Older Secretery of Meow!   |   With a Hush and a Whisper, Bush Drops Town Hall... Newer »

This thread has been archived and is closed to new comments