Basket content showing when hovering over basket icon

Hushhush
Excursionist
15 1 3

Hello guys. Would like to ask if someone has made the basket to show contents when hover over it . Really not sure which file to change. I know it needs an event listener and then grab all items from basket but really not sure how to do it. Any help is strongly appreciated. Thank you in advance ! 

Replies 6 (6)

anupam1607
Shopify Partner
16 1 0

Generally in the Dawan theme the cart icon file is `cart-icon-bubble.liquid` where you have to made changes. If you are using different theme then you might have to check the file where the cart icon data is stored. It will take some JavaScript to hide and show the icons, but if your theme is different then we might need to check first. 

Screenshot_2.png

<div class="empty-main cart-icon">{% render 'icon-cart-empty' %}</div>
<div class="count-main cart-icon">
{% render 'icon-cart' %}
<div class="cart-count-bubble">
    {%- if cart.item_count < 100 -%}
      <span aria-hidden="true">{{ cart.item_count }}</span>
    {%- endif -%}
    <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
  </div>
</div>

<script>
  $(document).ready(function(){
    $('.count-main').css('display','none');
      $('.empty-main').css('display','block');
    $(".empty-main").mouseenter(function () {
      $(this).css('display','none');
      $('.count-main').css('display','block');
    }
    $('.count-main').mouseleave(function(){
      $(this).css('display','none');
      $('.empty-main').css('display','block');
      
    }
  });
</script>
Hushhush
Excursionist
15 1 3

I am using Dawn . The code adds another icon next to the original one and doesn’t display cart content on hover . I am putting the javascript in the same file cart-icon-bubble.liquid is that correct. Really appreciate the help 

anupam1607
Shopify Partner
16 1 0

Let me know if it is not working or kindly accepted solution if it's worked.

 
Hushhush
Excursionist
15 1 3

It is not working buddy . Do u maybe have another idea on a different code maybe ? 

anupam1607
Shopify Partner
16 1 0

For hide and show this is what we can do. But if it is not working I'll review it and provide you a updated JavaScript.

Hushhush
Excursionist
15 1 3

Really appreciate your help .