Pipeline Theme - Cart Icon in Menu

Solved
Highlighted
Tourist
9 0 0

Hi Community, 

 

I would like to display the cart with the number of items instead of the cart menu link (winkelwagen) with the amount in it.

Can seem to find the solution to this problem.

My store: http://by-maem.be/

 

Screenshot 2020-08-25 at 12.07.03.png

0 Likes
Highlighted
Shopify Partner
2292 502 650

Hey @nicodemuynck 

Can you share your header.liquid file code .

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
9 0 0
{%- assign transparent_header = false -%}
{%- if template contains 'collection' and collection.image and section.settings.transparent_collection -%}
  {%- assign transparent_header = true -%}
{%- elsif template contains 'article' and article.image and section.settings.transparent_article -%}
  {%- assign transparent_header = true -%}
{%- elsif template contains 'blog' and section.settings.transparent_blog -%}
  {%- assign transparent_header = true -%}
{%- elsif template contains 'page' and section.settings.transparent_page -%}
  {%- assign transparent_header = true -%}
{%- elsif template == 'index' and section.settings.transparent_home -%}
    {%- assign transparent_header = true -%}
{%- endif -%}

<style>
  .header--transparent:not(.header--sticky):not(.header--stuck) .nav--desktop .main-menu>li>a{
    color: {{ section.settings.transparent_text_color }};
  }
  .header--transparent:not(.header--sticky):not(.header--stuck) .icon{
    fill:  {{ section.settings.transparent_text_color }};
  }
  .header--transparent:not(.header--sticky):not(.header--stuck) .header-cart__bubble{
    background-color: {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.5 }};
  }
</style>


<div class="header__wrapper{% if transparent_header %} header--transparent{% endif %}"
  data-header-transparent="{{ transparent_header }}"
  data-header-sticky="{{ section.settings.header_sticky }}"
  data-section-id="{{ section.id }}"
  data-section-type="header">

  {% if section.settings.header_enable_account or section.settings.header_enable_search or section.settings.header_message != '' %}
  <div class="info-bar showMobile">
    <div class="wrapper text-center">

      {% if shop.customer_accounts_enabled and section.settings.header_enable_account %}
        <div class="header-account-link">
          <a href="{{ routes.account_url }}">
            <img src="{{ 'account.svg' | asset_url }}" alt="{{ 'customer.account.title' | t }}">
          </a>
        </div>
      {% endif %}

      {% if section.settings.header_message != '' %}
      <div class="header-message uppercase{% if section.settings.header_enable_account or section.settings.header_enable_search %} header-message--crowded{% endif %}">
        {% if section.settings.header_message_url != blank %}
          <a href="{{ section.settings.header_message_url }}">{{ section.settings.header_message | escape }}</a>
        {% else %}
          {{ section.settings.header_message | escape }}
        {% endif %}
      </div>
      {% endif %}

      {% if section.settings.header_enable_search %}
        <div class="header-search__wrapper">
          <div class="header-search">
            <form action="{{ routes.search_url }}" method="get" class="input-group search" role="search">
              {% if section.settings.search_only_products %}<input type="hidden" name="type" value="product">{% endif %}
              <input class="search-bar" type="search" name="q" title="{{ 'general.search.submit' | t }}">
              <button type="submit" class="btn search-btn" aria-label="{{ 'general.search.submit' | t }}"></button>
            </form>
          </div>
        </div>
      {% endif %}

    </div>
  </div>
  {% endif %}

  <header class="site-header {{ section.settings.height }}" role="banner">
    <div class="wrapper">
      <div class="nav--desktop">
        {% include 'nav-contents' with 'desktop' %}
      </div>
      <div class="nav--mobile">
        {% include 'nav-contents' with 'mobile' %}
      </div>
    </div>
  </header>
</div>


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": {{ shop.name | json }},
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
  {% endif %}
  "sameAs": [
    {{ settings.social_twitter_link | json }},
    {{ settings.social_facebook_link | json }},
    {{ settings.social_instagram_link | json }},
    {{ settings.social_pinterest_link | json }},
    {{ settings.social_google_link | json }},
    {{ settings.social_youtube_link | json }},
    {{ settings.social_vimeo_link | json }},
    {{ settings.social_tumblr_link | json }},
    {{ settings.social_fancy_link | json }}
  ],
  "url": {{ shop.url | append: page.url | json }}
}
</script>

