Why does my dynamic account link work on mobile but not on desktop?

senkels
Excursionist
53 0 9

Hi everyone,

 

I would like to dynamically change the link of the "account" icon depending on wether an account is signed in or not. 

 

Somehow, this code does not work:

 

 

<div class="site-nav site-nav--icons">
  <div class="site-nav__icons">
      <a
        class="site-nav__link site-nav__link--icon small--hide"
        {%- unless customer -%}
        href="/account/login"
        {%- else -%}
        href="https://account.senkels.at"
        {%- endunless -%}
      >
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-user" viewBox="0 0 64 64"><path d="M35 39.84v-2.53c3.3-1.91 6-6.66 6-11.41 0-7.63 0-13.82-9-13.82s-9 6.19-9 13.82c0 4.75 2.7 9.51 6 11.41v2.53c-10.18.85-18 6-18 12.16h42c0-6.19-7.82-11.31-18-12.16z"/></svg>
        <span class="icon__fallback-text">
          {%- if customer -%}
            {{ 'layout.customer.account' | t }}
          {%- else -%}
            {{ 'layout.customer.log_in' | t }}
          {%- endif -%}
        </span>
      </a>

    {%- if section.settings.header_search_enable -%}
      <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-modal-open-search-modal js-no-transition{% if menu_alignment == 'center' or menu_alignment == 'center-split' %} medium-up--hide{% endif %}">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
        <span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
      </a>
    {%- endif -%}

    {%- if menu_alignment == 'left'
       or menu_alignment == 'left-center'
       or menu_alignment == 'right' -%}
      <button
        type="button"
        class="site-nav__link site-nav__link--icon js-toggle-slide-nav{% if menu_alignment == 'left' or menu_alignment == 'left-center' or menu_alignment == 'right' %} medium-up--hide{% endif %}{% if mobile_menu_style == 'thumb' %} hide{% endif %}">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
        <span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
      </button>
    {%- endif -%}

    {%- unless settings.cart_type == 'sticky' -%}
      <a href="{{ routes.cart_url }}"class="site-nav__link site-nav__link--icon site-nav__link--cart js-drawer-open-cart js-no-transition" aria-controls="CartDrawer" data-icon="{{ settings.cart_icon }}">
        <span class="cart-link">
          {%- if settings.cart_icon == 'cart' -%}
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 64 64"><path d="M14 17.44h46.79l-7.94 25.61H20.96l-9.65-35.1H3"/><circle cx="27" cy="53" r="2"/><circle cx="47" cy="53" r="2"/></svg>
            <style>
              .cart-has-items .site-nav__link--cart.site-nav__link--cart {
                background-color:{{ product.metafields.announcement.background_color.value }}; 
                color:{{ product.metafields.announcement.text_color.value }}
              }
            </style>
          {%- else -%}
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag" viewBox="0 0 64 64"><g fill="none" stroke="#000" stroke-width="2"><path d="M25 26c0-15.79 3.57-20 8-20s8 4.21 8 20"/><path d="M14.74 18h36.51l3.59 36.73h-43.7z"/></g></svg>
          {%- endif -%}
          <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
          <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}">
            <span class="cart-link__bubble-num" aria-hidden="true" style="color:{{ product.metafields.announcement.background_color.value }}">
              {{ cart.item_count }}
            </span>
          </span>
        </span>
      </a>
    {%- endunless -%}
  </div>
</div>

 

 

 

However, in this scenario, which is the mobile navigation, it works:

 

 

