Shopify Cart value condition working only when we add new product
but not working when quantity change Actually I am hiding the Checkout button
form the cart page when the cart value below 499 and when the when the cart value above
the 499 checkout button show - it works but not work with quantity decrease or increas
{% if cart.total_price > 499 %}
<button type="button" id="wof_checkout_btn" class="button alt" style="padding-top: 15px;padding-bottom: 15px;width: 100%;font-size: 16px;background-color: #031663;color: #fff;border-color: #031663;">{{ 'cart.general.proceed_checkout' | t }}</button>
<button class="checkout-button button alt" name="checkout">{{ 'cart.general.proceed_checkout' | t }}</button>
{% if settings.use_additional_checkout_buttons and additional_checkout_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% else %}
<p>You need to spend more before you can proceed to checkout.</p>
{% endif %}
Hey @priya_thakur
Can you share your store url and let me try to check it?
Hey please check @Sonya_2025
Thanks for your collaboration. I’ve noticed that the current implementation of the code only allows for rendering at the initial page load. Since themes are different from each other, it’s essential to investigate the theme further and identify a solution that enables dynamic rendering as needed.
shopifyQuantity: function() {
String.prototype.getDecimals || (String.prototype.getDecimals = function() {
var e = (“” + this).match(/(?:.(\d+))?(?:eE)?$/);
return e ? Math.max(0, (e[1] ? e[1].length : 0) - (e[2] ? +e[2] : 0)) : 0
}), $(document).on(“change keyup”, “.custom-qty, .cart__popup-qty–input”, function() {
var t, e, o = $(this),
a = o.data(“vid”),
s = parseInt(o.val()),
i = (o.data(“format”), o.data(“price”)),
n = o.attr(“max”);
if (isNaN(s)) return 0;
n = isNaN(parseInt(n)) ? 9999 : parseInt(n);
console.log(n);
n < s && (console.log(“xxxx” + n), o.attr(“value”, n).val(n));
(s = n < s ? n : s) <= 0 && (o.closest(“tr”).remove(), o.closest(“li”).remove(), $(“.item-” + a).remove(), o.closest(“.cart__popup-item”).remove());
t = function(e) {
$(“.total .shopify-Price-amount, .order-total .shopify-Price-amount,.cart-subtotal .shopify-Price-amount,.basel-cart-subtotal .shopify-Price-amount,#cart_popup_total”).html(Shopify.formatMoney(e.total_price, theme.moneyFormat)), o.closest(“tr”).find(“.product-subtotal .shopify-Price-amount”).html(Shopify.formatMoney(i * s, theme.moneyFormat)), o.closest(“.cartpopup-item”).find(“.cart_popup-total .shopify-Price-amount”).html(Shopify.formatMoney(i * s, theme.moneyFormat)), $(“.cartCount”).html(e.item_count), baselThemeModule.gl_currency(), jQuery.get(“/cart?view=ship”, function(e) {
$(“.ship_nt_wrap”).html(e), setTimeout(function() {
baselThemeModule.gl_currency()
}, 300)
})
}, e = {
type: “POST”,
url: “/cart/change.js”,
data: “quantity=” + s + “&id=” + a,
dataType: “json”,
success: function(e) {
“function” == typeof t && t(e)
console.log(‘Total price after update:’, Shopify.formatMoney(e.total_price, theme.moneyFormat));
// Check total price and show/hide buttons
let formattedTotalPrice = Shopify.formatMoney(e.total_price, theme.moneyFormat);
console.log(‘Formatted total price:’, formattedTotalPrice);
if (parseFloat(formattedTotalPrice) >= 499) {
if (!$(“#cart-checkout”).is(“:visible”)) {
$(“#cart-checkout”).show(); // Show the checkout button
$(“#needtomorespend”).hide(); // Hide the limit message
console.log(‘Showing checkout button.’);
}
} else {
if ($(“#cart-checkout”).is(“:visible”)) {
$(“#cart-checkout”).hide(); // Hide the checkout button
$(“#needtomorespend”).show(); // Show the limit message
console.log(‘Hiding checkout button.’);
}
}
},
error: function(e, t) {
baselThemeModule.onError(e, t)
}
};
jQuery.ajax(e);
}), $(document).on(“click”, “.cart__popup-remove>a”, function(e) {
console.log(“checkout-btn remove”);
e.preventDefault();
var t = $(this).attr(“data-product_id”);
$(“#” + t).find(“.qty”).val(0).trigger(“change”)
}), $(document).on(“click”, “.plus, .minus”, function() {
console.log(“checkout-btn plus minus”);
//console.log($(“#cart-total-price”).attr(‘data-cart-total-price’));
console.log($(“#cartamount123”).val());
var e = $(this).closest(“.quantity”).find(“.qty”),
t = parseFloat(e.val()),
o = parseFloat(e.attr(“max”)),
a = parseFloat(e.attr(“min”)),
s = e.attr(“step”);
t && “” !== t && “NaN” !== t || (t = 0), “” !== o && “NaN” !== o || (o = “”), “” !== a && “NaN” !== a || (a = 0), “any” !== s && “” !== s && void 0 !== s && “NaN” !== parseFloat(s) || (s = 1), $(this).is(“.plus”) ? o && o <= t ? e.val(o) : e.val((t + parseFloat(s)).toFixed(s.getDecimals())) : a && t <= a ? e.val(a) : 0 < t && e.val((t - parseFloat(s)).toFixed(s.getDecimals())), e.trigger(“change”);
// After updating quantity, trigger change event to update cart and check total price
e.trigger(“change”);
})
}
used this but it only hide the checkout button on quantity change . and not working on price condition
it seems your code should work.
Are you make sure you have imported Jquery since you are using Jquery syntax?
If not, try use JS instead.
its only hide the checkout on qty change par not according to condition. I want to hide the checkout button according to the cart price based means below 499 hide checkout button
Have you published the latest theme code?
I am not quite understand you. As I can see. if qty changes, cart price changes also. so if qty works, cart price condition should also work. I can debug your code to make it work. I have sent a DM to you earlier.
{% if cart.total_price > 499 %}
<button type="button" id="wof_checkout_btn" class="button alt" style="padding-top: 15px;padding-bottom: 15px;width: 100%;font-size: 16px;background-color: #031663;color: #fff;border-color: #031663;">{{ 'cart.general.proceed_checkout' | t }}</button>
<button class="checkout-button button alt" name="checkout">{{ 'cart.general.proceed_checkout' | t }}</button>
{% if settings.use_additional_checkout_buttons and additional_checkout_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% else %}
<p>You need to spend more before you can proceed to checkout.</p>
{% endif %}please see this condition . you can easy understand.
after applying a JavaScript code, a button on the cart page was hidden, but there’s an issue with the price condition not working as expected. i implemented this code in javascript