Il carrello di aggiornamento di WooCommerce fa scomparire le frecce numeriche
Sto usando WooCommerce e nella pagina del carrello sto usando icone numeriche personalizzate.
Ho trovato il codice originale qui: https://codepen.io/komarovdesign/pen/PPRbgb
Funziona sul mio sito live qui: http://joshrodg.com/rbtest/shop/cart/ (potresti dover aggiungere qualcosa al pugno del carrello)
Il problema che ho è che quando faccio clic sul segno più o meno, quindi su "Aggiorna carrello", le icone dei numeri personalizzati scompaiono e tutto ciò che rimane è il numero.
Il mio jQuery ha questo aspetto:
$(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");
});
});
});
La mia ipotesi è che la pagina venga ricaricata con ajax quando si fa clic su "Aggiorna carrello" e dal momento che insertAfter
è già stato attivato, non viene attivato di nuovo.
Ho provato qualcosa aggiungendo:
$('.button').click(function(){}
e aggiungendo (usando .append
) del testo, pensando che quando il pulsante viene premuto il testo verrà visualizzato. Quasi funziona. Il testo viene visualizzato brevemente, quindi la pagina sembra aggiornarsi e il contenuto è sparito. Stavo pensando che potrei essere in grado di utilizzare questa logica per attivare il codice originale quando si fa clic sul pulsante di invio.
Il mio codice è simile a:
Prodotto Prezzo Quantità Subtotale <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>
Qualcuno può indicarmi la giusta direzione o far luce su questo? Mi sento come se mi mancasse qualcosa di semplice.
Grazie,
Josh
Risposte
Ok...
Il codice originale ha dovuto essere modificato un po ', ma un mio amico mi ha aiutato a farlo funzionare :-)
Funzionava immediatamente, ma quando abbiamo fatto clic su "Aggiorna carrello" si interrompeva, quindi abbiamo dovuto creare due funzioni per farlo funzionare.
Uno per le icone più e meno, l'altro per il pulsante stesso.
Volevamo che funzionasse immediatamente, prima che venga fatto clic sul pulsante "Aggiorna carrello", quindi è per questo che chiamiamo la qtyChange
funzione nel file document.ready
.
Quindi, abbiamo notato che quando si fa clic sul pulsante "Aggiorna carrello" WooCommerce rimuove e aggiunge nuovamente il numero inserito, quindi dobbiamo rieseguire il nostro script dopo aver fatto clic sul pulsante ... ma c'è un problema! Poiché, questo viene fatto usando ajax e la pagina in realtà non si ricarica, dobbiamo aspettare fino al completamento del processo ajax in modo che nulla venga eseguito troppo rapidamente. Se non avessi messo un timeout sul codice, i pulsanti non sarebbero stati visualizzati, che era il mio problema iniziale.
Ho anche avuto un problema in cui i pulsanti venivano visualizzati, ma le icone più e meno non facevano avanzare o diminuire il numero di input, che è a cosa serve l'altra funzione di timeout.
Infine, ho dovuto apportare un'altra modifica ... Ho aggiunto .remove
come selettore perché la X accanto a ciascun prodotto faceva scomparire anche le icone più e meno.
Tutto sommato ora funziona. Sarebbe stato più semplice se avessimo potuto modificare direttamente il codice WooCommerce, ma questo potrebbe essere cancellato con un aggiornamento del plugin, quindi questa è una soluzione migliore :-)
Ora il mio codice ha questo aspetto:
<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>
* Il timeout di 3000 sembra un po 'alto, ma ogni numero inferiore che ho provato produceva ancora vari problemi in cui qualcosa non funzionava. Tutto viene eseguito con quel timeout tutto il tempo, che è l'obiettivo :-) Devi solo sopportare un po 'di ritardo e tutto funziona!