0

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 & 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 & 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.

Improve this question
0

1 Answer 1

Reset to default
1

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&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!

Improve this answer
5
  • You're suggesting jquery + REST commerce api? I found Commerce Services Resources and Services Commerce modules that could do the REST api. How do I work with jquery ajax on mobiles? What do I look out for?
    – a20
    Sep 9, 2014 at 7:07
  • No. That's a solution, but requires a more work. I suggest you to create a simple url to achieve the exact operations you need and update the cart. Then render the cart with the method you prefer: a view, a block, etc. Then replace the contents of the cart with the updated content.
    – Beto Aveiga
    Sep 9, 2014 at 23:38
  • For Ajax and jQuery you can start with $.ajax() api.jquery.com/jquery.ajax
    – Beto Aveiga
    Sep 9, 2014 at 23:38
  • Also see hook_menu to declare your ajax path in Drupal. One option to output the the rendered cart is drupal_json_output, or just do a print of your cart and then exit (the ugly way).
    – Beto Aveiga
    Sep 9, 2014 at 23:41
  • Hey thanks for the helpful information man. I'll reply more back here when I start working on it.
    – a20
    Sep 10, 2014 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.