How To Fix BeTheme Empty Minicart (Cache)

The issue of an empty minicart in BeTheme, particularly when using cache plugins like FlyingPress, can significantly impact the user shopping experience on your e-commerce site. This tutorial will guide you through fixing the empty minicart problem with BeTheme when using FlyingPress.

The issue often arises because cache plugins like FlyingPress cache the content of the minicart, which means that the dynamic updates from WooCommerce (such as adding products to the cart) might not be immediately reflected. As a result, users can see an outdated or empty minicart.

Step-by-Step Solution

Add Custom JavaScript to Force Refresh of Minicart:

You can add custom JavaScript to refresh the minicart content dynamically.

1. Go to BeTheme Options.
2. Navigate to Custom CSS & JS.
3. Add the code:

jQuery(function($) {
    var cartElement = $(".mfn-cart-holder");

    // Refreshing basket data based on new fragment
    function refreshCart(fragment) {
        var cartContent = fragment['div.widget_shopping_cart_content'];
        var cartCount = fragment['.header-cart-count'];
        var cartTotal = fragment['.header-cart-total'];

        // Updating cart information
        cartElement.find('.mfn-ch-content').html(cartContent);
        cartElement.find('.header-cart-count').replaceWith(cartCount);
        cartElement.find('.header-cart-total').replaceWith(cartTotal);
        $('.mfn-cart-holder').attr('aria-expanded', 'false');
    }

    // Sending an Ajax request to get a new fragment
    function getUpdatedCart() {
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'woocommerce_add_to_cart',
                current_cart: $('.header-cart-count').first().text()
            },
            success: function(response) {
                if (response === 'error') {
                    // Process the error if there was a problem adding the product to the cart
                    return;
                }
                $(document.body).trigger('refresh');
                refreshCart(response);
            }
        });
    }

    // Initiating cart updates on page load
    getUpdatedCart();

    $(document.body).on('refresh', function(e) {
        cart.refresh();
    });

    var cart = {
        refresh: function() {
            $.ajax({
                url: mfnwoovars.ajaxurl,
                data: {
                    'mfn-woo-nonce': mfnwoovars.wpnonce,
                    action: 'mfnrefreshcart'
                },
                type: 'POST',
                cache: false,
                success: function(response) {
                    $('.mfn-cart-holder .mfn-ch-content').html(response.content);
                    $('.mfn-cart-holder .mfn-ch-footer .mfn-ch-footer-totals').html(response.footer);
                    $('.mfn-cart-holder').removeClass('loading');
                    // side cart buttons
                    $('.mfn-ch-footer-buttons').show();
                }
            });
        }
    };
});

Conclusion

Fixing the empty minicart issue in BeTheme when using cache plugins like FlyingPress involves both adjusting cache settings and adding custom JavaScript to ensure dynamic updates. By following the steps outlined in this tutorial, you can provide a seamless shopping experience for your customers.

Additional Tips

• Regular Testing: Regularly test your site after making changes to ensure that everything works as expected.
• Consult Support: If the problem persists, consult with BeTheme support or FlyingPress support for further assistance