<div class="slide-nav__overflow{% if mobile_menu_style == 'thumb'%} slide-nav__overflow--thumb{% else %} slide-nav__overflow--slide{% endif %}">
  <nav class="slide-nav__wrapper">
    <ul id="SlideNav" class="slide-nav">
      {% comment %}
        Do not show hardcoded 'Home' link if it matches the first menu link
      {% endcomment %}
      {%- unless main_menu.links[0].url == routes.root_url -%}
        {% if template.name != 'index' %}
          <li class="slide-nav__item border-bottom">
            <a href="{{ routes.root_url }}" class="slide-nav__link">
              {{ 'general.drawers.home' | t }}
            </a>
          </li>
        {% endif %}
      {%- endunless -%}
      {%- for link in main_menu.links -%}
        {%- liquid
          assign link_index = forloop.index
          assign child_list_handle = link.title | handleize | append: link_index
          assign has_dropdown = false
          if link.links != blank
            assign has_dropdown = true
          endif
        -%}

        <li class="slide-nav__item">
          {%- if has_dropdown -%}
            <button
              type="button"
              class="js-toggle-submenu slide-nav__link"
              data-target="tier-2-{{ child_list_handle }}"
              data-level="1"
              {% if link.active or link.child_active %} data-active="true" {% endif %}>
              {{ link.title }}
              <span class="slide-nav__icon">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-right" viewBox="0 0 284.49 498.98"><path d="M35 498.98a35 35 0 0 1-24.75-59.75l189.74-189.74L10.25 59.75a35.002 35.002 0 0 1 49.5-49.5l214.49 214.49a35 35 0 0 1 0 49.5L59.75 488.73A34.89 34.89 0 0 1 35 498.98z"/></svg>
                <span class="icon__fallback-text">{{ 'general.drawers.expand_submenu' | t }}</span>
              </span>
            </button>
            <ul
              class="slide-nav__dropdown"
              data-parent="tier-2-{{ child_list_handle }}"
              data-level="2">
              <li class="slide-nav__item border-bottom">
                <div class="slide-nav__table">
                  <div class="slide-nav__table-cell slide-nav__return">
                    <button class="js-toggle-submenu slide-nav__return-btn" type="button">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-left" viewBox="0 0 284.49 498.98"><path d="M249.49 0a35 35 0 0 1 24.75 59.75L84.49 249.49l189.75 189.74a35.002 35.002 0 1 1-49.5 49.5L10.25 274.24a35 35 0 0 1 0-49.5L224.74 10.25A34.89 34.89 0 0 1 249.49 0z"/></svg>
                      <span class="icon__fallback-text">{{ 'general.drawers.collapse_submenu' | t }}</span>
                    </button>
                  </div>
                  <a href="{{ link.url }}" style="pointer-events: none; cursor: default" class="slide-nav__sublist-link slide-nav__sublist-header">
                    {{ link.title }}
                  </a>
                </div>
              </li>

              {%- for childlink in link.links -%}
                {%- liquid
                  assign has_sub_dropdown = false
                  assign grand_child_list_handle = childlink.title | handleize
                  assign grand_child_link_id = grand_child_list_handle | append: link_index
                  if childlink.links != blank
                    assign has_sub_dropdown = true
                  endif
                -%}

                <li class="slide-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                  {%- if has_sub_dropdown -%}
                    <button
                      type="button"
                      class="js-toggle-submenu slide-nav__link slide-nav__sublist-link"
                      data-target="tier-3-{{ grand_child_link_id }}"
                    >
                      {{ childlink.title }}
                      <span class="slide-nav__icon">
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          role="presentation"
                          class="icon icon-chevron-right"
                          viewBox="0 0 284.49 498.98"
                        >
                          <path d="M35 498.98a35 35 0 0 1-24.75-59.75l189.74-189.74L10.25 59.75a35.002 35.002 0 0 1 49.5-49.5l214.49 214.49a35 35 0 0 1 0 49.5L59.75 488.73A34.89 34.89 0 0 1 35 498.98z"/>
                        </svg>
                        <span class="icon__fallback-text">{{ 'general.drawers.expand_submenu' | t }}</span>
                      </span>
                    </button>
                    <ul class="slide-nav__dropdown" data-parent="tier-3-{{ grand_child_link_id }}" data-level="3">
                      <li class="slide-nav__item border-bottom">
                        <div class="slide-nav__table">
                          <div class="slide-nav__table-cell slide-nav__return">
                            <button type="button"
                              class="js-toggle-submenu slide-nav__return-btn"
                              data-target="tier-2-{{ child_list_handle }}">
                              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-left" viewBox="0 0 284.49 498.98"><path d="M249.49 0a35 35 0 0 1 24.75 59.75L84.49 249.49l189.75 189.74a35.002 35.002 0 1 1-49.5 49.5L10.25 274.24a35 35 0 0 1 0-49.5L224.74 10.25A34.89 34.89 0 0 1 249.49 0z"/></svg>
                              <span class="icon__fallback-text">{{ 'general.drawers.collapse_submenu' | t }}</span>
                            </button>
                          </div>
                          <a href="{{ childlink.url }}" style="pointer-events: none; cursor: default" class="slide-nav__sublist-link slide-nav__sublist-header">
                            {{ childlink.title }}
                          </a>
                        </div>
                      </li>
                      {%- for grandchildlink in childlink.links -%}
                        <li class="slide-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                          <a href="{{ grandchildlink.url }}" class="slide-nav__sublist-link">
                            {{ grandchildlink.title | escape }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- else -%}
                    <a href="{{ childlink.url }}" class="slide-nav__sublist-link">
                      {{ childlink.title | escape }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          {%- else -%}
            <a href="{{ link.url }}" class="slide-nav__link">
              {{ link.title }}
            </a>
          {%- endif -%}
        </li>
      {%- endfor -%}
      {%- if shop.customer_accounts_enabled -%}
        <li class="slide-nav__item medium-up--hide">
          <a
            class="slide-nav__link"
            {%- unless customer -%}
              href="/account/login"
            {%- else -%}
              href="https://account.senkels.at"
            {%- endunless -%}
          >
            {%- if customer -%}
              {{ 'layout.customer.account' | t }}
            {%- else -%}
              {{ 'layout.customer.log_in' | t }}
            {%- endif -%}
          </a>
        </li>
      {%- endif -%}

      {%- if section.settings.header_search_enable -%}
        <li class="slide-nav__item medium-up--hide">
          <a
            href="{{ routes.search_url }}"
            class="slide-nav__link js-modal-open-search-modal js-no-transition"
          >
            {{ 'general.search.title' | t }}
          </a>
        </li>
      {%- endif -%}

    </ul>
  </nav>
</div>
<script>
  document.querySelectorAll('.slide-nav__sublist-header').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // Prevents the link from being followed
  });
});

</script>

 

 

 

Does anyone have an idea, why it is working on mobile but not on desktop? 

 

Thanks in advance

Reply 1 (1)

ThePixelEdge
Shopify Partner
164 16 17

Hello @senkels
Your Requirement falls under cutom development and it requires a custom an dpaid development , let u sknow If you are open to discuss the same.

If helpful then please Like and Accept Solution .
Buy me A Coffee

Whatsapp :- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications


Connect with Us in Our DMs | teampixeledge@gmail.com