Keranjang Pembaruan WooCommerce membuat panah angka menghilang
Saya menggunakan WooCommerce, dan di halaman keranjang saya menggunakan ikon nomor kustom.
Saya menemukan kode aslinya di sini: https://codepen.io/komarovdesign/pen/PPRbgb
Ini berfungsi di situs langsung saya di sini: http://joshrodg.com/rbtest/shop/cart/ (Anda mungkin harus menambahkan sesuatu ke tangan gerobak)
Masalah yang saya alami adalah ketika saya mengklik plus atau minus lalu mengklik "Perbarui Keranjang" ikon nomor kustom menghilang dan yang tersisa hanyalah nomornya.
JQuery saya terlihat seperti:
$(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");
});
});
});
Dugaan saya adalah halaman akan dimuat ulang dengan ajax saat "Perbarui Keranjang" diklik dan karena insertAftersudah diaktifkan, halaman tidak akan mengaktifkannya lagi.
Saya menguji sesuatu dengan menambahkan:
$('.button').click(function(){}dan menambahkan (menggunakan .append) beberapa teks, berpikir bahwa ketika tombol ditekan teks akan muncul. Ini hampir berhasil. Teks muncul sebentar, lalu halaman tampak segar dan konten hilang. Saya berpikir saya mungkin bisa menggunakan logika ini untuk mengaktifkan kode asli ketika tombol kirim diklik.
Kode saya terlihat seperti:
Jumlah Harga Produk 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>
Adakah yang bisa mengarahkan saya ke arah yang benar atau menjelaskan hal ini? Saya merasa seperti saya baru saja melewatkan sesuatu yang sederhana.
Terima kasih,
Josh
Jawaban
Baik...
Kode asli harus sedikit diubah, tetapi teman saya membantu saya membuat ini berfungsi :-)
Itu berfungsi di luar kotak, tetapi ketika kami mengklik "Perbarui Keranjang", itu akan berhenti, jadi kami harus membuat dua fungsi untuk membuat ini berfungsi.
Satu untuk ikon plus dan minus, yang lainnya untuk tombol itu sendiri.
Kami ingin ini bekerja langsung dari gerbang, sebelum tombol "Perbarui Keranjang" diklik, jadi itulah mengapa kami memanggil qtyChangefungsi di document.ready.
Kemudian, kami melihat bahwa ketika tombol "Perbarui Keranjang" diklik, WooCommerce benar-benar menghapus dan menambahkan kembali masukan nomor, jadi kami harus menjalankan kembali skrip kami setelah tombol diklik ... tetapi ada tangkapan! Karena, ini dilakukan dengan menggunakan ajax dan halaman sebenarnya tidak memuat ulang, kita perlu menunggu sampai proses ajax selesai sehingga tidak ada yang dieksekusi terlalu cepat. Jika saya tidak memberi batas waktu pada kode, maka tombol tidak akan muncul, yang merupakan masalah awal saya.
Saya juga memiliki masalah di mana saya mendapatkan tombol untuk muncul, tetapi ikon plus dan minus tidak membuat nomor input maju atau turun yang untuk fungsi batas waktu lainnya.
Akhirnya, saya harus membuat satu perubahan lagi ... Saya menambahkan .removesebagai pemilih karena tanda X di samping setiap produk juga menyebabkan ikon plus dan minus menghilang.
Semua dalam semua sekarang itu bekerja. Ini akan lebih sederhana jika kami dapat memodifikasi kode WooCommerce secara langsung, tetapi itu dapat terhapus dengan pembaruan plugin jadi ini adalah solusi yang lebih baik :-)
Sekarang kode saya terlihat seperti:
<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>
* Batas waktu 3000 tampaknya agak tinggi, tetapi setiap angka yang lebih rendah yang saya coba masih menghasilkan berbagai masalah di mana ada yang tidak berfungsi. Semuanya dijalankan dengan batas waktu itu sepanjang waktu, yang tujuannya :-) Hanya perlu menunggu dengan sedikit penundaan dan semuanya berfungsi!