刷新 Shopify 中的异步购物车以更新忠诚度积分值

Question

集成此代码以显示他们在结帐时将获得多少积分。 但是，购物车是 ajax，需要刷新才能更新积分。

他们的实时更新代码 - 我不知道在哪里放置它：

window.loyaltylion.ui.refresh()

查看应用程序开发人员的代码

将其缩小到这个文件： ajax-shop.js.liquid

这是我认为应该放置的代码片段：

 // 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 });

我认为这与Shopify.updateQuickCart(cart); .

谢谢，任何帮助将不胜感激！

Answer 1

根据引用的文档；

SDK 不会自动观察此组件或其输入的变化。 实施适合您的用例的更新流程取决于您。

因此，在这种特殊情况下，您需要在每次使用Shopify.updateQuickCart(cart)更新购物车后调用 refresh 方法：

// 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    
});