El carro de actualización de WooCommerce hace que las flechas numéricas desaparezcan
Estoy usando WooCommerce y en la página del carrito estoy usando íconos de números personalizados.
Encontré el código original aquí: https://codepen.io/komarovdesign/pen/PPRbgb
Está funcionando en mi sitio en vivo aquí: http://joshrodg.com/rbtest/shop/cart/ (es posible que tenga que agregar algo al puño del carrito)
El problema que tengo es que cuando hago clic en el signo más o menos y luego en "Actualizar carrito", los íconos de números personalizados desaparecen y todo lo que queda es el número.
Mi jQuery se ve así:
$(function() { // Quantity $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
$('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = 999999;
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
});
Supongo que la página se vuelve a cargar con ajax cuando se hace clic en "Actualizar carrito" y, dado que insertAfterya se ha activado, no se vuelve a activar.
Probé algo agregando:
$('.button').click(function(){}y agregando (usando .append) algo de texto, pensando que cuando se presione el botón el texto se mostrará. Esto casi funciona. El texto se muestra brevemente, luego la página parece actualizarse y el contenido desaparece. Estaba pensando que podría usar esta lógica para disparar el código original cuando se hace clic en el botón Enviar.
Mi código se ve así:
Producto Precio Cantidad Subtotal <td class="product-remove">
<a href="http://joshrodg.com/rbtest/shop/cart/?remove_item=a1d0c6e83f027327d8461063f4ac58a6&_wpnonce=c58b0e5416" class="remove" aria-label="Remove this item" data-product_id="42" data-product_sku="">×</a> </td>
<td class="product-thumbnail">
<a href="http://joshrodg.com/rbtest/product/raw-pecan-pieces/"><img width="300" height="300" src="http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-300x300.jpg 300w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-150x150.jpg 150w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-600x600.jpg 600w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px"></a> </td>
<td class="product-name" data-title="Product">
<a href="http://joshrodg.com/rbtest/product/raw-pecan-pieces/">Raw Pecan Pieces</a> </td>
<td class="product-price" data-title="Price">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>27.56</bdi></span> </td> <td class="product-quantity" data-title="Quantity"> <div class="quantity"> <label class="screen-reader-text" for="quantity_5ff63bef1bbf0">Raw Pecan Pieces quantity</label> <input type="number" id="quantity_5ff63bef1bbf0" class="input-text qty text" step="1" min="0" max="" name="cart[a1d0c6e83f027327d8461063f4ac58a6][qty]" value="1" title="Qty" size="4" placeholder="" inputmode="numeric"> </div> </td> <td class="product-subtotal" data-title="Subtotal"> <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>27.56</bdi></span> </td>
</tr>
<tr>
<td colspan="6" class="actions">
<div class="coupon">
<label for="coupon_code">Coupon:</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code"> <button type="submit" class="button" name="apply_coupon" value="Apply coupon">Apply coupon</button>
</div>
<button type="submit" class="button" name="update_cart" value="Update cart" disabled="" aria-disabled="true">Update cart</button>
<input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="c58b0e5416"><input type="hidden" name="_wp_http_referer" value="/rbtest/shop/cart/"> </td>
</tr>
</tbody>
</table>
</form>
¿Alguien puede señalarme en la dirección correcta o arrojar algo de luz sobre esto? Siento que me estoy perdiendo algo simple.
Gracias
Josh
Respuestas
OK...
El código original tuvo que modificarse un poco, pero un amigo mío me ayudó a que esto funcionara :-)
Funcionaba desde el primer momento, pero cuando hacíamos clic en "Actualizar carrito" se detenía, así que tuvimos que crear dos funciones para que esto funcionara.
Uno para los iconos más y menos, el otro para el botón en sí.
Queríamos que esto funcionara desde el principio, antes de hacer clic en el botón "Actualizar carrito", por eso llamamos a la qtyChangefunción en document.ready.
Luego, notamos que cuando se hizo clic en el botón "Actualizar carrito", WooCommerce en realidad elimina y vuelve a agregar la entrada del número, por lo que tenemos que volver a ejecutar nuestro script después de hacer clic en el botón ... ¡pero hay una trampa! Dado que esto se hace usando ajax y la página en realidad no se está recargando, debemos esperar hasta que se complete el proceso de ajax para que nada se ejecute demasiado rápido. Si no puse un tiempo de espera en el código, los botones no aparecerían, que fue mi problema inicial.
También tuve un problema en el que aparecían los botones, pero los íconos más y menos no hicieron que el número de entrada avanzara o disminuyera, que es para lo que sirve la otra función de tiempo de espera.
Finalmente, tuve que hacer un cambio más ... Lo agregué .removecomo selector porque la X al lado de cada producto también hacía que desaparecieran los íconos más y menos.
Con todo, ahora está funcionando. Esto hubiera sido más simple si pudiéramos haber modificado el código de WooCommerce directamente, pero eso podría desaparecer con una actualización del complemento, por lo que esta es una mejor solución :-)
Ahora mi código se ve así:
<script>
function qtyChange() {
$('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input"); $('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = 999999;
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
}
function cartUpdate() {
$('button[name="update_cart"], .remove').click(function() { setTimeout(function(){ qtyChange(); }, 3000); setTimeout(function(){ cartUpdate(); }, 3000); }); } $(document).ready(function() {
qtyChange();
cartUpdate();
});
</script>
* El tiempo de espera de 3000 parece un poco alto, pero cada número más bajo que probé todavía producía varios problemas en los que algo no funcionaba. Todo se ejecuta con ese tiempo de espera todo el tiempo, que es el objetivo :-) ¡Solo tienes que aguantar un poco de retraso y todo funciona!