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");
});
});
});
내 생각 엔 "Update Cart"를 클릭하면 페이지가 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 타임 아웃은 약간 높은 것 같지만, 제가 시도한 모든 낮은 숫자는 여전히 무언가가 작동하지 않는 다양한 문제를 일으켰습니다. 모든 것이 항상 그 타임 아웃과 함께 실행됩니다. 이것이 목표입니다. :-) 약간의 지연 만 참 으면 모든 것이 작동합니다!