Add to cart button

Thanks, That is a feature I was thinking would make this rock. Thanks for the work already on this module. DC is becoming a very viable platform.

I am working on this.

Fixed 9146da3.

The callback is not working 100%. If you add the same item more than 1 time on a page, aka click add to cart 2 times, it causes a page refresh,

Oh thank you for testing :)

The fix pushed to dev branch. Please try again. Thanks.

When the cart is empty, the ajax behavior is not triggered when adding a product to the cart. I know it's the intended behavior here (as described in the .js comment), but it can easily be done by attaching your result to .cart-empty-block css class. Would it be possible ?

Sorry i'm not attaching a patch as i'm not very familiar with your js code. I'm usually using ajax_commands : http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax_commands/7 - I originally wrote this custom module for the same thing, using drupal core ajax commands, and views_embed_view() to reload the view.

I use views for listing products with add to cart button, and without modifying this code its not work for me

$('a.dc-cart-ajax-fake-link, .commerce-add-to-cart .form-submit.ajax-processed').each(function(){
      $(this).trigger('click');
    });

This isn't working for me on a full node view, with the add to cart button placed as a field using Display Suite. The following patch gets it working (based on the comment in #9).

I hink this should be configurable per field widget. In some cases it makes sense to have an ajax enabled add to cart button, but not in all cases. Need to allow users to choose this as a widget display setting.

Attached patch implements the hooks provided by the http://drupal.org/project/field_formatter_settings module - which essentially implements some hooks that are missing from Drupal 7. This enables additional settings to be added to Commerce's add to cart field widget settings forms which allows you to turn on/off AJAX mode for individual fields (from within the manage display tab).

There is one small problem with this patch which is that it currently only works in 'full' build mode. There are comments in the code that describe the reason why. But essentially its because I'm having to do the js/ajax injection in hook_form_alter, because it doesn't seem to be possible to set those form properties from within hook_field_attach_view_alter(), and in hook_form_alter I can't find a way to get the fileds build mode context. Other than that it works well.

I tried patch #12 (manually implemented it, because I don't know how to apply patches). And it didn't work for me. Nothing changes in the shopping cart block and the page reloads.

Does anyone have a working version of this module or a patch that actually works?

There's an Ubercart module for D6 http://drupal.org/project/uc_ajax_cart - check out their demo site. Pretty awesome with Grown notifications effect. It would be awesome to have this functionality in Commerce with 7.x.

@drupalina - you have to enable the ajax mode in the shopping cart block view as before, but then with my patch you also have to enable it on the add to cart field widget - since the point of the patch is to make it a per field instance setting.

i'm sorry, but i can't found a field widget that u are referring. Are u referring to product reference field in product display? or in product entity? or views? i can't found it in anywhere.

@kervi - on your product display node - look , look in the manage display tab, on the product reference field - the field widget settings. There are options to control things like wether or note items should be combined, and the line item type that should be added. This patch adds a new option to enable ajax mode.

Note, there is an issue with the page that may prevent it working for you (although it would not stop the display settings that I am talking about from showing)...

-  $alter = $form_id === 'views_form_commerce_cart_block_default';
+  $alter = $form_id === 'views_form_commerce_cart_block_block_1';

