I placed the Commerce Cart block in the side bar and I added the Empty Cart Button in the View footer of this block. It works as is.

I wanted to make this "empty cart button" use Ajax instead of reloading the page.

This is how I accomplished it. I am not sure if this is the best way. But it took me a long 2 days to figure out this solution after trying many things. Please let me know if you have a more effective/efficient way. My way seems to be a bit hacky.

In summary, I added the empty cart button to the footer of the cart block view. I then, used hook_form_alter to add ajax to this button. The problem with this is that it will work but the block will not get refreshed. Even though the cart is cleared in the background, it still shows the order items. So in my ajax callback, I create a new instance of this same block and render it in place of the older block. This seems to work but I am not sure if this is the best way.

This link really helped me

Step 1: Add the Empty Cart Button to the footer area of the cart block view.

Step 2: In your custom module, implement hook_form_FORM_ID_alter:

function mymodule_form_FORM_ID_alter(&$form, FormStateInterface $form_state, $form_id) {
  //first disable the default save button that comes with the empty cart button
  $form['actions']['submit']['#access'] = FALSE; 

  //disable the default empty cart button
  $form['actions']['empty_cart']['#access'] = FALSE;

  //create my new empty cart button
  $form['actions']['ajax_empty_cart'] = [
    '#type' => 'submit',
    '#value' => t('Empty cart'),
    '#empty_cart_button' => TRUE,
    '#attributes' => [
      'class' => ['empty-cart-button'],
    '#ajax' => [
      'event' => 'click',
      'callback' => '_refresh_cart_block', //my custom callback
      'progress' => [
        'type' => 'throbber',
        'message' => NULL,
      'wrapper' => 'ajax-empty', //you need to add the css id ajax-empty to the parent div of the block


* Helper function to reload the cart block when the ajax button is clicked.
function _refresh_cart_block($form, $form_state) {

  $block_manager = \Drupal::service('plugin.manager.block');
  // You can hard code configuration or you load from settings.
  $config = [];
  $plugin_block = $block_manager->createInstance('commerce_cart', $config);
  // Some blocks might implement access check.
  $access_result = $plugin_block->access(\Drupal::currentUser());
  // Return empty render array if user doesn't have access.
  // $access_result can be boolean or an AccessResult class
  if (is_object($access_result) && $access_result->isForbidden() || is_bool($access_result) && !$access_result) {
    // You might need to add some cache tags/contexts.
    return [];
  $render = $plugin_block->build();
  // In some cases, you need to add the cache tags/context depending on
  // the block implementation. As it's possible to add the cache tags and
  // contexts in the render method and in ::getCacheTags and
  // ::getCacheContexts methods.
  return $render;


Your Answer

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

Browse other questions tagged or ask your own question.