Basket content showing when hovering over basket icon

[Hushhush]

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 ! 

[anupam1607]

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. 

<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]

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]

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

[Hushhush]

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

[anupam1607]

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]

Really appreciate your help .