В тележке обновлений WooCommerce исчезают стрелки с цифрами
Я использую WooCommerce, а на странице корзины я использую значки с номерами.
Я нашел здесь исходный код: https://codepen.io/komarovdesign/pen/PPRbgb
Он работает на моем действующем сайте здесь: http://joshrodg.com/rbtest/shop/cart/ (возможно придется что-то добавить в корзину кулаком)
Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю плюс или минус, а затем нажимаю «Обновить корзину», значки пользовательских номеров исчезают, и все, что остается, это номер.
Мой jQuery выглядит так:
$(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");
});
});
});
Я предполагаю, что страница перезагружается с помощью ajax при нажатии кнопки «Обновить корзину», и, поскольку insertAfterона уже была запущена, она не запускает ее снова.
Я кое-что протестировал, добавив:
$('.button').click(function(){}и добавление (использование .append) некоторого текста, думая, что при нажатии кнопки текст будет отображаться. Это почти работает. Текст отображается на короткое время, затем страница, кажется, обновляется, и содержимое исчезает. Я думал, что смогу использовать эту логику для запуска исходного кода при нажатии кнопки отправки.
Мой код выглядит так:
Итого по количеству цен продукта <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>
Может ли кто-нибудь указать мне правильное направление или пролить свет на это? Я чувствую, что просто упускаю что-то простое.
Спасибо,
Джош
Ответы
ОК...
Исходный код пришлось немного подправить, но мой друг помог мне заставить это работать :-)
Он работал из коробки, но когда мы нажимали «Обновить корзину», он останавливался, поэтому нам пришлось создать две функции, чтобы это работало.
Один для значков плюса и минуса, другой для самой кнопки.
Мы хотели, чтобы это работало сразу же, до того, как будет нажата кнопка «Обновить корзину», поэтому мы вызываем qtyChangeфункцию в document.ready.
Затем мы заметили, что при нажатии кнопки «Обновить корзину» WooCommerce фактически удаляет и повторно добавляет числовой ввод, поэтому мы должны повторно выполнить наш скрипт после нажатия кнопки ... но есть загвоздка! Поскольку это делается с использованием ajax, а страница фактически не перезагружается, нам нужно дождаться завершения процесса ajax, чтобы ничего не выполнялось слишком быстро. Если бы я не установил тайм-аут в коде, кнопки не отображались бы, что было моей первоначальной проблемой.
У меня также была проблема, из-за которой кнопки отображались, но значки «плюс» и «минус» не увеличивали или не уменьшали входной номер, для чего предназначена другая функция тайм-аута.
Наконец, мне пришлось сделать еще одно изменение ... Я добавил .removeв качестве селектора, потому что X рядом с каждым продуктом также приводил к исчезновению значков плюса и минуса.
В общем, теперь все работает. Это было бы проще, если бы мы могли напрямую изменить код WooCommerce, но это могло бы быть уничтожено обновлением плагина, так что это лучшее решение :-)
Теперь мой код выглядит так:
<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 кажется немного большим, но каждое меньшее число, которое я пробовал, по-прежнему приводило к различным проблемам, когда что-то не работало. Все выполняется с этим таймаутом все время, что и является целью :-) Просто нужно смириться с небольшой задержкой, и все работает!