Kevin Bautista
Kevin Bautista

Reputation: 25

How to refresh mini cart content in Bigcommerce?

I modified the mini-cart (cart-preview.html) in stencil cornerstone theme, the problem is that when I add to cart or update the item quantity using utils.api.cart.itemUpdate(itemId, newQty, (err, response) => {}) the cart content does not update, and I have to manually refresh the entire page for the changes to appear.

I show the item details using the cart object provided by bigcommerce, eg:

<h1>{{cart.items[0].quantity}}</h1>

Upvotes: 0

Views: 573

Answers (1)

Nicki D
Nicki D

Reputation: 106

    if (cartId) {
    // Get existing quantity from localStorage if found
    if (utils.tools.storage.localStorageAvailable()) {
        if (localStorage.getItem('cart-quantity')) {
            quantity = Number(localStorage.getItem('cart-quantity'));
            $body.trigger('cart-quantity-update', quantity);
        }
    }

    // Get updated cart quantity from the Cart API
    const cartQtyPromise = new Promise((resolve, reject) => {
        utils.api.cart.getCartQuantity({ baseUrl: secureBaseUrl, cartId }, (err, qty) => {
            if (err) {
                // If this appears to be a 404 for the cart ID, set cart quantity to 0
                if (err === 'Not Found') {
                    resolve(0);
                } else {
                    reject(err);
                }
            }
            resolve(qty);
        });
    });

    // If the Cart API gives us a different quantity number, update it
    cartQtyPromise.then(qty => {
        quantity = qty;
        $body.trigger('cart-quantity-update', quantity);
    });
} else {
    $body.trigger('cart-quantity-update', quantity);
}

Upvotes: 1

Related Questions