<a id="menu-cart-icon"
<?php if ($showMiniCart): ?>@click.prevent.stop="$dispatch('toggle-cart',{});"<?php endif ?>
class="relative outline-none focus:ring-blue-700 focus:ring-1"
href="<?= $escaper->escapeUrl($block->getUrl('checkout/cart/index')) ?>"
>
<span class="sr-only label">
<?= $escaper->escapeHtml(__('Cart')) ?>
</span>
<?= $heroicons->shoppingBagHtml('text-slate-800 hover:text-black w-8 h-8') ?>
<span x-text="cart.summary_count"
class="absolute top-0 right-0 hidden px-3 py-1 -mt-5 -mr-4 text-xs font-semibold leading-none text-center text-gray-700 uppercase transform translate-y-1/2 bg-green-200 rounded-full"
:class="{
'hidden': !cart.summary_count,
'block': cart.summary_count }"
></span>
</a>Instead of using the @click directive on the anchor tag, you can wrap the cart icon in a conditional check. If $showMiniCart is true , you show a button (or a div) that handles the toggle cart logic. If $showMiniCart is false , you show the anchor tag which navigates to the checkout/cart/index URL
lets say like this;
<?php if ($showMiniCart): ?>
<button
@click.prevent.stop="$dispatch('toggle-cart',{});"
class="relative outline-none focus:ring-blue-700 focus:ring-1"
>
<!-- ... rest of your cart icon and logic here ... -->
</button>
<?php else: ?>
<a id="menu-cart-icon"
class="relative outline-none focus:ring-blue-700 focus:ring-1"
href="<?= $escaper->escapeUrl($block->getUrl('checkout/cart/index')) ?>"
>
<!-- ... rest of your cart icon and logic here ... -->
</a>
<?php endif ?>
Here, you’re explicitly showing either a button (for toggling the cart) or an anchor tag (for navigating to the cart URL) based on the $showMiniCart condition. It separates the concerns and should prevent any interference between the JavaScript logic and the anchor tag’s navigation behavior.
Good luck 