Koszyk aktualizacji WooCommerce sprawia, że strzałki z cyframi znikają
Używam WooCommerce, a na stronie koszyka używam niestandardowych ikon liczbowych.
Znalazłem oryginalny kod tutaj: https://codepen.io/komarovdesign/pen/PPRbgb
Działa na mojej działającej witrynie tutaj: http://joshrodg.com/rbtest/shop/cart/ (być może będziesz musiał dodać coś do pięści wózka)
Problem polega na tym, że kiedy klikam plus lub minus, a następnie klikam „Aktualizuj koszyk”, niestandardowe ikony z numerami znikają i pozostaje tylko liczba.
Moje jQuery wygląda następująco:
$(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");
});
});
});
Domyślam się, że strona jest ładowana ponownie za pomocą Ajax, gdy kliknięto opcję „Aktualizuj koszyk”, a ponieważ insertAfter
została już uruchomiona, nie uruchamia jej ponownie.
Testowałem coś dodając:
$('.button').click(function(){}
i dołączając (używając .append
) jakiś tekst, myśląc, że po naciśnięciu przycisku tekst się pokaże. To prawie działa. Tekst pojawia się na krótko, po czym strona wydaje się odświeżać, a zawartość zniknęła. Pomyślałem, że mógłbym użyć tej logiki do uruchomienia oryginalnego kodu po kliknięciu przycisku przesyłania.
Mój kod wygląda następująco:
Cena produktu Ilość Suma częściowa <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>
Czy ktoś może wskazać mi właściwy kierunek lub rzucić na to trochę światła? Czuję, że po prostu brakuje mi czegoś prostego.
Dzięki,
Josh
Odpowiedzi
Dobrze...
Oryginalny kod musiał zostać nieco poprawiony, ale mój przyjaciel pomógł mi to uruchomić :-)
To działało po wyjęciu z pudełka, ale kiedy kliknęliśmy „Aktualizuj koszyk”, zatrzymywało się, więc musieliśmy utworzyć dwie funkcje, aby to zadziałało.
Jedna dla ikon plusa i minusa, druga dla samego przycisku.
Chcieliśmy, aby to zadziałało zaraz po wyjęciu z bramki, zanim zostanie kliknięty przycisk „Aktualizuj koszyk”, dlatego wywołujemy qtyChange
funkcję w document.ready
.
Następnie zauważyliśmy, że po kliknięciu przycisku „Aktualizuj koszyk” WooCommerce faktycznie usuwa i ponownie dodaje wprowadzoną liczbę, więc musimy ponownie wykonać nasz skrypt po kliknięciu przycisku ... ale jest haczyk! Ponieważ odbywa się to za pomocą Ajax, a strona w rzeczywistości nie jest przeładowywana, musimy poczekać, aż proces AJAX się zakończy, aby nic nie było wykonywane zbyt szybko. Gdybym nie ustawił limitu czasu w kodzie, przyciski nie pojawiałyby się, co było moim początkowym problemem.
Miałem również problem z wyświetlaniem przycisków, ale ikony plus i minus nie zwiększały ani nie zmniejszały liczby wejściowej, do czego służy druga funkcja limitu czasu.
Na koniec musiałem dokonać jeszcze jednej zmiany ... dodałem .remove
jako selektor, ponieważ X przy każdym produkcie powodował też znikanie ikon plusa i minusa.
W sumie teraz działa. Byłoby to prostsze, gdybyśmy mogli bezpośrednio zmodyfikować kod WooCommerce, ale mogłoby to zostać usunięte za pomocą aktualizacji wtyczki, więc jest to lepsze rozwiązanie :-)
Teraz mój kod wygląda następująco:
<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>
* Limit czasu 3000 wydaje się trochę za wysoki, ale każda mniejsza liczba, którą próbowałem, nadal powodowała różne problemy, w których coś nie działało. Wszystko odbywa się cały czas z tym limitem czasu, co jest celem :-) Wystarczy wytrzymać z małym opóźnieniem i wszystko działa!