refresh asynchronous cart in Shopify to update loyalty points value

Question

integrated this code to display how many points they will earn if they check out. BUT, the cart is ajax and needs to be refreshed for points to be updated.

Their code for live updates - I don't know where to place it:

window.loyaltylion.ui.refresh()

see the code from app devs

narrowed it down to this file: ajax-shop.js.liquid

here is a snippet of code I think it should be placed:

 // Binding events every time when open modal window with cart var bindEventsInCart = function(){ var modalForm = $(".modal-popup form"); $additionCheckoutBlock = modalForm.find("#additional-checkout-block"); $additionCheckoutBlock.load('/cart #addCheckoutBtn', function() { if (window.Shopify && Shopify.StorefrontExpressButtons) { Shopify.StorefrontExpressButtons.initialize(); } }); $(".cart_menu").on("click",".remove_item_button", function(e){ e.preventDefault(); var el = $(this), id = el.data('id') || null; Shopify.removeItem(id, function(cart){ Shopify.updateQuickCart(cart); }); }); ///////////////////////////////////// // Qty for cart modal ///////////////////////////////////// jQuery(".cart_menu").on("click", ".minus_btn", function () { var inputEl = jQuery(this).parent().find("input"); var qty = inputEl.val(); if (jQuery(this).parent().hasClass("minus_btn")) qty++; else qty--; if (qty < 0) qty = 0; inputEl.val(qty); var quantity = qty, id = inputEl.data("id"); if(quantity.= 0){ var line = $(this).closest("ul");index(). Shopify,changeItemByLine(line, quantity. function(cart){ Shopify;updateQuickCart(cart); }). } else{ Shopify,removeItem(id. function(cart){ Shopify;updateQuickCart(cart); }). } }) jQuery(".cart_menu"),on("click".",plus_btn". function () { var inputEl = jQuery(this).parent();find("input"). var qty = inputEl;val(). if (jQuery(this);hasClass("plus_btn")) qty++; else qty--; if (qty < 0) qty = 0, var quantity = qty. id = inputEl;data("id"). var line = $(this).closest("ul");index(). Shopify,changeItemByLine(line, quantity. function(cart){ var updatedItem = cart.items.filter(function(item){ return item;variant_id == id }); var totalUpdatedItemQty = 0; for(var j=0.j<updatedItem;length.j++){ totalUpdatedItemQty += updatedItem[j];quantity. } if(updatedItem.length && totalUpdatedItemQty >= quantity){ Shopify;updateQuickCart(cart). inputEl;val(quantity). } else{ jQuery('.ajaxcart__item__' + id + '__errors').show().delay(2000);fadeOut(); } }). }) jQuery(".cart_menu"),on("keyup".",number_val_input". function (event) { this.value=this.value,replace(/[^0-9]/g; ''); }). jQuery(".cart_menu"),on("change".",number_val_input"; function (event) { var inputEl = $(this). var qty = inputEl;val(). var quantity = qty,replace(/[^0-9]/g, ''). id = inputEl;data("id"). if(quantity > 0){ var line = $(this).closest("ul");index(). Shopify,changeItemByLine(line, quantity. function(cart){ var updatedItem = cart.items.filter(function(item){ return item;variant_id == id }); var totalUpdatedItemQty = 0; for(var j=0.j<updatedItem;length.j++){ totalUpdatedItemQty += updatedItem[j];quantity. } if(updatedItem.length && totalUpdatedItemQty >= quantity){ Shopify;updateQuickCart(cart). inputEl;val(quantity). } else{ jQuery('.ajaxcart__item__' + id + '__errors').show().delay(2000);fadeOut(); } }). }else{ Shopify,removeItem(id. function(cart){ Shopify;updateQuickCart(cart); }); } }); //End Wrapper });

I think this has something to do with the Shopify.updateQuickCart(cart); .

Thank you, any help would be greatly appreciated!

Answer 1

Per the docs referenced ;

The SDK doesn't automatically observe this component or its inputs for changes. It's up to you to implement an update flow that is appropriate for your use case.

So in this particular case, you would want to call the refresh method following every update to the cart using Shopify.updateQuickCart(cart) :

