Change "add to cart" button text with ajax on adding item to cart

The issue summary has not much to do with the patch. But likely a good call because you really can't use the cart refresh feature with this module at the moment, I assume this fixes that?

Hi torgosPizza!

Thanks for taking the time to look at this, I have a real need for this functionality myself. I have patched my module and can see that it is currently changing the id of the form and clicked submit button.

But I cant see how to customize the button text, i'm sorry if this is a dumb question... It's been a very ... very long day

Could you please point me in the right direction?

Regards

Thanks torgosPizza!

I'm going to try this in a few hours, it looks very very promising for me.... I do however wonder how it will deal with the multiple instances of the add to cart form I am using on each product page.

I essentially have a main product with several variations & I'm rendering a separate add to cart for each one.

then, I have a separate product reference field for "optional extra's" for which i am also rendering individual add to cart forms.

I'll let you know ho I get on! :)

Thanks @torgosPizza for the patch. But I am not sure whether to include this feature in the module. I understand this will be good for UX, but does this feature really aligns with the purpose of this module?

Re #5:

Once I started digging into how the module operates

The working of the module is very straightforward. After adding item to cart:
- Using commerce APIs get the latest commerce line items in current order object
- Using Drupal Ajax APIs replace the old items with new items

What the patch essentially does is expose the cart forms to an Ajax command, which allows those other modules to do their thing and not be inhibited by the fact that this module did not refresh the cart button once it had been clicked.

Can you give me an example for this? I mean a custom module that ajax changes the "add to cart" button text when item is added to cart. Or does the code in #7 achieves that thing?

P.S. Very sorry for the late reply.

Thank you. Will try to build a custom module and use the patch. This will be a good addition in this module.

@torgosPizza I used the patch and created a test module using the code in #7. I was randomly checking, and at one moment the cart update functionality was breaking. I then disabled the test module, and then it started working properly. I then again tried to reproduce the abnormality by enabling the module, but was not able to replicate it.

I think we should write automated tests first #2568855: Write tests before committing this into the module.

Hi @torgosPizza the tests are passing for your patch in #3. I remember when I was testing your patch the ajax was breaking when I was adding the same item without browsing to other page. Currently with the tests that I have written it is not possible to close popup that appears when you add an item to cart. I am keeping this issue as "Postponed" until I figure out this shortcoming.

+1 for this feature request.

Will try applying to our dev server this week and see what I can provide for test results.

Hello @torgosPizza,
I tried the code in post #7 and I'm able to see the 'In your cart!' on the submit button. But, I want to change this scenario a little. I want to show a "minus button-textfield for cart count-plus button", in the text-box I want show the current cart count of that product. When we press on plus/minus the cart as well as the cart count textfield need to be updated. To do this I have modified the form code as follows:

$form['submit']['#disabled'] = TRUE;
$form['submit']['#value'] = t('In your cart!');
$form['submit']['#type'] = 'hidden';

$form['minus'] = array(
   '#type' => 'button',
   '#value' => t('-')
);

$form['cart_count'] = array(
    '#type' => 'textfield',
    '#title' => t('Cart count'),
    '#default_value' => 1,
);

$form['plus'] = array(
    '#type' => 'button',
    '#value' => t('+'),
    '#ajax' => array(
       'callback' => 'click_on_plus',
    ),
 );

$form['product_id'] = array(
   '#type' => 'hidden',
    '#value' => $line_item_wrapper->commerce_product->product_id->value(),
);

//click_on_plus()

function click_on_plus($form, $form_state) {
 global $user;

  if ($user) {
    $quantity = $form_state['values']['cart_count'];
    $product_id = $form_state['values']['product_id'];

    $line_item = NULL;

    if ($product = commerce_product_load($product_id)) {
      $line_item = commerce_product_line_item_new($product, $quantity);
      $line_item = commerce_cart_product_add($user->uid, $line_item);
      
      // Set the updated quantity for the text-box 
      $form_state['values']['cart_count'] = $line_item->quantity;
    }
  }

  return $form;
}

When I press on the plus button the following AJAX error it shows:

