WooCommerce Güncelleme Sepeti sayı oklarının kaybolmasını sağlar
WooCommerce kullanıyorum ve alışveriş sepeti sayfasında özel numara simgeleri kullanıyorum.
Orijinal kodu burada buldum: https://codepen.io/komarovdesign/pen/PPRbgb
Canlı sitemde çalışıyor: http://joshrodg.com/rbtest/shop/cart/ (arabanın yumruğuna bir şey eklemeniz gerekebilir)
Karşılaştığım sorun, artı veya eksi işaretine tıkladığımda "Sepeti Güncelle" ye tıkladığımda, özel sayı simgeleri kayboluyor ve geriye kalan tek şey sayı.
JQuery'm şöyle görünüyor:
$(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");
});
});
});
Tahminimce, "Sepeti Güncelle" tıklandığında sayfa ajax ile yeniden yükleniyor ve insertAfter
zaten ateşlendiğinden, onu tekrar çalıştırmıyor.
Bir şeyi ekleyerek test ettim:
$('.button').click(function(){}
ve bir .append
metin ekleyerek (kullanarak ), düğmeye basıldığında metnin gösterileceğini düşünerek. Bu neredeyse işe yarıyor. Metin kısaca gösterilir, ardından sayfa yenilenmiş gibi görünür ve içerik kaybolur. Gönder düğmesi tıklandığında orijinal kodu ateşlemek için bu mantığı kullanabileceğimi düşünüyordum.
Kodum şöyle görünüyor:
Ürün Fiyat Miktar Ara Toplam <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>
Biri beni doğru yöne yönlendirebilir mi veya buna biraz ışık tutabilir mi? Basit bir şeyi kaçırıyormuşum gibi hissediyorum.
Teşekkürler
Josh
Yanıtlar
Tamam mı...
Orijinal kodda biraz değişiklik yapılması gerekiyordu, ancak bir arkadaşım bunu çalıştırmama yardımcı oldu :-)
Kutunun dışında çalışıyordu, ancak "Sepeti Güncelle" yi tıkladığımızda duracaktı, bu yüzden bunun çalışması için iki işlev oluşturmamız gerekiyordu.
Biri artı ve eksi simgeleri, diğeri düğmenin kendisi içindir.
Bunun, "Sepeti Güncelle" düğmesine tıklanmadan hemen önce çalışmasını istedik, bu nedenle içindeki qtyChange
işlevi document.ready
.
Ardından, "Sepeti Güncelle" düğmesine tıklandığında, WooCommerce'in sayı girişini gerçekten kaldırıp yeniden eklediğini fark ettik, bu nedenle düğmeye tıklandıktan sonra komut dizimizi yeniden çalıştırmamız gerekiyor ... ancak bir yakalama var! Bu ajax kullanılarak yapıldığından ve sayfa aslında yeniden yüklenmediğinden, hiçbir şeyin çok hızlı çalışmaması için ajax işleminin tamamlanmasını beklememiz gerekir. Koda bir zaman aşımı koymazsam, düğmeler görünmezdi, bu benim ilk sorunumdu.
Ayrıca, düğmelerin görünmesini sağladığım bir sorun vardı, ancak artı ve eksi simgeleri, diğer zaman aşımı işlevi için giriş numarasını ilerletmedi veya azaltmadı.
Son olarak, bir değişiklik daha yapmak zorunda kaldım ... .remove
Bir seçici olarak ekledim çünkü her ürünün yanındaki X artı ve eksi simgelerinin kaybolmasına neden oldu.
Sonuçta şimdi çalışıyor. Doğrudan WooCommerce kodunu değiştirebilseydik bu daha kolay olurdu, ancak bu bir eklenti güncellemesiyle silinebilir, bu yüzden bu daha iyi bir çözümdür :-)
Şimdi kodum şöyle görünüyor:
<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>
* 3000 zaman aşımı biraz yüksek görünüyor, ancak denediğim her düşük sayı hala bir şeyin çalışmadığı çeşitli sorunlar üretiyordu. Her şey her zaman bu zaman aşımı ile çalışır, hedef bu :-) Sadece biraz gecikmeye katlanmanız gerekiyor ve her şey çalışıyor!