Cart Counter: No Bubble + Align + Display 0

Store Design
,
1

IMG_5219.jpeg
IMG_5219.jpeg1170×574 31.8 KB

Hey, I used a code to change the default cart.

  2. .header__icons a#cart-icon-bubble {

  3. position: relative;

  4. }

  5. .header__icons a#cart-icon-bubble svg {

  6. opacity: 0;

  7. width: 60px !important;

  8. }

  9. .header__icons a#cart-icon-bubble:before {

  10. position: relative;

  11. content: ‘Cart’;

  12. }

  13. .header__icons a#cart-icon-bubble .cart-count-bubble {

  14. left: auto;

  15. right: 0px;

  16. }

  17. .header__icons a#cart-icon-bubble {

  18. text-decoration: none;

  19. }

Could anyone possibly help me remove the cart counter bubble, align the counter on the same horizontal line as my new cart and make the cart display 0 when it is empty?

pw: teunti

Thanks in advance for any time given.

2

If you want the cart bubble to be vertically aligned with the cart and look like this

cart.PNG

what you can do is to

  1. ‘Online Store’ → Themes → Edit Code

  2. Inside the assets folder locate the file ‘base.css’

  3. At the bottom of the file at this code

.header__icons a#cart-icon-bubble .cart-count-bubble{
   top: 50%;
   transform: translateY(-50%);
}

If you want to show 0 inside the bubble if the cart is empty you need to change the liquid code of the header.

1.Go to ‘Online Store’ → Themes → Edit Code

  1. Inside the sections folder locate the file ‘header.liquid’ or similar. You need to find the element with class name ‘header__icon–cart’ which looks something like this

        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
        {%- if cart != empty -%}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
          

        {%- endif -%}
  1. Remove the if statement ‘{%- if cart != empty -%}’ so it shows the bubble even if the cart is empty. It should look like this

        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
3

Hi @PoW8 ,

This is code updated. Please replace it
4

Hi @PoW8 ,

If you want to make the cart display 0 when it is empty? You need to insert script code before the tag in theme.liquid file

document.addEventListener('DOMContentLoaded', function() {
  const cartIconBubble = document.querySelector('#cart-icon-bubble');
  const svgIcon = cartIconBubble.querySelector('svg');
  const h = document.querySelector('.section-header');

  function checkSvgIconClass() {
    let cartCountBubbleEmpty = cartIconBubble.querySelector('.cart-count-bubble-empty');

    if (svgIcon?.classList.contains('icon-cart-empty')) {
      if (!cartCountBubbleEmpty) {
        cartCountBubbleEmpty = document.createElement('div');
        cartCountBubbleEmpty.className = 'cart-count-bubble';
        cartCountBubbleEmpty.innerHTML = '00 item';
        cartIconBubble.appendChild(cartCountBubbleEmpty);
      } else {
        cartCountBubbleEmpty.style.display = 'block';
      }
    } else {
      if (cartCountBubbleEmpty) {
        cartCountBubbleEmpty.style.display = 'none';
      }
    }
  }

  checkSvgIconClass();

  const observer = new MutationObserver(() => {
    checkSvgIconClass();
  });

  observer.observe(h, { attributes: true, attributeFilter: ['class'] });
});
5

Unfortunately it didn’t seem to do anything.