{% if template.name == 'index' %}
  {% assign potential_action_target = shop.url | append: "/search?q={search_term_string}" %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": {{ shop.name | json }},
      "potentialAction": {
        "@type": "SearchAction",
        "target": {{ potential_action_target | json }},
        "query-input": "required name=search_term_string"
      },
      "url": {{ shop.url | append: page.url | json }}
    }
  </script>
{% endif %}

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image"
    },
    {
      "type":    "range",
      "id":      "logo_max_limit",
      "min":     5,
      "max":     495,
      "step":    5,
      "unit":    "px",
      "label":   "logo width",
      "default": 120
    },
    {
      "type": "link_list",
      "label": "Menu",
      "id": "main_menu_linklist"
    },
    {
      "type": "header",
      "content": "Meganav image"
    },
    {
      "type": "image_picker",
      "id": "meganav_image",
      "label": "Meganav image",
      "info": "500 x 800px .jpg max"
    },
    {
      "type": "url",
      "id": "meganav_link",
      "label": "Meganav Image Link"
    },
    {
      "type": "header",
      "content": "Sticky header"
    },
    {
      "type": "select",
      "id": "header_sticky",
      "options": [
        { "value": "static", "label": "Default header"},
        { "value": "sticky", "label": "Sticky header"},
        { "value": "scroll", "label": "Sticky header only when scrolling up"}
      ],
      "label": "Header behavior",
      "default": "static"
    },
    {
      "type": "header",
      "content": "Transparent header"
    },
    {
      "type": "checkbox",
      "id": "transparent_home",
      "label": "Enable on the home page",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "transparent_collection",
      "label": "Enable on collections",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "transparent_blog",
      "label": "Enable on the blog",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "transparent_article",
      "label": "Enable on articles",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "transparent_page",
      "label": "Enable on pages",
      "default": false
    },
    {
      "type": "color",
      "id": "transparent_text_color",
      "label": "Text and icons color",
      "default": "#ffffff"
    },
    {
      "type": "image_picker",
      "id": "transparent_logo",
      "label": "Alternate logo"
    },
    {
      "type": "header",
      "content": "Top Bar"
    },
    {
      "type": "text",
      "id": "header_message",
      "label": "Announcement text",
      "info": "45 characters or less recommended"
    },
    {
      "type": "url",
      "id": "header_message_url",
      "label": "Announcement link"
    },
    {
      "type": "checkbox",
      "id": "header_enable_account",
      "default": true,
      "label": "Show account link in header"
    },
    {
      "type": "checkbox",
      "id": "header_enable_search",
      "default": true,
      "label": "Show search in header"
    },
    {
      "type": "checkbox",
      "id": "search_only_products",
      "label": "Only search products"
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
Shopify Partner
2292 502 650

Hey @nicodemuynck 

I have checked your file code. again one file required for your task please share Snippets/ nav-contents. liquid file code.

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
9 0 0
<div class="mobile-wrapper">
  <div class="header-cart__wrapper">
    <a href="{{ routes.cart_url }}" class="CartToggle header-cart">
      {% include 'icon-cart' %}
      <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
    </a>
    <span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>
  </div>
  <div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
    {% if template.name == 'index' %}
      <h1 class="h4 header-logo">
    {% else %}
      <div class="h4 header-logo">
    {% endif %}
        <a href="{{ routes.root_url }}">
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
            <img src="{{ section.settings.logo | img_url: image_size }}"
                 class="logo--color"
                 srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                 alt="{{ section.settings.logo.alt | default: shop.name }}">
          {% else %}
            <span class="logo--text">{{ shop.name }}</span>
          {% endif %}
          {% if transparent_header and section.settings.transparent_logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
            <img src="{{ section.settings.transparent_logo | img_url: image_size }}"
                 class="logo--transparent"
                 srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
                 alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
          {% endif %}
        </a>
    {% if template.name == 'index' %}
      </h1>
    {% else %}
      </div>
    {% endif %}
  </div>
  <a href class="menuToggle header-hamburger" aria-label="{{ 'general.accessibility.menu' | t }}" {% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
    {% include 'icon-nav' %}
  </a>
</div>
<nav class="header-menu nav-wrapper">
  <ul class="main-menu accessibleNav" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
    {% if section.settings.main_menu_linklist %}
      {% assign main_menu_linklist = section.settings.main_menu_linklist %}
    {% else %}
      {% assign main_menu_linklist = 'main-menu' %}
    {% endif %}
    {% for link in linklists[main_menu_linklist].links %}
      {% include 'nav-item' %}
    {% endfor %}
    <li class="cart-text-link">
      <a href="{{ routes.cart_url }}" class="CartToggle">
        {{ 'layout.cart.title' | t }}
        <span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
      </a>
    </li>
  </ul>
</nav>
0 Likes
Highlighted
Shopify Partner
2292 502 650

Hey @nicodemuynck 

please add code Snippets/ nav-contents. liquid before backup the file.

<div class="mobile-wrapper">
  <div class="header-cart__wrapper">
    <a href="{{ routes.cart_url }}" class="CartToggle header-cart">
      {% include 'icon-cart' %}
      <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
    </a>
    <span class="header-cart__bubble cartCount{% if cart.item_count == 0 %} hidden-count{% endif %}"></span>
  </div>
  <div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
    {% if template.name == 'index' %}
      <h1 class="h4 header-logo">
    {% else %}
      <div class="h4 header-logo">
    {% endif %}
        <a href="{{ routes.root_url }}">
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
            <img src="{{ section.settings.logo | img_url: image_size }}"
                 class="logo--color"
                 srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                 alt="{{ section.settings.logo.alt | default: shop.name }}">
          {% else %}
            <span class="logo--text">{{ shop.name }}</span>
          {% endif %}
          {% if transparent_header and section.settings.transparent_logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
            <img src="{{ section.settings.transparent_logo | img_url: image_size }}"
                 class="logo--transparent"
                 srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
                 alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
          {% endif %}
        </a>
    {% if template.name == 'index' %}
      </h1>
    {% else %}
      </div>
    {% endif %}
  </div>
  <a href class="menuToggle header-hamburger" aria-label="{{ 'general.accessibility.menu' | t }}" {% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
    {% include 'icon-nav' %}
  </a>
</div>
<nav class="header-menu nav-wrapper">
  <ul class="main-menu accessibleNav" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
    {% if section.settings.main_menu_linklist %}
      {% assign main_menu_linklist = section.settings.main_menu_linklist %}
    {% else %}
      {% assign main_menu_linklist = 'main-menu' %}
    {% endif %}
    {% for link in linklists[main_menu_linklist].links %}
      {% include 'nav-item' %}
    {% endfor %}
    <li class="cart-text-link">
    {% comment %}
      <a href="{{ routes.cart_url }}" class="CartToggle">
        {{ 'layout.cart.title' | t }}
        <span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
      </a>
     {% endcomment %}

       <a href="{{ routes.cart_url }}" class="CartToggle header-cart">
        {% include 'icon-cart' %}
        <span class="cartCost {% if cart.item_count == 0 %} hidden-count {% endif %}">{{ cart.item_count }}</span>
      </a>
    </li>
  </ul>
</nav>

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 0 0

The text for the cart disappeared now, but no cart...

 

Screenshot 2020-08-25 at 15.06.05.png

0 Likes
Highlighted
Shopify Partner
2292 502 650

Hey @nicodemuynck,

Is it possible for you to give theme zip or staff access? I will check and provide a solution here so others can also take benefits.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 0 0

Yes.

Which mailaccount do I send the staff access to?

0 Likes
Highlighted
Shopify Partner
2292 502 650

This is an accepted solution.

Hey @nicodemuynck 

please add code Snippets/ nav-contents. liquid before backup the file.

<div class="mobile-wrapper">
<div class="header-cart__wrapper">
<a href="{{ routes.cart_url }}" class="CartToggle header-cart">
{% include 'icon-cart' %}
<span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
</a>
<span class="header-cart__bubble cartCount{% if cart.item_count < -1 %} hidden-count{% endif %}">{{ cart.item_count}}</span>
</div>
<div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
{% if template.name == 'index' %}
<h1 class="h4 header-logo">
{% else %}
<div class="h4 header-logo">
{% endif %}
<a href="{{ routes.root_url }}">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
class="logo--color"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
<span class="logo--text">{{ shop.name }}</span>
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.transparent_logo | img_url: image_size }}"
class="logo--transparent"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<a href class="menuToggle header-hamburger" aria-label="{{ 'general.accessibility.menu' | t }}" {% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
{% include 'icon-nav' %}
</a>
</div>
<nav class="header-menu nav-wrapper">
<ul class="main-menu accessibleNav" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
{% if section.settings.main_menu_linklist %}
{% assign main_menu_linklist = section.settings.main_menu_linklist %}
{% else %}
{% assign main_menu_linklist = 'main-menu' %}
{% endif %}
{% for link in linklists[main_menu_linklist].links %}
{% include 'nav-item' %}
{% endfor %}

{% comment %}
<li class="cart-text-link">
<a href="{{ routes.cart_url }}" class="CartToggle">
{{ 'layout.cart.title' | t }}
<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
</a>
</li>
{% endcomment %}
</ul>
<div class="header-cart__wrapper ">
<a href="{{ routes.cart_url }}" class="CartToggle">
{% include 'icon-cart' %}
<span class="cartCost cartCount {% if cart.item_count < -1 %} hidden-count {% endif %}">{{ cart.item_count}}</span>
</a>
</div>

</nav>

 

Add code assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width:768px) {
.nav--mobile .header-cart__bubble {
position: absolute;
top: 6%;
margin-top: -14px;
left: 17px;
width: 17px;
height: 17px;
border-radius: 15px;
background-color: #656565;
color: #fff;
text-align: center;
font-size: 10px;

}
}


@media only screen and (min-width:769px) {
.cartCount {
position: relative;
width: 17px;
height: 17px;
border-radius: 15px;
background-color: #656565;
color: #fff;
text-align: center;
font-size: 10px;
display: block !important;
bottom: 40px;
left: 19px;

}

.nav--desktop .header-cart__wrapper {
position: relative;
top: 55%;
z-index: 1000;
margin-top: 17px;
width: 25px;
height: 25px;
float: right;
left: 20px;
}
}

 

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes