How to put an image loading when clicking on the add to cart button? ps 1.7

[sylarlocke]

 Hello, I have been looking carefully at the prestashop module "ps_shoppingcart" which is responsible for adding the products to the cart by ajax, but there is no ajax function in jquery or javascript that is responsible for calling the file. The file that the module has is "ps_shoppingcart.js" but it does not have that content. The question is that I would like to make a function in that ajax that loads an image, for example in the "beforesend" to display the image and then close it when it is done. The only thing I have managed to do is this script linked to an image just below the body so that it shows or not, the problem that being in document, it is executed in all the buttons that perform an ajax:

 

$ (". ajax_add_to_cart_button"). click (function () {
$ (document) .ajaxStart (function () {
$ ('# loader'). fadeIn ();
});
$ (document) .ajaxComplete (function () {
$ ('# loader'). fadeOut ();
});
});

 

[DARKF3D3]

Hi sylarlocke, did you find a solution?

Edited May 13, 2021 by DARKF3D3 (see edit history)

[fredecs]

You can du something like that:

$(document).ready(function(){

   prestashop.on(

        'updateCart',

        function (event) {

             ('# loader'). fadeIn ();

        }

   );

});

[Piotr3qx]

Hi

Are you looking at correct ps_shoppingcart.js file? My file contains code that displays modal.

In line 65 you have a post request to which you must add 4 lines of code so it looks like this 

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
        };
      }
      $('#loader').fadeIn(); // show loader on screen 
      if (event && event.resp && event.resp.hasError) {
        $('#loader').fadeOut(); // hide loader in case of some error
        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'));
        if (resp.modal) {
          $('#loader').fadeOut(); // hide loader before modal appearance
          showModal(resp.modal);
        }
      }).fail(function (resp) {
        $('#loader').fadeOut(); // hide loader in case of some error
        prestashop.emit('handleError', { eventType: 'updateShoppingCart', resp: resp });
      });
    }
  );

 

Edited August 29, 2021 by Piotr3qx (see edit history)