popup cart works incorrect bitrix

Question

I try to make popup cart, it's display incorrect, first it's display popup, and then update cart what I missed?

I tried this

<script>
    BIS.cartPopup = {
            init: function(container) {
                var cartPopupLink = $('.buttCart');
                var self = this;

                container.hide();

                cartPopupLink.on('click', function(e) {
                    e.preventDefault();
                    $.fancybox({
                        content: container,
                        afterLoad: function() {
                            container.show();
                        }
                    });
                })
            }
    }
        $(function() {
            BIS.cartPopup.init($('#popup-cart-wrapper'));
        })
</script>

here is a html

<div class="popup__overlay" id="popup-cart-wrapper">
    <div class="popup">
//cart inside
</div>

and here is a cart update code:

<script>
    if (!BIS.updateTopCart) {

        BIS.updateTopCart = {
            init: function() {
                ajax_block('.top-cart');
                ajax_load('.top-cart', '<?=$arResult['AJAX_CALL_ID']?>', $('.top-cart-form').serializeArray());
            }

        }
    }
</script>

Answer 1

You might need to move this AJAX code:

$(function() {
    BIS.cartPopup.init($('#popup-cart-wrapper'));
})

To the AJAX call back, which does it after the cart is updated:

BIS.updateTopCart = {
    init: function() {
        ajax_block('.top-cart');
        ajax_load('.top-cart', '<?=$arResult['AJAX_CALL_ID']?>', $('.top-cart-form').serializeArray());
        $(function() {
            BIS.cartPopup.init($('#popup-cart-wrapper'));
        })
    }
}