0

Currently I am hooking into the add to cart form on my website. I added ajax to the edit quantity buttons like :

    $form_quantity[$key]['#ajax'] = [
      'callback' => 'update_cart_order',
      'disable-refocus' => FALSE,
      'wrapper' => $form_div_id,
      'event' => 'change',
      'progress' => [
        'type' => 'throbber',
        'message' => t('Updating Cart...'),
      ],
    ];

Which works lovely. I will note that $form_div_id is an id I'm wrapping the entire form in just above this.
Now I don't think I fully understand what I am supposed to return from my ajax. The view I am hooking into lists the products on one side and the order total on the other.

In my callback I (seem to) successfully update my cart quantities. But returning gets rid of the order total from this form.
I do nothing to edit the form and just return $form. All I do is update the order item.

I've looked around and think I may not understand what the ajax return really does but cannot seem to make sense of it. I just want to update my total price without refreshing the whole page.

In 'update_cart_order' I am changing the quantities and ending with this :

  $order->save();
  $order->recalculateTotalPrice();

  return $form;

This causes the total price display to disappear. After refreshing the page to get it back the quantities are properly adjusted.

Please let me know if any more information is needed. :)

  • Returning $form is the basic Form API Ajax pattern which in most cases works. The only con is that you return the entire form which might be a problem on a slow connection. Do all calculations in the form build or form alter and return the resulting $form in the callback. Do nothing else in the Ajax callback, only return $form. – 4k4 Mar 10 at 7:49
  • BTW if you enable Ajax in both, View and Form API, you get a conflict between different Ajax endpoints. See drupal.stackexchange.com/questions/249891/… – 4k4 Mar 10 at 8:30
  • Even returning the form and nothing else still gets rid of this order total. – Derek C. Mar 11 at 21:54
0

It sounds like you have your AJAX callback working fine. But you said that the #ajax wrapper is wrapping the entire form. The elements returned from the ajax callback replace everything in the div provided as a wrapper. Since you are wrapping your whole form with the wrapper, everything inside that div (the whole form) is replaced with the elements from the ajax callback.

You'll need to be more selective with your wrapper element. Set it to only wrap the elements that should be replaced.

| improve this answer | |
  • Right so in this case I'm unsure what I need to return then. I wouldn't understand how returning the whole un-changed form could create a different output as before. All I'm doing is wanted to display the updated commerce "total price" view but I don't change that like a form, I'm just saving the order. I'll put that onto my question. – Derek C. Mar 10 at 2:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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