如何手动触发WooCommerce迷你购物车区块抽屉打开？

问题背景 #

在WooCommerce Blocks的MiniCartBlock代码（路径：plugins\woocommerce\packages\woocommerce-blocks\assets\js\blocks\mini-cart\block.tsx 第122行）中，有控制抽屉打开的核心函数：

const openMiniCart = () => {
    if ( addToCartBehaviour === 'open_drawer' ) {
        setSkipSlideIn( false );
        setIsOpen( true );
    }
};

同时代码通过原生JS监听了wc-blocks_added_to_cart事件来触发这个函数：

document.body.addEventListener(
    'wc-blocks_added_to_cart',
     openMiniCart
);

尝试用jQuery( document.body ).trigger( 'wc-blocks_added_to_cart' );触发事件但未成功，以下是可行的解决方法：

方法1：用原生JS触发事件 #

jQuery的trigger()触发的是jQuery封装的自定义事件，而代码里用的是原生addEventListener监听，两者不兼容。改用原生JS的dispatchEvent来触发原生事件：

document.body.dispatchEvent(new Event('wc-blocks_added_to_cart'));

如果需要传递额外数据（比如购物车项目信息），可以使用CustomEvent：

document.body.dispatchEvent(new CustomEvent('wc-blocks_added_to_cart', {
    detail: { /* 这里放需要传递的数据 */ }
}));

方法2：直接调用全局API打开抽屉 #

WooCommerce Blocks提供了全局的购物车操作API，直接调用更可靠，还能自动处理后台设置判断：

if (window.wc?.blocks?.cart?.openCartDrawer) {
    window.wc.blocks.cart.openCartDrawer();
}

方法3：确认后台设置是否正确 #

openMiniCart函数里有判断addToCartBehaviour === 'open_drawer'，如果后台没设置成这个选项，即使触发事件也不会打开抽屉。检查路径：
WooCommerce后台 → 产品 → 显示 → 添加到购物车行为 → 选择「打开迷你购物车抽屉」

内容的提问来源于stack exchange，提问作者Sajjad Hossain Sagor