Putting multiple Add to cart links / buttons on a page I'm writing a series of blog posts on my eCommerce site. For example, "10 easy breakfasts for the busy mom/dad". Under each "breakfast idea", I want to put a small block like "Items you'll need". This "items you'll need" will have links to products in our shopping site.

The idea is that if someone likes a blog post or one of the "receipes", they can immediately click on the products below and add them to cart. I don't want them to be taken away from the page they are reading though, because that would be annoying.

They will need some indication that the product was added to cart, so maybe a green tick or "Added!" label will need to show up.

When you get to bottom of the blog post, there should be a block "Products you have in your cart" so that they review and can choose to check out if they want.

I've found these articles &amp; modules:

Creating Drupal Commerce add to cart links
, 

Commerce Add to Cart Ajax, 

Custom Add to Cart Link

But I'm not sure which is the way to go considering my requirements:


Curated product links / thumbnails in blocks
Clicking sends ajax signal to cart to add product
There is an indication that the product was added "Added!" or a tick or border highlight.
If the same product is on multiple blocks in the page, when I click one block, it should update on all the blocks.
Ajax stuff should be robust on mobile devices


I've never done this before, Drupal ajax &amp; custom cart stuff, so I wanted to ask your advice on what to consider before moving ahead. I want to do it in the simplest and most robust way possible. If I can avoid custom code and sandbox code, that would be ideal. Thanks.
jQuery is our friend.

Create a DIV for every product that will perform an ajax request (on click) to a path that will update your cart and then retrieve the cart contents. Ex. /ajax/cart?op=add&amp;pid=idOfProduct

Create a path (hook_menu) where you will send the add to cart message or other messages that you want to send to the cart (item removal for example).

This path will update the cart to your needs based on the parameters you send it.

The response of the path could be in full HTML for simplicity, with the updated and already rendered cart.

Replace the current cart with the new contents. It's not simple but it will work.

Hope that helps!