<br />
<b>Warning</b>:  Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in <b>Unknown</b> on line <b>0</b><br />
[{"command":"settings","settings":{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"mysite","theme_token":"um-hNv8pgItLAXoIkDCs-VDyTIxNmdKr4K5mKqrLtzs","jquery_version":"1.10","css":{"sites\/all\/modules\/date\/date_api\/date.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"sites\/all\/modules\/office_hours\/office_hours.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"public:\/\/css\/menu_icons.css":1,"sites\/all\/themes\/mysite\/css\/bootstrap.min.css":1,"sites\/all\/themes\/mysite\/css\/font-awesome.min.css":1,"sites\/all\/themes\/mysite\/css\/style.css":1}},"clientsideValidation":{"forms":{"commerce-cart-add-to-cart-form-2--2":{"rules":{"cart_count":{"maxlength":128}},"messages":{"cart_count":{"maxlength":"Cart count field has a maximum length of 128."}},"errorPlacement":"4","general":{"errorClass":"error","wrapper":"li","validateTabs":0,"scrollTo":1,"scrollSpeed":"1000","disableHtml5Validation":"1","validateOnBlur":"1","validateOnBlurAlways":"0","validateOnKeyUp":"1","validateBeforeAjax":"0","validateOnSubmit":"1","showMessages":"0","errorElement":"label"}},"commerce-cart-add-to-cart-form-2":{"errorPlacement":"4","general":{"errorClass":"error","wrapper":"li","validateTabs":0,"scrollTo":1,"scrollSpeed":"1000","disableHtml5Validation":"1","validateOnBlur":"1","validateOnBlurAlways":"0","validateOnKeyUp":"1","validateBeforeAjax":"0","validateOnSubmit":"1","showMessages":"0","errorElement":"label"}}},"general":{"usexregxp":0,"months":{"January":1,"Jan":1,"February":2,"Feb":2,"March":3,"Mar":3,"April":4,"Apr":4,"May":5,"June":6,"Jun":6,"July":7,"Jul":7,"August":8,"Aug":8,"September":9,"Sep":9,"October":10,"Oct":10,"November":11,"Nov":11,"December":12,"Dec":12}},"groups":{"commerce-cart-add-to-cart-form-2--2":{}}},"ajax":{"edit-plus--2":{"callback":"click_on_plus","event":"mousedown","keypress":true,"prevent":"click","url":"\/system\/ajax","submit":{"_triggering_element_name":"op","_triggering_element_value":"+"}}},"urlIsAjaxTrusted":{"\/system\/ajax":true,"\/node\/2":true}},"merge":true},{"command":"add_css","data":"\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/modules\/date\/date_api\/date.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/modules\/field\/theme\/field.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/modules\/node\/node.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/modules\/office_hours\/office_hours.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/modules\/search\/search.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/modules\/user\/user.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/modules\/views\/css\/views.css?ok6i6x\u0022);\n\u003C\/style\u003E\n\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/modules\/ctools\/css\/ctools.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/default\/files\/css\/menu_icons.css?ok6i6x\u0022);\n\u003C\/style\u003E\n\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/themes\/mysite\/css\/bootstrap.min.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/themes\/mysite\/css\/font-awesome.min.css?ok6i6x\u0022);\n@import url(\u0022https:\/\/mysite.dd:8443\/sites\/all\/themes\/mysite\/css\/style.css?ok6i6x\u0022);\n\u003C\/style\u003E\n"},{"command":"insert","method":null,"selector":null,"data":"\u003Cform class=\u0022commerce-add-to-cart commerce-cart-add-to-cart-form-2 in-stock\u0022 action=\u0022\/node\/2\u0022 method=\u0022post\u0022 id=\u0022commerce-cart-add-to-cart-form-2--2\u0022 accept-charset=\u0022UTF-8\u0022\u003E\u003Cdiv\u003E\u003Cinput type=\u0022hidden\u0022 name=\u0022product_id\u0022 value=\u00222\u0022 \/\u003E\n\u003Cinput type=\u0022hidden\u0022 name=\u0022form_build_id\u0022 value=\u0022form-jtYTUkMyPXfnt0WJSyJWnsSJQJjFBoHUJ_A1arcTkak\u0022 \/\u003E\n\u003Cinput type=\u0022hidden\u0022 name=\u0022form_token\u0022 value=\u0022QS-WSAizLVe5BVqPF4JmfXVmT-GZotZhKrxdFwYyPyU\u0022 \/\u003E\n\u003Cinput type=\u0022hidden\u0022 name=\u0022form_id\u0022 value=\u0022commerce_cart_add_to_cart_form_2\u0022 \/\u003E\n\u003Cinput type=\u0022submit\u0022 id=\u0022edit-minus--2\u0022 name=\u0022op\u0022 value=\u0022-\u0022 class=\u0022form-submit\u0022 \/\u003E\u003Cdiv class=\u0022form-item form-type-textfield form-item-cart-count\u0022\u003E\n  \u003Clabel for=\u0022edit-cart-count--2\u0022\u003ECart count \u003C\/label\u003E\n \u003Cinput type=\u0022text\u0022 id=\u0022edit-cart-count--2\u0022 name=\u0022cart_count\u0022 value=\u00221\u0022 size=\u002260\u0022 maxlength=\u0022128\u0022 class=\u0022form-text\u0022 \/\u003E\n\u003C\/div\u003E\n\u003Cinput type=\u0022submit\u0022 id=\u0022edit-plus--2\u0022 name=\u0022op\u0022 value=\u0022+\u0022 class=\u0022form-submit\u0022 \/\u003E\u003Cdiv id=\u0022edit-line-item-fields--2\u0022 class=\u0022form-wrapper\u0022\u003E\u003C\/div\u003E\u003Cinput type=\u0022hidden\u0022 name=\u0022quantity\u0022 value=\u00221\u0022 \/\u003E\n\u003Cinput type=\u0022hidden\u0022 name=\u0022submit\u0022 value=\u0022In your cart!\u0022 \/\u003E\n\u003C\/div\u003E\u003C\/form\u003E","settings":null},{"command":"insert","method":"prepend","selector":null,"data":"\u003Cdiv class=\u0027messages message-alert alert alert-block alert-success\u0027\u003E\u003Ca href=\u0027#\u0027 class=\u0027close\u0027 data-dismiss=\u0027alert\u0027\u003E\u00d7\u003C\/a\u003E\u003Ch2 class=\u0022element-invisible\u0022\u003EStatus message\u003C\/h2\u003E\u003Cem class=\u0022placeholder\u0022\u003EPepsi 1L\u003C\/em\u003E added to \u003Ca href=\u0022\/cart\u0022\u003Eyour cart\u003C\/a\u003E.\u003C\/div\u003E","settings":null}]

What could be the reason? how can I solve this issue? is there any other way to achieve this?

EDIT: The issue soved; Slick Carousel was conflicting with Drupal-AJAX.

The patch in #3 implements the feature partially. We still need a way to incorporate the feature in this module.

Remaining tasks:

• Implement the feature in module
• Provide a setting so that user can opt whether or not he wants to change "add to cart" button text once item is added to cart
• Write tests

I'd be glad to have this feature in this module. Any help would be greatly appreciated.