Actualizar total de minicarrito de magento2 automaticamente

Este articulo nos explica como poder actualizar automáticamente el total de compra al cambiar la cantidad de productos en el minicarrito, esto funcionara mediante cambio manual y mediante un botón mas y menos (sin tomar en cuenta que el campo es tipo numérico para navegadores móviles).

1.- Lo primero que aremos sera sobreescribir a Magento_Checkout/view/frontend/web/template/minicart/item/default.html esto solamente haciendo una copia del archivo dentro de nuestro tema en la ruta correspondiente.

En este archivo agregaremos un link para sumar (+) y uno para restar (-) el numero de productos del minicarrito.

<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty">
<a class='mini_menos_qty' data-bind="attr: {
id: 'qty-change-'+item_id }"
href="#">-</a>
<a class='mini_mas_qty' data-bind="attr: {
id: 'qty-change-'+item_id }"
href="#">+</a>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>

2.- En el layout encargado de configurar el carrito de compras añadiremos una llamada a un nuevo archivo javascript updateCar.js esto en nuestro tema Magento_Checkout/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Magento_Checkout::js/updateCar.js"/>
</head>
<body>
</body>
</page>

3.- El archivo updateCar.js que agregaremos en Magento_Checkout/web/js/updateCa.js tendrá el siguiente código.

require(['jquery', 'Magento_Customer/js/customer-data', 'Magento_Customer/js/customer-data',
'jquery/jquery-storageapi'], function ($,customerData){$("#submitbutton").hide();
var form = $('form#form-validate');
var input_qty = $('input.qty');
form.find(input_qty).each(function (e){$(this).blur(function (){if (!form.valid()){return false;
} form.submit();
});
});
form.on('submit', function (e){e.preventDefault();
$.ajax({
url: form.attr('action'),data: form.serialize(),type: 'post',
showLoader: true,
success: function (response){var parsedResponse = $.parseHTML(response);
var itemSubtotal = $(parsedResponse).find("td[data-th=Subtotal]").text();
var itemSubtotalArray = itemSubtotal.split(" ");
if(itemSubtotalArray.length !== 1){itemSubtotalArray = itemSubtotalArray.filter(s => s.replace(/\s+/g, '').length !== 0);
console.log(itemSubtotalArray);
} else {
location.reload();
} //console.log(itemSubtotalArray.length);
var ajaxSubtototal = $('td[data-th=Subtotal]');
for (i=0; i <= itemSubtotalArray.length - 1; i++){ajaxSubtototal.eq(i).find('span.price').text(itemSubtotalArray[i]);
} $('body').trigger('processStart');
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
} });
});
$(document).ajaxComplete(function (event, xhr, settings){if (settings.url.indexOf("customer/section/load/?sections=cart") > 0){cartObj = xhr.responseJSON;
$('body').trigger('processStop');
var subtotal = $.parseHTML(cartObj.cart.subtotal);
$("tr.totals").find('span[data-th=Subtotal]').text($(subtotal).text());
$("tr.totals").find('td[data-th=Descuento]').find('.price').text(cartObj.cart.descuento);
$("tr.totals").find('td[data-th=Total]').find('.price').text(cartObj.cart.grand_total);
} });
});

4.- Al igual que el paso numero 1 sobreescribimos el archivo Magento_Checkout/view/frontend/web/js/sidebar.js colocando una copia en nuestro tema, lo que cambiaremos en este archivo sera la funcion _initContent() para hacer los ajustes siguientes:

  • Ocultaremos el botón Update que se mostraba al cambiar el valor de la caja de texto QTY.
events['keyup ' + this.options.item.qty] = function (event){// self._showItemButton($(event.target));
};
  • Agregaremos 2 eventos para los links +/- que añadimos en Magento_Checkout/view/frontend/web/template/minicart/item/default.html, estos eventos sumaran y restaran el atributo QTY para cada articulo agregado.
  • Ejecutaremos la función Update del minicarrito 2 segundos despues de dejar de presionar el link +/-.
events['click a.mini_menos_qty'] = function (event){event.stopPropagation();
var mini_time_event_car = null;
var id = $(event.target).attr('id').replace('qty-change-','');
if(mini_time_event_car != null){clearTimeout(mini_time_event_car);
} var qty = parseInt($('input[id=cart-item-'+id+'-qty]').val());
if(qty > 1){$('input[id=cart-item-'+id+'-qty]').val(qty-1);
mini_time_event_car = setTimeout(function(){$('input[id=cart-item-'+id+'-qty]').blur();
}, 2000);
} };
events['click a.mini_mas_qty'] = function (event){event.stopPropagation();
var mini_time_event_car = null;
var id = $(event.target).attr('id').replace('qty-change-','');
if(mini_time_event_car != null){clearTimeout(mini_time_event_car);
} var qty = parseInt($('input[id=cart-item-'+id+'-qty]').val());
$('input[id=cart-item-'+id+'-qty]').val(qty+1);
mini_time_event_car = setTimeout(function(){$('input[id=cart-item-'+id+'-qty]').blur();
}, 2000);
} 

Ahora al cambiar la cantidad de productos se actualizaran los totales sin necesidad de presionar el botón update.

Fecha: 09 Jul 2018 10:17 Hrs.

Acerca del autor

Sombrero de paja molder