ventana notificación producto añadido

[nachotci]

Hola a todos. Tengo una duda a ver si alguien puede o sabe decirme.

Cuando en el carrito de la compra añades o quitas un artículo, aparece una especie de Pop up emergente que te dice precisamente eso: "the product has been updated....".

En la página principal del front office en el símbolo del carrito he añadido (o quitado mejor dicho) la función donde se abría una ventana y me daba la opción de hacer el check out o seguir porque entiendo que esto ralentiza mucho el proceso de compra. Para ello, he borrado el código del archivo del archivo tutienda/themes/tu tema/modulos/shopping cart/modal.tpl. De esta forma consigo que el proceso de compra sea más rápido. Pero me falta algo: me falta que al cliente le de un aviso (tipo pop up) como cuando añades/quitas algo del carrito de la compra. Alguien podría darme una pista de cómo podría solucionarlo?

 

Muchas gracias

 

[w3bsolutions]

Acabo de comprobar que en la plantilla por defecto, al cambiar la cantidad de un producto en el carrito o borrarlo del carrito, no sale ninguna notificación. ¿Puedes poner una captura de a lo que te refieres, que es lo que quieres mostrar al añadir un producto al carrito?

P.S. No me queda muy claro... ¿has quitado un modal ("popup") para cambiarlo por otro?

[nachotci]

Hola. Efectivamente es lo que hice. Borré todo el contenido de modal.tpl que venía en mi tema específico dentro de la carpeta ps_shoppingcart. Una vez borrado consigo que cuando añado producto en el frontoffice, discretamente lo va añadiendo (cambia el importe de la cesta). Para avisar al cliente que lo está añadiendo he añadido el siguiente código dentro de modal: 

<div id="blockcart-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
     
        <h4 class="modal-title h6 text-xs-left" id="myModalLabel">{l s='Product successfully added to your shopping cart' d='Shop.Theme.Checkout'}</h4>
     
      
            </div>
          </div>
        </div>

       Con esto consigo que salga una ventanita (pop up) donde me dice que ha añadido correctamente los productos (que es lo que quiero)

Crees que sería posible que yo no tenga que darle a cerrar (a la x) y se cierre solo para ir más rápido con el proceso de compra?

 

Gracias por anticipado

[w3bsolutions]

35 minutes ago, nachotci said:

Crees que sería posible que yo no tenga que darle a cerrar (a la x) y se cierre solo para ir más rápido con el proceso de compra?

 

Eso lo tendrías que programar en el código Javascript que abre el modal, para que lo cierre también al cabo de X segundos. 

[nachotci]

Muchas gracias por el tip. Voy a probarlo. A ver si me veo capaz. 

[nachotci]

Hola w3bsolutions. No me veo capaz de encontrar ese archivo js. Qué tipo de comandos debo ver en el archivo? Cómo encuentro el archivo que abre este modal.tpl?

Muchas gracias de antemano

[w3bsolutions]

/modules/ps_shoppingcart/ps_shoppingcart.js

[nachotci]

Muchas gracias. Ya había acudido a este, pero no consigo ver ningún comando del estilo timeout o algo parecido. Te enseño el código para que veas:

gracias por anticipado

 

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

  var showModal = prestashop.blockcart.showModal || function (modal) {
    var $body = $('body');
    $body.append(modal);
    $body.one('click', '#blockcart-modal', function (event) {
      if (event.target.id === 'blockcart-modal') {
        $(event.target).remove();
      }
    });
  };

  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'));
        if (resp.modal) {
          showModal(resp.modal);
        }
      }).fail(function (resp) {
        prestashop.emit('handleError', { eventType: 'updateShoppingCart', resp: resp });
      });
    }
  );
});
 

[w3bsolutions]

1 minute ago, nachotci said:

Ya había acudido a este, pero no consigo ver ningún comando del estilo timeout o algo parecido.

Porque no existe... ahora mismo no se cierra solo. Eso es justamente lo que quieres implementar no?

[nachotci]

correcto. Pero no se cómo hacerlo. Me estoy volviendo loco viendo tutoriales....

 

[nachotci]

No se hacer que un modal cierre solo. Sólo conozco el comando "click" para cerrarlo en el aspa de cerrar.

 

[w3bsolutions]

Dame un rato te mando el código. 

[nachotci]

mil gracias

[w3bsolutions]

Añade esto al custom.js de tu plantilla:

var timeoutSeconds = 3;
var showModal = prestashop.blockcart.showModal || {};
prestashop.blockcart.showModal = function (modal) {
    var $body = $('body');
    $body.append(modal);
    $('#blockcart-modal').modal();
    $body.on('click', '#blockcart-modal', function (event) {
        if (event.target.id === 'blockcart-modal') {
            $(event.target.id).modal('hide');
        }
    });
    $('#blockcart-modal').on('hidden.bs.modal', function (event) {
        $('#blockcart-modal').remove();
    });
    setTimeout(function() {
        $('#blockcart-modal').modal('hide');
    }, timeoutSeconds * 1000);
};

en la primera línea ajustas los segundos (actualmente 3). 

Igual tienes que borrar tu caché después para verlo. 

Edited June 1, 2021 by w3bsolutions (see edit history)

[nachotci]

Perfecto. Eres un máquina. Podía haber nacido 100 veces y jamás lo hubiese encontrado.

Gracias