I want to create a sidebar shop cart. I use woocommerce and elementor for creating. first I use a cart icon and give it the class “shopcarticon”
then I create the shopcart box that contain items when the user add items to the cart. with the class “shopcartbox”. and a close button for shopcart box with the class “shopcartclose”.

I use WooCommerce Builder Templates shop cart widget in elementor in my shop cart box.

I use this css:

.shopcartbox {
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: -100%;
    z-index: 9999999999;
    transition: 0.3s;
    -ms-overflow-style: none;
    scrollbar-width: none;    
}
.shopcartbox.active {
    left: 0;
}
.no-scroll {
    overflow: hidden;
}
.shopcartbox::-webkit-scrollbar {
    display: none;
}

and i use this script for my sidebar cart:

<script>
    const shopcartbox = document.querySelector('.shopcartbox');
    const shopcarticon = document.querySelectorAll('.shopcarticon');
    const shopcartclose = document.querySelector('.shopcartclose');
    const body = document.body;

    shopcarticon.forEach((eachshopcarticon) => {
        eachshopcarticon.onclick = () => {
            shopcartbox.classList.add('active');
            body.classList.add('no-scroll'); // Disable background scroll
        }
    });

    shopcartclose.onclick = () => {
        shopcartbox.classList.remove('active');
        body.classList.remove('no-scroll'); // Enable background scroll
    };

    document.addEventListener('click', (event) => {
        if (!shopcartbox.contains(event.target) && !event.target.closest('.shopcarticon')) {
            shopcartbox.classList.remove('active');
            body.classList.remove('no-scroll'); // Enable background scroll
        }
    });

    shopcartbox.addEventListener('click', (event) => {
        event.stopPropagation(); // Prevent clicks inside the menu from propagating to the document
    });
</script>

the problem is: when the user add items to the cart, the cart isn’t add the items to the side cart with ajax and it should refresh the page to show the items. and also for removing the items, when the user click on remove an item, it refresh the page automatically instead of removing it with ajax. but in the default elementor menu cart everything works fine. how can I fix my custom shop cart?

I don’t know how to fix it.