Announcement

Collapse
No announcement yet.

Cart Icon to open Mini Basket in footer bar

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Cart Icon to open Mini Basket in footer bar

    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

    HTML Code:
           <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
    Keyboard Not Found..... Press F1 to continue

    #2
    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.
    HTML Code:
    <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>
    HTML Code:
         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);
    Nicholas Adkins
    Technical Training Specialist / Miva, Inc.
    [email protected]
    https://www.miva.com/mivalearn

    Comment


      #3
      Hi Nick,

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

      Keyboard Not Found..... Press F1 to continue

      Comment

      Working...
      X