Disable Add to Cart Prestashop Popup - Step by Step

Many people asked our support team to disable the popup that shows when adding a product to the cart with ajax, and instead redirect to the Cart Summary page. I have seen many posts instructing to disable Add to Cart popup in the Cart Block module, but it only works for Prestashop 1.6.

In P1.7, the feature "Redirect after adding product to cart" does not exist anymore, and in this case, you might want to disable Prestashop Ajax Cart feature that belongs to the Shopping Cart module. Unfortunately, if you disable this feature, the popup won't display but it does not redirects your customer to the Cart Summary page.

On this tutorial, i will show you how to disable Add to cart Prestashop popup, redirect to Prestashop Cart summary on v1.7.

Disable Prestashop Add to Cart Popup - Step by Step Prestashop Tutorial

How redirect the customer to the Cart Summary page after clicking "Add to Cart"?

In 1.6, the option was under Preferences -> Product (Redirect after adding product to cart). This feature has been removed from version 1.7. I don't know why but i'm sure many people miss it so much :)

Step I - Find and replace showModal(resp.modal)

On this way, we will try to edit your-website/modules/ ps_shoppingcart/ps_shoppingcart.js file. Somewhere near line 49 you can find code like this:

  if (resp.modal) {
              showModal(resp.modal);
  }
  

showModal(resp.modal) is the source code calls the modal popup. Change it to disable the popup and redirect customers to Cart Summary page:

  if (resp.modal) {
              window.location.replace(prestashop.urls.pages.cart);
  }
  

Clear website's cache and browser cache to see the result.

It works!

But...hang on! This trick works if the visitors is not logged in. However, if they add the products while logged in, they get redirected to the homepage instead of Cart summary.

Step II - Redirect to the Cart Summary page

We developed a Prestashop module called ChargeMe that allow you to sell subscription products ( magazines, membership, books...etc..) via Paypal.

We want only 1 subscription product on basket when checkout, so we need the redirection automatically when they add Subscribe button. Then we add a function into our js file:

  prestashop.on('updateCart',function (event) {
                          ...
                              $.post(ajax_url, requestData, null, 'json').then(function (resp) {
                                  location.href = cart_url;
                              }).fail(function (resp) {
                                  prestashop.emit('handleError', {eventType: 'updateShoppingCart', resp: resp});
                              });
                        });

As you see, instead of redirect to prestashop.urls.pages.cart, we want to redirect to cart_url. This value is a predefined value. And no matter what they are logged in your website or not, the module will redirects to cart summary immediately.

What will you have to do now ? We have to add our value to your website. Open your-website/modules/ps_shoppingcart/ ps_shoppingcart.php file to add something. You will see:

public function hookHeader()
      {
          if (Configuration::isCatalogMode()) {
              return;
          }

          if (Configuration::get('PS_BLOCK_CART_AJAX')) {
              $this->context->controller->registerJavascript('modules-shoppingcart', 'modules/'.$this->name.'/ps_shoppingcart.js', ['position' => 'bottom', 'priority' => 150]);
          }
      }

Change it to

  public function hookHeader()
      {
          if (Configuration::isCatalogMode()) {
              return;
          }

          if (Configuration::get('PS_BLOCK_CART_AJAX')) {
              $this->context->controller->registerJavascript('modules-shoppingcart', 'modules/'.$this->name.'/ps_shoppingcart.js', ['position' => 'bottom', 'priority' => 150]);
          }
          $this->smarty->assign(array(
              'cart_url' => $this->getCartSummaryURL(),
          ));

          return $this->fetch('module:ps_shoppingcart/header.tpl');
      }

We called a new file, and now we need to create it as /your-website/modules/ ps_shoppingcart/header.tpl. Put this content into this file:

  <script type="text/javascript">
      {if isset($cart_url)}
          var cart_url = '{$cart_url}';
      {/if}
  </script>

What is the different?

You know, prestashop.urls.pages.cart is not a predefined value. If the customer login, prestashop.urls.pages.cart means homepage, or not, it means Cart page. We need to use our value.

Now we can edit /your-website/modules/ps_shoppingcart/ps_shoppingcart.js file by using our value:

  if (resp.modal) {
             location.href = cart_url;
  }
  

It would be better if we have an option to disable or enable a feature. Anyway, hope this trick will give you some value.

All right, everyone. Look forward to your comments below. We'll see you again next week for other Prestashop tutorials. Take care.

Halloween theme

PrestaSEO AI++.

PrestaSEO AI module

PrestaSEO AI++ is a cutting-edge module designed to take your PrestaShop store’s SEO to the next level. Built with advanced automation and AI technology, it streamlines SEO tasks, making optimization easier and more effective.

Whether you're focused on improving local visibility or cleaning up your site's URL structure, PrestaSEO AI provides a comprehensive suite of features to enhance your store's performance.

Aktualizacja najnowszych modułów!

Age Restriction - 18+ ⊙
Rozwiąż niektóre problemy z wyświetlaniem na urządzeniach przenośnych.


Newsletter Popup v3.2.2
Edycja świąteczna, aby zwiększyć sprzedaż.


Trusty v1.4.7 ⊙
Kompatybilny zarówno z PrestaShop 1.7, jak i PrestaShop 8.


PrestaSOO team
Wszystko, czego potrzebujesz, aby zarabiać na życie wykonując pracę, którą kochasz.

Odkryć

To mądra inwestycja

Moduły PrestaShop, które stworzyliśmy jako pierwsze, aby rozwiązać problem naszego własnego biznesu - strona e-Commerce. Oznacza to, że są bardzo przydatne w poważnym biznesie. Jeśli cenisz swoją usługę internetową, te moduły są mądrą inwestycją.
Sarah Reeves, Programista aplikacji @ PrestaSOO
Wykonane z w Paris i Hanoi
PrestaSOO © 2024. Wszelkie prawa zastrzeżone. // Polityka prywatności Warunki usługi