Need helping with Add-to-Cart feature

General Web Dev
1

Hello. I need some helping with an e-commerce site I am building from scratch.

When someone is in my product catalog viewing a given product, and after the choose the “Add to Cart” button, I need a way to confirm back to the user what they just added to their shopping cart.

In the old days, I think websites would just drop the user off in their shopping cart. But I believe a more modern design is to somehow show the user that they added the item to their shopping cart, but not move the user from where they were last shopping. (Maybe the user still wants to read more about the product on the product details page or they want to add more items, or if they were in the product catalog, they don’t want to lose the place where they were shopping?)

I am on www.barnesandnoble.com and I just added the book “UX for Dummies” to my guest shopping cart. When I did this, the page I was on goes gray, and a simple white box appears in the center of my screen and says “Item successfully added to your cart”. It also shows a thumbnail of the book plus a description.

This seems to be a good approach, because if I click on the “X” in this box, I am back on the page where I was shopping. However, the problem is that I do not know Javascript, and I don’t have time to learn it right now due to project deadlines…

So on to my HTML/CSS question…

[b]Since HTML/CSS have advanced a lot over the last couple of years, is there a way to get the same effect as Barnes & Noble uses without having to rely on Javascript?

Or, is their another approach I could take to not move people off of where they were shopping, yet still clearly show they that they did add a particular item to their shopping cart?[/b]

I am sooo close to getting my e-commerce site done, and it is little details like this that seem to be my last hurdles.

If I ever survive my first attempt at this, I am going to go buy 100 books on web design, HTML5, CSS3 and Javascript so next time I can do fancier things and account for mobile as well.

Am hoping you experts can help me choose a more simple approach for now, but one that still provides my users a good UI/UX experience!

Thanks! :slight_smile:

2

You’re describing a light box. Do a search for css3 lightbox and you’ll find some approaches. HOWEVER, you’re not going to be able to do a dynamic lightbox (i.e. showing the thumbnail of the different books depending on what you add to the cart) without some javascript because you’re going to have to alter the content of the lightbox before displaying it.

3

I suppose it is preferably when you choose “Add to Cart” that you get some sort of popup telling you that your item got added, but how make or break is that functionality?

I know that I can simply re-route people to the shopping cart after they click “Add to Cart”, but is that a major no-no?

Is there some in between solution where I can just use PHP/HTML/CSS?

4

I’m sure you’ve seen both behaviors in your research - you’ve got to start making some decisions on what is right for your site - there’s no one master checklist for stuff like that.

And no, you’re not going to be able to create a dynamic content lightbox without some sort of client side scripting, whether it’s an ajax type call/response, or just dom manipulation. If you want that behavior, you’re going to have to figure it out (or find some sort of sample to work from).

I’ve given you the search term - lightbox. That’s the behavior you want, so you should be able to search for it to find tutorials or solutions that fit your needs.

5

@DaveMaxwell,

So for v1.0, what if when a user clicks “Add to Cart” my PHP re-routes them to their shopping cart, displays the item just added, and then at he bottom I have two buttons: “Continue Shopping” and “Checkout”…

If the user chooses “Continue Shopping”, then I return them to wherever they came from, which would be the product details page for the item they just added to their cart.

That might not be as slick as a pop-up window showing the added item and an easy way to close it and resume shopping, but I think I can do what I just described using just PHP/HTML/CSS.

How does that sound in your opinion?

And if that is a reasonable approach, then that will give me time to go buy a book on Javascript and learn that and then maybe for v2.0 I can try out your lightbox thing.

Thoughts?

6

I’m going to repeat myself…

7

@DaveMaxwell,

I saw your earlier comment, but I’m still curious what YOU (and others) think about me not using a lightbox my first go around.

It doesn’t matetr what I think if everyone else thinks my decisions are dumb! :lol:

8

Personal opinion only…I find sites that take me to the shopping cart every time I add to the cart annoying.

Does that mean I won’t use the site? No.
Does it make it less likely I will use the site again? Probably.

9

That is what I wanted to know.

Well, I don’t think it is practical for me to pick up Javascript before this is due, so I’ll probably just have to ask my customers to be patient for a while.

Hopefully learning Javascript and this lightbox thing isn’t overly difficult.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.