Code For Divi Mini Cart

To adjust the hover transitions and re-direct to cart page on cart icon click

Go to Divi > Integration > Add code to the <body>

add open <script> and closing </script>  tags

Click “Get the code” button bellow and paste it 

<script>

//paste between tags…

</script>

 

                    

window.addEventListener('DOMContentLoaded', 
    function(){
        // Change this to specify the time 
        // before close the cart on hover
        // in miliseconds 1 second = 1000ms
        const closeAfter = 1500;
        // Change this to specify click
        // sends you to cart page
        // possible values false / true
        const clickToCart = false;

        // Stop changing from this line down... 
        if( typeof divi_mini_cart_options === 'undefined'  ||  typeof etCore !== 'undefined' ){return;}
        const links = document.querySelectorAll('.mini-cart-info'),
        hoverState = (divi_mini_cart_options.hover && 'on' === divi_mini_cart_options.hover),
        fixedState = (divi_mini_cart_options.fixed && 'on' === divi_mini_cart_options.fixed),
        minicarts = document.querySelectorAll('.dmc-container');
        let closeCounter;
        let eventColision = false;
        let openCart = false;
        if(hoverState){
            divi_mini_cart_options.hover = 'off';
            links.forEach( item => {
                item.addEventListener('mouseenter', handleHover );
                item.addEventListener('mouseleave', handleLeave);
                item.addEventListener('click', handleClick );
            });
            minicarts.forEach( item => {
                item.addEventListener('mouseenter', handleCartHover );
                item.addEventListener('mouseleave', handleCartLeave );
            });
            document.addEventListener('click', function(e){
                if(!e.target.closest('.dmc-container') && !e.target.closest('.mini-cart-info')){
                    e.stopImmediatePropagation();
                    closeMinicarts();
                }
            });
            
        }
        function handleHover(e){
            e.stopImmediatePropagation();
            eventColision = true;
            setTimeout(function(){eventColision = false;},100);
            openMinicarts();
            clearTimeout(closeCounter);
        }
        function handleLeave(e){
        	closeCounter = setTimeout(closeMinicarts, closeAfter);
        }
        function handleClick(e){
            e.stopImmediatePropagation();
            if(eventColision){
                e.preventDefault();
                return;
            }else if(!clickToCart){
                e.preventDefault();
                clearTimeout(closeCounter);
                openMinicarts();

            }
        }
        function handleCartHover(){
            clearTimeout(closeCounter);
        }
        function handleCartLeave(){
            closeCounter = setTimeout(closeMinicarts, closeAfter);
        }
        function closeMinicarts(){
            minicarts.forEach( (item) => {
                if(!fixedState){
                    if(window.innerWidth < 600 ){
                        const elemRects = item.parentElement.getBoundingClientRect();
                        item.style.right = `${(window.innerWidth - elemRects.right)*-1 }px`;
                    }else{
                        item.style.right = '';
                    }
                }
                item.classList.remove('active');
                setTimeout(()=>{
                    item.style.display = 'none';
                    openCart = false;
                },300);
            });
        }
        function openMinicarts(){
            minicarts.forEach( (item) => {
                if(!fixedState){
                    if(window.innerWidth < 600 ){
                        const elemRects = item.parentElement.getBoundingClientRect();
                        item.style.right = `${(window.innerWidth - elemRects.right)*-1 }px`;
                    }else{
                        item.style.right = '';
                    }
                }
                item.classList.add('active');
                item.style.display = 'flex';
            });
        }

    }
);