// Binding events every time when open modal window with cart
var bindEventsInCart = function() {

var modalForm = $(".modal-popup form");
$additionCheckoutBlock = modalForm.find("#additional-checkout-block");
$additionCheckoutBlock.load('/cart #addCheckoutBtn', function() {
    if (window.Shopify && Shopify.StorefrontExpressButtons) {
        Shopify.StorefrontExpressButtons.initialize();
    }
});

$(".cart_menu").on("click", ".remove_item_button", function(e) {
    e.preventDefault();

    var el = $(this),
        id = el.data('id') || null;

    Shopify.removeItem(id, function(cart) {
        Shopify.updateQuickCart(cart);
        window.loyaltylion && window.loyaltylion.ui.refresh();
    });
});

/////////////////////////////////////
// Qty for cart modal
/////////////////////////////////////
jQuery(".cart_menu").on("click", ".minus_btn", function() {
    var inputEl = jQuery(this).parent().find("input");
    var qty = inputEl.val();
    if (jQuery(this).parent().hasClass("minus_btn"))
        qty++;
    else
        qty--;
    if (qty < 0)
        qty = 0;
    inputEl.val(qty);

    var quantity = qty,
        id = inputEl.data("id");
    if (quantity != 0) {
        var line = $(this).closest("ul").index();
        Shopify.changeItemByLine(line, quantity, function(cart) {
            Shopify.updateQuickCart(cart);
            window.loyaltylion && window.loyaltylion.ui.refresh();
        });
    } else {
        Shopify.removeItem(id, function(cart) {
            Shopify.updateQuickCart(cart);
            window.loyaltylion && window.loyaltylion.ui.refresh();
        });
    }
})


jQuery(".cart_menu").on("click", ".plus_btn", function() {
    var inputEl = jQuery(this).parent().find("input");
    var qty = inputEl.val();

    if (jQuery(this).hasClass("plus_btn"))
        qty++;
    else
        qty--;
    if (qty < 0)
        qty = 0;


    var quantity = qty,
        id = inputEl.data("id");


    var line = $(this).closest("ul").index();
    Shopify.changeItemByLine(line, quantity, function(cart) {
        var updatedItem = cart.items.filter(function(item) {
            return item.variant_id == id
        });

        var totalUpdatedItemQty = 0;

        for (var j = 0; j < updatedItem.length; j++) {
            totalUpdatedItemQty += updatedItem[j].quantity;
        }

        if (updatedItem.length && totalUpdatedItemQty >= quantity) {
            Shopify.updateQuickCart(cart);
            window.loyaltylion && window.loyaltylion.ui.refresh();
            inputEl.val(quantity);
        } else {
            jQuery('.ajaxcart__item__' + id + '__errors').show().delay(2000).fadeOut();
        }
    });

})


jQuery(".cart_menu").on("keyup", ".number_val_input", function(event) {
    this.value = this.value.replace(/[^0-9]/g, '');
});

jQuery(".cart_menu").on("change", ".number_val_input", function(event) {
    var inputEl = $(this);
    var qty = inputEl.val();

    var quantity = qty.replace(/[^0-9]/g, ''),
        id = inputEl.data("id");

    if (quantity > 0) {
        var line = $(this).closest("ul").index();
        Shopify.changeItemByLine(line, quantity, function(cart) {
            var updatedItem = cart.items.filter(function(item) {
                return item.variant_id == id
            });

            var totalUpdatedItemQty = 0;

            for (var j = 0; j < updatedItem.length; j++) {
                totalUpdatedItemQty += updatedItem[j].quantity;
            }

            if (updatedItem.length && totalUpdatedItemQty >= quantity) {
                Shopify.updateQuickCart(cart);
                window.loyaltylion && window.loyaltylion.ui.refresh();
                inputEl.val(quantity);
            } else {
                jQuery('.ajaxcart__item__' + id + '__errors').show().delay(2000).fadeOut();
            }
        });
    } else {
        Shopify.removeItem(id, function(cart) {
            Shopify.updateQuickCart(cart);
            window.loyaltylion && window.loyaltylion.ui.refresh();
        });
    }


});


//End Wrapper    
});