刷新 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    
});