I have created a popup (alternate for minicart) but it is way to slow / also it doesn't show on live site on the first instant click.

[dhansites]

Also using a lightbox is very slow (users dnt wait even 3 sec in this fast lane life)n it takes 10 sec after clicking on “add to cart” (which is way to slow again).
also people tend to use thier smartphones more then desktop (so mobile sites should be fast n faster)

---

import { cart } from ‘wix-stores’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
let product = $w ( ‘#dynamicDataset’ ). getCurrentItem ();
let idProduct = product . productReference ;
if ( idProduct === “f090b9be-cae3-d288-00f2-4d23edc82413” ) {
$w ( ‘#container3’ ). collapse ();
}

});

export function addtocart_click ( event ) {
let product = $w ( ‘#dynamicDataset’ ). getCurrentItem ();
let idProduct = product . productReference ;

**const**  products  = [{ 
    "productId" :  idProduct , 
    "quantity" :  1 
}] 

**if**  ( idProduct  ===  "f090b9be-cae3-d288-00f2-4d23edc82413" ) { 
    $w ( '#text461' ). hide (); 
} 

**if**  ( wixWindow . formFactor  ===  "Desktop" ) { 
    **let**  quantity  =  Number ( $w ( '#QuantityInput' ). value ); 

    $w ( '#shoppingCartIcon1' ). addToCart ( idProduct ,  quantity ) 
        . then (() => { 
           
            cart . showMiniCart (); 
        }) 
        . **catch** (( error ) => { 
            console . log ( error ); 
        }) 
}  **else**  { 

    cart . addProducts ( products ) 
        . then (() => { 
            $w ( '#mobileminicart' ). expand (); 

        }) 
        . **catch** (( error ) => { 
            console . log ( error ); 
        }) 
} 

}

function toggleFold ( index ) {
let $fold = $w ( ‘#fold’ + index );
let $arrowDown = $w ( ‘#arrowDown’ + index );
let $arrowRight = $w ( ‘#arrowRight’ + index );
// toggle the fold at the index
if ( $fold . collapsed ) {
$fold . expand ();
$arrowDown . show ();
$arrowRight . hide ();
} else {
$fold . collapse ();
$arrowDown . hide ();
$arrowRight . show ();
}
// collapse the other folds
[ 1 , 2 , 3 , 4 , 5 , 6 ]
. filter ( idx => idx !== index )
. forEach ( idx => {
$w ( ‘#fold’ + idx ). collapse ();
$w ( ‘#arrowDown’ + idx ). hide ();
$w ( ‘#arrowRight’ + idx ). show ();
})
}

export function headerBox1_click ( event ) {
toggleFold ( 1 );

}

export function headerBox2_click ( event ) {
toggleFold ( 2 );
}

export function headerBox3_click ( event ) {
toggleFold ( 3 );
}

export function headerBox4_click ( event ) {
toggleFold ( 4 );
}

export function headerBox5_click ( event ) {
toggleFold ( 5 );
}

export function headerBox6_click ( event ) {
toggleFold ( 6 );
}

---