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
