onCartChanged not working

Ask the community
, ,
1

#onCartChanged
I’m trying to either hide or show certain text elements on my cart page based on if my cart is empty or not. For some reason, my variable ‘quantity’ is not being updated in the function.

//code from 'public/masterPage.js'
import wixStores from 'wix-stores';
let quantity = 10;

$w.onReady(function () {
    wixStores.onCartChanged((cart) => {
    quantity = cart.totals.quantity;
    console.log(quantity);
    });
});

export function getCart() {
    console.log("test");
 return quantity;
}

//code from cart page
import wixStores from 'wix-stores';
import {getCart} from 'public/masterPage.js';

$w.onReady(function () {
 let quantity = getCart();
    console.log(quantity);
  });

My cosole outputs:
10
test
10

2

I believe that the import statement should be:

import { getCart } from 'public/pages/masterPage';
3

I get the following error in my browser’s console “Cannot find module ‘public/pages/masterPage.js’ in ‘public/pages/kcvgx.js’”

In my site structure, the ‘masterPage.js’ file is directly in the public folder with no sub-folders

Furthermore, with the code I have used I know the import fucntion is working as the console is logging 10, test, 10 as mentioned.

4

@itsdjkcofficial Hmm, I might be on a different internal system (sorry).

I would say that it’s because the quantity didn’t change. The console.log() statements show that it starts at 10, and then after the change it’s still 10.

You can add some additional console.log statements with additional information to try to find what’s happening. You can make your console.log statements easier to understand by adding a description, like this:

console.log('some sort of description', value);

This will help you identify which console.log statement is displaying.

5

So I tried a couple of different things and realized that the ‘quantity’ value within the ‘onCartchanged’ is updating but it is not being able to pass outside of the function if that makes sense. If I print the ‘quantity’ from within the function it shows the correct quantity but if I print it from outside the ‘quantity’ shows as 10.

6

I tested out a similar global variable scenario and it worked fine, so I can’t really say what your issue is. Perhaps it’s not executing in the order that assume that is? I’m not sure what’s supposed to be ready first, the site or the page. It also might change depending on Preview vs. Live, or based on system or browser issues.

You might want to just call getCurrentCart() which should return the correct value.

7

@yisrael-wix
Finally got it to work. Thank you for your help!
I had to use both functions ’ getCurrentCart’ & ‘onCartChanged’ in the end.

Code on the cart page

import wixStores from 'wix-stores';
import { getCurrentCart } from 'backend/events.jsw';

//checks cart on page load
$w.onReady(async function () {
 const results = await getCurrentCart();
 let quantity = results.totals.quantity;
    console.log("this message appears from the getCurrentCart function" + quantity);
 if (quantity > 0) {
        $w("#text35").expand();
        $w("#box1").expand();
    } 

});
//checks cart when the user deletes items from the cart page itself
let quantity = 10;// random value

$w.onReady(function () {
    wixStores.onCartChanged((cart) => {
        quantity = cart.totals.quantity;
        console.log("this message appears from the onCartChanged function" + quantity);
 if (quantity > 0) {
            $w("#text35").expand();
            $w("#box1").expand();
        } 

    });

});

Code on backend/events.jsw

import wixStoresBackend from 'wix-stores-backend'
export function getCurrentCart() {
 return wixStoresBackend.getCurrentCart();
}