Add ajax compatibility to Magento action buttoms

magento-xhrcart.js

/**
 * Add XHR compatibility to Magento action buttoms
 *
 * Author:
 *   Rafael Patro <[email protected]>
 *
 * Requirements:
 *   DOMParser HTML fixes
 *   jQuery Growl library
 *
 * Intallation:
 *   Install requirements
 *   Add a CMS Static Block applying the entire script below.
 *   Add a Widget to product list pages.
 *
 * License:
 *   GNU General Public License <http://www.gnu.org/licenses/>.
 */
;(function($) {
  XHRCart = function() {
    this.doc = null;
    this.response = null;
    this.selectors = ['.account-cart-wrapper'];
    this.messageTypes = ['error','warning','notice','success'];
    this.progressLoader = '<img src="/skin/frontend/rwd/default/images/opc-ajax-loader.gif" alt="progress" class="xhr-loader" />';
    this.callback = function(){};
  };

  XHRCart.prototype = {
    
    success : function(message) {
      $.growl.notice({'message':message});
    },
    
    notice : function(message) {
      $.growl.notice({'message':message});
    },
    
    error : function(message) {
      $.growl.error({'message':message});
    },
    
    warning : function(message) {
      $.growl.warning({'message':message});
    },
    
    clear : function() {
      $('.xhr-loader').remove();
    },
    
    progress : function() {
      console.log('XHRCart.progress');
      var _this = this;
      this.selectors.each(function(index){
        $(index).html(_this.progressLoader);
      });
    },
    
    loadBlocks : function() {
      console.log('XHRCart.loadBlocks');
      var _this = this;
      this.selectors.each(function(selector){
        $(selector).html($(_this.doc).find(selector).html());
      });
    },
    
    loadMessages : function() {
      console.log('XHRCart.loadMessages');
      if (typeof $.growl == 'function') {
        var _this = this;
        var message;
        var messages;
        if (messages = $(_this.doc).find('.messages')[0]) {
          this.messageTypes.each(function(type){
            if (message = $(_this.doc).find('.messages .' + type + '-msg')[0]) {
              var notify = new Function('elem', 'msg', 'return elem.' + type + '(msg);');
              notify(_this, message.textContent);
            }
          });
          if (typeof message == 'undefined') {
            this.notice(messages.textContent);
          }
        } else if (typeof coShippingMethodForm != 'undefined') {
          this.notice('Concluído!');
        } else {
          this.warning('Para calcular o frete, acesse o carrinho no topo do site.');
        }
      }
    },
    
    loadParser : function() {
      console.log('XHRCart.loadParser');
      var parser = new DOMParser();
      this.doc = parser.parseFromString(this.response, "text/html");
    },
    
    loadCallback : function() {
      console.log('XHRCart.loadCallback');
      if (typeof this.callback == 'function') {
        this.callback(this);
      }
    },
    
    load : function(response) {
      console.log('XHRCart.load');
      this.response = response;
      this.loadParser();
      this.loadBlocks();
      this.loadMessages();
      this.clear();
      this.loadCallback();
      return true;
    },
    
    send : function(elem) {
      console.log('XHRCart.send');
      var _this = this;
      var param = null;
      var url = elem;
      if (typeof url != 'string') {
        url = $(elem).attr('href');
        if (typeof url != 'string') {
          var formObj = $(elem).closest('form');
          url = formObj.attr('action');
          param = formObj.serialize();
        }
      }
      $.ajax({
        url: url.replace(/http:/, location.protocol),
        method: 'POST',
        data: param,
        beforeSend: function() {
          _this.progress();
        },
        success: function(response) {
          _this.load(response);
        }
      });
    }
  };
})(jQuery);

Listagem de Produtos

Exemplo de implementação da função ajax nos botões do catálogo, no tema RWD.

Importante! Desativar o redirecionamento automático para o carrinho nas configurações do Magento.

Opcional: Para exibir mensagens de notificação (sucesso, erro, etc), basta incluir antes a biblioteca jquery.growl.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/stylesheets/jquery.growl.css" media="all" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/javascripts/jquery.growl.js"></script>

