Cart Icon to open Mini Basket in footer bar

[tammu]

I have created a fixed footer bar for mobile devices and I am trying to add cart icon that would open the sliding mini basket. The cart icon works in the header. But when I add the code below to the footer it just goes to the cart page instead of opening the mini basket. Below is my mark up

       <a href="https://&mvt:global:domain:name;/BASK.html" data-hook="open-mini-basket" aria-label="Open Mini-Basket">
        <span aria-hidden="true" class="pc-f-bag" data-hook="open-mini-basket"><i class="pc-cart-icon"></i><em class="pc-hide">Bag</em></span>
        <span class="pc-f-bag-count" data-hook="open-mini-basket mini-basket-count">(&mvte:global_minibasket:basket_count;)</span>
      </a>

I have added the data-hook="open-mini-basket" that is not opening the sliding mini basket. What I am missing?

Thanks

[Nick]

For the default Shadows framework the extensions.js has an event listener for the data-hook~="open-mini-basket" that is inside the data-hook="site-header" element.
So you can either add the data-hook="site-header" to the wrapper around the data-hook~="open-mini-basket" that you have or create a new event listener in the extensions.js file.

<div class="" data-hook="site-footer">
    <a href="https://&mvt:global:domain:name;/BASK.html" data-hook="open-mini-basket" aria-label="Open Mini-Basket"> <span aria-hidden="true" class="pc-f-bag" data-hook="open-mini-basket"><i class="pc-cart-icon"></i><em class="pc-hide">Bag</em></span> <span class="pc-f-bag-count" data-hook="open-mini-basket mini-basket-count">(&mvte:global_minibasket:basket_count;)</span> </a>
</div>

     document.querySelector('[data-hook="site-header"]').addEventListener('click', event => {
         if (!event.target.closest('[data-hook~="open-mini-basket"]')) {
          return;
         }
         toggleMenu(event, 'open');
     }, false);
    // Add something like this
     document.querySelector('[data-hook="site-footer"]').addEventListener('click', event => {
         if (!event.target.closest('[data-hook~="open-mini-basket"]')) {
          return;
         }
         toggleMenu(event, 'open');
     }, false);

[tammu]

Hi Nick,

Thanks and that worked great. I went with the data-hook="site-footer" option.