After you have applied the patch, change it back to views_form_commerce_cart_block_default (views_form_commerce_cart_block_block_1 was specific to my site, and shouldn't have been included in this patch). That line was my quick hack for #1374992: Ability to update cart blocks other than the default one

ok, thanks. Found it.

but after apply the patch manually (patch < gives me errors), install field_formatter_settings, enable it, enable ajax mode in field options, enable ajax in views, block and change again to views_form_commerce_cart_block_default, nothing happens.

i think it's becouse in your code u have (.commerce-add-to-cart .form-submit.ajax-processed)

  Drupal.ajax.prototype.commands.dc_cart_ajax_add_to_cart_form = function(ajax, response, status) {
     $('a.dc-cart-ajax-fake-link, .commerce-add-to-cart .form-submit.ajax-processed').each(function(){
      $(this).trigger('click');
    });

and i have

<form accept-charset="UTF-8" id="commerce-cart-add-to-cart-form-60" method="post" action="/ru/catalog/product/038-07-01" class="commerce-add-to-cart commerce-cart-add-to-cart-form-60" novalidate="novalidate"><div><input type="hidden" value="60" name="product_id">
<input type="hidden" value="form-6ItOjuODcg4h94gCUWbEW-P03Cw2INxuRDrj6v8t9KQ" name="form_build_id">
<input type="hidden" value="hE-VFB3yW7qIgVMN8rDJVmRz0tuE5l0zrhQK18u2mzQ" name="form_token">
<input type="hidden" value="commerce_cart_add_to_cart_form_60" name="form_id">
<div class="form-wrapper" id="edit-line-item-fields"></div><div class="form-item form-type-textfield form-item-quantity">
  <label for="edit-quantity">Quantity </label>
 <span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-decrease commerce-quantity-plusminus-link-disabled"><a onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', -1); return false;" class="button" href="/ru/catalog/product/038-07-01">-</a></span><input type="text" class="form-text" maxlength="128" size="5" value="1" name="quantity" id="edit-quantity"><span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-increase commerce-quantity-plusminus-link-disabled"><a onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', 1); return false;" class="button" href="/ru/catalog/product/038-07-01">+</a></span>
</div>
<input type="submit" class="form-submit" value="Add to cart" name="op" id="edit-submit"></div></form>

it's not ajax processed. Why?

Here is an updated patch that does not include my my hack for #1374992: Ability to update cart blocks other than the default one, so it should work with the default drupal commerce cart block.

is the patch from the #19 also in the dev releas?

Patch in #19 fails to apply to latest dev and is also missing the second part of the code #10 , manual apply of the patch did not work either... The field formater showed up & I set it to use ajax but no luck when clicking the add to cart button.. and also seemed to break everything else ajax cart does in the cart form.

Any of you get this working with the latest dev or just an older release?

I'm experiencing the same issues as @macrocosm. With what module version number and patch does someone have this working?

Just installed the latest dev version..
The first time the user adds to cart, ajax is not being called and the product is added the old-fashioned way (page refreshes)...
the second time the ajax is called and the product is added to cart using ajax, but this is only working when i add to cart from the product node page.
but i also have a catalog view for listing the products, and have the add-to-cart button next to each listed item - when i add to cart from that page i get this error:

also, viewing the logs i can see these:

Warning: Missing argument 3 for dc_cart_ajax_form_commerce_cart_add_to_cart_form_ajax_callback(), called in /public_html/includes/ajax.inc on line 382 and defined in dc_cart_ajax_form_commerce_cart_add_to_cart_form_ajax_callback() (line 92 of /public_html/sites/all/modules/dc_cart_ajax/dc_cart_ajax.module).
-----
Notice: Undefined index: form_build_id in ajax_get_form() (line 320 of /public_html/includes/ajax.inc).
------
Invalid form POST data.
-----

will appreciate any help with the issue, thanks.

Along these lines, does anyone know if this should work with the Commerce Extra / Quantity submodule? It doesn't seem to. In fact, it also seems to prevent that submodule working at all.

I.E.

1. I already had the Commerce Extra / Quantity submodule installed and working fine.
2. Installed and configured Commerce Cart Ajax as advised.
3. Enabled Ajax on the Shopping Cart Form (Commerce Order) View.
4. Tried the Quantity -|+ widgets (which is all this submodule adds); and
5. Not only does the -|+ widget no longer work (fails to increment the quantity) but neither does the Ajax. I.E. No price change.*

*Also if you manually update the quantity field it doesn't fire-up Ajax either - but *queue bells and whistles* the Remove button does trigger the ajax event and immediately removes and cleans-up the shopping cart.

Warning: front-end designer here. I'm just telling you the way it is. Don't tell me to start editing Drupal hooks and fannies!

Have I done something wrong? Or are these modules incompatible? Or something else?

Thanks - in advance.

EDIT: I just removed said DC Extra quantity submodule and updating the field still doesn't work (update the price via Ajax) whereas the Remove button still works. So I would still like to know, if anyone does, if these should be compatible - and how.

I'm not sure if this is where I should post this, but I was able to make the Add to Cart buttons work with Ajax just by adding the two functions showed on this post http://www.drupalcommerce.org/node/2628#comment-3858 to the 7.x-1.0 version of this module:

Just for anyone who needs to get some working code quickly like me. This is a very important module for DC in my opinion and I look forward to seeing more exciting features coming up soon!

The code in #26 works just fine.
And the advantage of this approach is that you don't have to patch anything, you can just insert the code to a module of your own.

just removed the dev version and installed the stable one, and used the code from comment #26 into my own module. i have enabled ajax for the shopping cart block view, but no ajax is called when adding to cart.

Make sure you update the ajax callback with the name of the function on your own module. Otherwise it won't work.

Is this patch add ajax only on field add-to-cart in node display, or on views too?

@Murz - it'll work in Views, too, which is how I use it.

@bradjones1, which version did you use for this? Latest dev version, 1.0 with patch from #26, patch from #19 (that I can't apply on current dev or 1.0 version) or some other code?

I try ti install current dev version and didn't see any changes in add-to-cart process :)

Can you share already patched module archive for downloading and post small manual how to configure it? Thanks!

+1
No one working on this anymore?
We need to use our own module with the code in #26?

Why don't we submit a new drupal module?

I needed this module to work with commerce kickstart v2 - so no default cart block (kickstart uses an added block in the top right corner). Altering the code from #26 I was able to get ajax working between the "add to cart" button and the kickstart cart view on both normal product pages and a grid view of products.

I discovered, however, that if using the commerce stock module the "add to cart" button would not become disabled (or say "out of stock") on products that were out of stock. It appears that the code in #26 sets the #value of the submit button to 'Add to Cart' and this was overriding the commerce stock module. Once I got it to inherit the #value from commerce stock of "Out of Stock" it still would not disable.

I worked around this by altering the module weights setting the call order as:

1. ajax cart
2. my module overriding it with fixes to view names
3. commerce stock

It took me about a week to get all this setup (with message suppression and an ajax rollover so the cart pops open on hover or on adding a new item). It would be great to see ajax cart updated with some of this. I'm not experienced enough to do a patch or write a legit module but I may try after my project is completed and things slow down.

Also, if anyone knows a better fix than rearranging the module order (i.e. what part of the code from #26 to fix so that it inherits properly from commerce stock) then please post here!

Hope this helps somebody.

While I'm sure it's horribly written and overly verbose (I'm a php noob) my attached module code does work. My module name is rasor_ajax_cart so make sure to adjust that for your own. If anyone cares to critique or rewrite I would love it. NOTE: The module here removes the system message after a successful (or unsuccessful) add to cart. If you want it back in just remove my commenting of the line towards the end and delete the three lines under it.

  $weight = db_select('system', 's')
              ->fields('s', array('weight'))
              ->condition('name', 'commerce_stock', '=')
              ->execute()
              ->fetchField();

  db_update('system')
    ->fields(array('weight' => $weight -1))
    ->condition('name', 'rasor_ajax_cart', '=')
    ->execute();
  
  $weight = db_select('system', 's')
              ->fields('s', array('weight'))
              ->condition('name', 'commerce_stock', '=')
              ->execute()
              ->fetchField();

  db_update('system')
    ->fields(array('weight' => $weight -2))
    ->condition('name', 'dc_cart_ajax', '=')
    ->execute();
  
function rasor_ajax_cart_form_alter(&$form, &$form_state, $form_id) {
    // Add ajax property to Add to Cart button
    if (strstr($form_id, 'commerce_cart_add_to_cart_form')) {
	$value = $form['submit']['#value'];
	$type = $form['submit']['#type'];
      $form['submit'] = array(
        '#value' => $value,
        '#type' => $type,
        '#ajax' => array(
        'callback' => 'rasor_ajax_cart_form',
        'wrapper' => 'block-shopping-cart-block',
        'effect' => 'fade',
        'progress' => array('type' => 'throbber', 'message' => 'Adding to Cart'),
        ),
      );
      $form['#submit'][] = 'rasor_ajax_cart_form_rebuild_submit';
    }
}

function rasor_ajax_cart_form_rebuild_submit($form, &$form_state){
    $form_state['rebuild'] = TRUE;
	
}

function rasor_ajax_cart_form($form, &$form_state){
    global $user;
    $order_id = commerce_cart_order_id($user->uid);
    $cart =  commerce_embed_view('shopping_cart', 'default', array($order_id));
    $commands = array();
    $commands[] = ajax_command_replace('#block-views-shopping-cart-block .view-shopping-cart', $cart);
    $commands[] = ajax_command_replace('#block-views-shopping-cart-block .view-empty', $cart);
    // $commands[] = ajax_command_after('.'.$form['#attributes']['class'][1],theme('status_messages'));
	$commands[] = ajax_command_remove('#messages-wrap');
	$commands[] = ajax_command_after('#breadcrumb-wrap', '<div id="messages-wrap">' . theme('status_messages') . '</div>');
	$commands[] = ajax_command_invoke(NULL, 'cart_content_loading', array());
    return array('#type' => 'ajax', '#commands' => $commands);
}

Thanks.will be checking out this solution.Using Kickstart 2 and Commerce Cart Ajax doesn't seem to be working as the page still reloads after every add to cart request.

With the latest release of kickstart I have noticed that the ajax cart has stopped working (even without my module) on the cart page itself. I will look at it once I have time but one of the functions that the ajax cart module overrides must have been updated in commerce! The module still works on all of the front end "add to cart" buttons though.

Hi,

I just wanted to add that I was able to get the 'add to cart' button to function without a page request using a mixture rumblewand's code. I'm pretty much php illiterate but this is the code I used that worked on my site:

<?php
$weight = db_select('system', 's')
->fields('s', array('weight'))
->condition('name', 'commerce_stock', '=')
->execute()
->fetchField();

db_update('system')
->fields(array('weight' => $weight -1))
->condition('name', 'theme_cart_ajax', '=')
->execute();

$weight = db_select('system', 's')
->fields('s', array('weight'))
->condition('name', 'commerce_stock', '=')
->execute()
->fetchField();

db_update('system')
->fields(array('weight' => $weight -2))
->condition('name', 'dc_cart_ajax', '=')
->execute();

function theme_cart_ajax_form_alter(&$form, &$form_state, $form_id) {
// Add ajax property to Add to Cart button
if (strstr($form_id, 'commerce_cart_add_to_cart_form')) {
$value = $form['submit']['#value'];
$type = $form['submit']['#type'];
$form['submit'] = array(
'#value' => $value,
'#type' => $type,
'#ajax' => array(
'callback' => 'theme_cart_ajax_form',
'wrapper' => 'block-shopping-cart-block',
'effect' => 'fade',
'progress' => array('type' => 'throbber', 'message' => 'Adding to Cart'),
),
);
$form['#submit'][] = 'theme_cart_ajax_form_rebuild_submit';
}
}

function theme_cart_ajax_form_rebuild_submit($form, &$form_state){
$form_state['rebuild'] = TRUE;

}

function theme_cart_ajax_form($form, &$form_state){
global $user;
$order_id = commerce_cart_order_id($user->uid);
$cart = commerce_embed_view('commerce_cart_block', 'default', array($order_id));
$commands = array();

// The next line allows different quantities
// to be submitted each time
unset($form['quantity']['#value']);

// Clear form and form state cache
$form_state = form_state_defaults();
$form_build_id = $_POST['form_build_id'];
form_set_cache($form_build_id, $form, $form_state);

$commands[] = ajax_command_replace('#block-commerce-cart-cart .view-commerce-cart-block', $cart);
$commands[] = ajax_command_replace('#block-commerce-cart-cart .cart-empty-block', $cart);
$commands[] = ajax_command_after('.'.$form['#attributes']['class'][1],theme('status_messages'));
return array('#type' => 'ajax', '#commands' => $commands);
}

Thanks rumblewand!!!

I really hope the "Add to cart" function will be a part of the stable version too.. That would be awsome! /Mats

The patch in #19 does apply to the latest dev. However it does use the product reference field for diplaying a ajax add to cart button. Since the form to display a add to cart link is a views field on the product entity and since I am not using product display nodes at all, this patch is unusable. What needs to be changed to fix this? Do we need the dependency on field_formatter_settings?

Ok.#35 works.But when I click on the subscribe for newsletter button on my homepage.It says adding to cart.How do I select only the cart button to respond via ajax.

Hi,

Any news on whether this feature will be part of a full release?

Cheers
Zap

Subscribe

patch is not compatible with 7.x-1.x-dev Sep-30

Just to add that #3 and #5 (commits 9146da3 and 9435164 respectively) break the ajax functionality off the attribute widget. This is code committed to the dev version.

I tried the latest patch in #19 and the problem with the attributes is solved. I have not tested the ajax cart functionality with this patch, was just trying to solve the problem mentioned, which by the way is the one reported in #1623332: Breaks the ajax functionality of product attributes.