How to remove "Proceed to checkout" "Continue shopping" pop-up

[MKZ Industries]

Hi all, 

I would simply like to remove the pop-up asking for "Proceed to checkout" or "Continue shopping" every time a product is added to the shopping cart.

Normally my customers add an average of 7 or 8 products and I think it's a bit annoying to have to close that window every time. 
The only related topic I have found is this one from 2014, it is still valid?

Thank you very much for your help and best regards!

MKZ Games

[webprog]

Hello, try to find ps_shoppingcart module - Shopping Cart module in the modules. And Turn off the Ajax call in the settings.

[Divine]

You should be able to do it from the configuration of your cart module.

[MKZ Industries]

15 hours ago, webprog said:

Hello, try to find ps_shoppingcart module - Shopping Cart module in the modules. And Turn off the Ajax call in the settings.

 

9 hours ago, Divine said:

You should be able to do it from the configuration of your cart module.

Thanks for the answers!

The only option I have in the Shopping Cart module (ps_shoppingcart) is: "Ajax Shopping Cart: Enable Ajax mode for the cart (compatible with the default theme)."

If I disable this, pop-up doesn't appear but neither the cart is updated when an item is added. I wouldn't want to lose that. 

Edited October 28 by MKZ Industries (see edit history)

[ps8modules]

Hi.

If you need to not show the modal window, you need to modify the javascript: ./modules/ps_shoppingcart/ps_shoppingcart.js

Just comment out the top lines with the modal window function.

ps_shoppingcart.js.zip

It would certainly be good to somehow inform the customer about the addition of goods to the cart, for example with some text, or by scrolling the page up to the cart and possibly shaking the cart.

I'm not at my computer right now, when I am I'll upload a demo here on how to make a cart shake 😉

 

Edited October 29 by ps8modules
Added zip file (see edit history)

[ps8modules]

Modified: ps_shoppingcart.js

PrestaShop: 8.x

Theme: classic

After modified js, clear cache !

$(document).ready(function () {
  prestashop.blockcart = prestashop.blockcart || {};

  prestashop.on(
    'updateCart',
    function (event) {
      var refreshURL = $('.blockcart').data('refresh-url');
      var requestData = {};
      if (event && event.reason && typeof event.resp !== 'undefined' && !event.resp.hasError) {
        requestData = {
          id_customization: event.reason.idCustomization,
          id_product_attribute: event.reason.idProductAttribute,
          id_product: event.reason.idProduct,
          action: event.reason.linkAction
        };
      }
      if (event && event.resp && event.resp.hasError) {
        prestashop.emit('showErrorNextToAddtoCartButton', { errorMessage: event.resp.errors.join('<br/>')});
      }
      $.post(refreshURL, requestData).then(function (resp) {
        var html = $('<div />').append($.parseHTML(resp.preview));
        $('.blockcart').replaceWith($(resp.preview).find('.blockcart'));
        /* added ps8modules */
        startScroll();
        /* end */
      }).fail(function (resp) {
        prestashop.emit('handleError', { eventType: 'updateShoppingCart', resp: resp });
      });
    }
  );
});

/* added ps8modules */
function startScroll()
{
  $('html, body').animate({scrollTop : 0}, 300, scrollTopAndShake);
}

function scrollTopAndShake()
{
  var cartElement = $('.blockcart');
  cartElement.attr('style', 'transition: all 100ms;');
  shakeCart(cartElement);
}

function shakeCart(el) {
  el.css('margin-right', '20px');
  shakeTime = 100;

  setTimeout(function() {
    el.css('margin-right','-20px');
    setTimeout(function() {
      el.css('margin-right','10px');
      setTimeout(function() {
        el.css('margin-right','-10px');
        setTimeout(function() {
          el.css('margin-right','0px');
        }, shakeTime);
      }, shakeTime);
    }, shakeTime);
  }, shakeTime);

  return true;
}
/* end */

 

Edited October 29 by ps8modules (see edit history)

[ps8modules]

So that you don't have to contact me via private message, I give examples 😉

 

If you want to apply the cart shake only on the product page, just add a condition and change startScroll():

if (prestashop.page.page_name == 'product') {
    startScroll();
}

 

If you don't want a shake, but maybe just change the color, then you just need to modify the function shakeCart(el):

function shakeCart(el) {
  var a = el.find('a, i');
  a.css('color','#ffffff');
  shakeTime = 200;

  setTimeout(function() {
    a.css('color','#9be616');
    setTimeout(function() {
      a.css('color','#ffffff');
      setTimeout(function() {
        a.css('color','#9be616');
        setTimeout(function() {
          a.css('color','#ffffff');
        }, shakeTime);
      }, shakeTime);
    }, shakeTime);
  }, shakeTime);

  return true;
}

And this way you can play endlessly.
You can also put ps_shoppingcart.js in ./themes/classic/modules/ps_shoppingcart/ps_shoppingcart.js !

[MKZ Industries]

Nice answer! Thanks a lot for the time taken for it. 

I will start trying just the deactivation of the pop-up and then I will try to make the cart to shake when a product is added. I think that would be the best option for me. 

(My products have many different combinations and my customers usually add different sizes one after the other. So I prefer the pop-up not to appear neither the page to scroll up. The colour change may work for the first one, but the for the next products won't change again will it?)

PS: I am using 1.7.8.11

[ps8modules]

Hi.

In your case, it would be more appropriate to have text appear above the button and disappear after a while instead of a popup when the button is clicked. For example: Product has been added to cart