Criar um bloco estático, com o conteúdo a seguir. E criar um widget, posicionando o bloco após o conteúdo (abaixo da página).

<script type="text/javascript" src="//cdn.rawgit.com/rafaelpatro/788e4051abe83f6119eb2a4b1d5800a6/raw/9e0ffcb8044a0328d1e0dfccf323e4d86e26811a/magento-xhrcart.js"></script>

<script type="text/javascript">
//<![CDATA[
(function(){

  // Catalog Product List: Indexing Products
  $j('.btn-cart').each(function(){
    var url = $j(this).attr('onclick');
    if (typeof url != 'undefined') {
      $j(this).attr('onclick', url.replace(/setLocation/, 'console.log'));
    }
  });

  // Catalog Product List: Add to Cart
  $j(document).on('click', '.btn-cart', function(evt){
    var onClick = $j(evt.target).closest('button').attr('onclick');
    if (typeof onClick != 'undefined') {
      var url = onClick.replace(/console\.log|[\(\)\'\']/g, '');
      var productId = onClick.replace(/.+(\/product\/[\d]+).+/, '$1');
      var addto = new XHRCart();
      addto.selectors = ['.header-minicart .skip-cart', '.btn-cart[onclick*="'+productId+'"]'];
      addto.send(url);
    }
  });

})();
//]]>
</script>

Carrinho de Compras

Exemplo de implementação ajax nos botões do carrinho, no tema RWD.

Opcional: Para exibir mensagens de notificação (sucesso, erro, etc), basta incluir antes a biblioteca jquery.growl.
Criar um bloco estático, com o conteúdo a seguir. E criar um widget, posicionando o bloco após o conteúdo (abaixo da página).

<script type="text/javascript" src="//cdn.rawgit.com/rafaelpatro/788e4051abe83f6119eb2a4b1d5800a6/raw/9e0ffcb8044a0328d1e0dfccf323e4d86e26811a/magento-xhrcart.js"></script>

<script type="text/javascript">
//<![CDATA[
(function($){

  var fixSubmitButtoms = function() {
    $('#shipping-zip-form button').attr('onclick', '');
    $('#co-shipping-method-form button[type=submit]').attr('type', 'button');
  };
  fixSubmitButtoms();

  // Checkout Cart: Shipping Estimate
  $('#shipping-zip-form button').attr('onclick', '');
  $(document).on('click', '#shipping-zip-form button', function(evt){
    if (coShippingMethodForm.validator && coShippingMethodForm.validator.validate()) {
      var shippingSelector = $('#co-shipping-method-form').length ? '#co-shipping-method-form' : '.shipping';
      var calculate = new XHRCart();
      calculate.selectors = ['.cart-totals', shippingSelector]; // Atualiza o bloco de cotações, e os totais.
      calculate.callback = fixSubmitButtoms;
      calculate.send(evt.target);
      return false;
    }
  });

  // Checkout Cart: Totals Update
  $(document).on('click', '#co-shipping-method-form button', function(evt){
    var totalsUpdate = new XHRCart();
    totalsUpdate.selectors = ['.cart-totals']; // Atualiza o bloco de totais
    totalsUpdate.callback = fixSubmitButtoms;
    totalsUpdate.send(evt.target);
    return false;
  });

  // Checkout Cart: Remove Item
  $(document).on('click', '.cart a.btn-remove', function(evt){
    var dataHref = $(evt.target).attr('href');
    $(evt.target).closest('tr').attr('data-href', dataHref);
    var itemAction = new XHRCart();
    itemAction.selectors = ['.cart tr[data-href="' + dataHref + '"]', '#co-shipping-method-form', '.cart-totals', '.account-cart-wrapper'];
    itemAction.callback = function() {
      fixSubmitButtoms();
      var cartHtml = $(itemAction.doc).find('#shopping-cart-table').html();
      if (typeof cartHtml != 'undefined') {
        $('#shopping-cart-table').html(cartHtml);
      }
    };
    itemAction.send(evt.target);
    return false;
  });

})(jQuery);
//]]>
</script>