Leere Kategorien in der Navigation/Menuführung automatisch ausblenden

[PB79]

Moin in die Runde.

Ich habe diesen Beitrag im englischen Bereich gefunden:

https://community.shopify.com/c/technical-q-a/simple-theme-hide-empty-collections/m-p/633997

Es geht darum, Menüpunkte der Navigation automatisch im Frontend auszublenden wenn diese auf leere Kategorien verweisen.

Fallbeispiel:

Hauptmenü:

Home

Über uns

Autos kaufen

       Mercedes
       Audi
       VW
       Joghurtbecher (Leer*)
       BMW

*Man stelle sich nun vor man habe 400 Automarken. Um nun nicht jedes Mal manuell in der Navigation den Eintrag zur leeren Kategorie zu löschen um dann diese dann später wieder neu anzulegen, wenn der Bestand >=0 ist, soll folgende Codeabfrage eingebaut werden:

{% if collection.products_count != 0 %}
...
{% endif%}

Dieser Code muss irgendwie in die Liquid Datei welche für die Navigation verantwortlich ist

Würde sich eventuell jemand finden der mir damit bei meinem alten Porto Theme helfen würde?

[Finer]

@PB79 ich denke, diese Kondition wird nicht bei der Navigation funktionieren, da die Navigation in Shopify eine Link_list ist. Das heißt es werden nur URL aufgelistet (in der header.liquid), die du in den Einstellungen eingegeben hast und direkte Informationen über die Kategorien selbst. Daher wird die Abfrage „Anzahl Produkte“ gar nicht erst prüfen können, wie viele Artikel in einer Kategorie sind.

Eventuell muss man hier den link.type verwenden, um zu prüfen, ob es sich um eine Kategorieseite handelt und dann von mithilfe der link.option abfragen, ob die Anzahl der Produkte in der Kategorie nicht 0 (null) ist.

Das sollte dann folgendermaßen aussehen:

{% unless link.type == 'collection_link' and link.object.products_count == 0 %}
....
{% endunless %}

[PB79]

Hallo @Finer 

Vielen Dank für deine Nachricht.

Ich habe zwei Tage fruchtlos in meiner Einfältigkeit 'herumprobiert.

Für mein Porto Theme sehen die Liquid Dateien folgendermassen aus:

Es kann gut sein das nicht alles was benötigt wird in diesen zwei Dateien steht! Aber ich wollte den Beitrag hier nicht zum explodieren bringen 😉 Bei Bedarf lade ich den Rest noch hoch.

header.liquid

Spoiler

{% case settings.logo_width %}
{% when '' %}
{%- assign image_logo_width = '111' -%}
{%- assign image_logo_height = '' -%}
{% else %}
{%- assign image_logo_width = settings.logo_width -%}
{%- assign image_logo_height = '' -%}
{% endcase %}
{% capture logo_size %}{{ image_logo_width }}x{{ image_logo_height }}{% endcapture %}
{% case settings.logo_sticky_width %}
{% when '' %}
{%- assign image_logo_sticky_width = '71' -%}
{%- assign image_logo_sticky_height = '' -%}
{% else %}
{%- assign image_logo_sticky_width = settings.logo_sticky_width -%}
{%- assign image_logo_sticky_height = '' -%}
{% endcase %}
{% capture logo_sticky_size %}{{ image_logo_sticky_width }}x{{ image_logo_sticky_height }}{% endcapture %}
{% if settings.header_show_notice != blank %}
{% section 'header-notice' %}
{% endif %}
<header class="main-section-header">
<div class="header-container {{settings.header_design}} {% if settings.header_overlap != blank and template == 'index' %}header-overlap{% endif %} header-color-{{settings.header_text_color}} header-menu-style-{{settings.header_menu_style}} menu-color-{{settings.header_menu_style_color}} sticky-menu-color-{{settings.header_sticky_menu_style_color}} header-menu-{{settings.header_menu_align}}">
{%- assign name_header = 'header_' | append:settings.header_design -%}
{%- include name_header -%}
</div>
{% if settings.header_sticky_enable == 'enable'%}
<script type="text/javascript">
$(document).ready(function() {
var scrolled = false;
$(window).scroll(function() {
if(150 < $(window).scrollTop() && !scrolled){
var $headerContainer = $('.header-container');
if($('.main-section-header').height() != 0 ) {
$('.main-section-header').height($headerContainer.height());
}
$headerContainer.addClass('sticky-header');
$('.header-container .main-nav').addClass('container');
scrolled = true;
}
if(150>$(window).scrollTop() && scrolled){
$('.main-section-header').height('auto');
$('.header-container').removeClass('sticky-header');
$('.header-container .main-nav').removeClass('container');
scrolled = false;
}
})
});
</script>
{% endif %}
<div class="mobile-nav">
<span class="close-sidebar-menu"><i class="icon-cancel"></i></span>
<div id="navbar-toggle" class="bs-navbar-collapse skip-content">
{% include 'mobile-menu' %}
{% if settings.header_design == 'type3' %}
{% include 'mobile-menu', include_second_menu: true %}
{% endif %}
</div>
<div class="custom-block">
<div class="lang1">{{ settings.header_mobile_custom_text | split: '[lang2]' | first }}</div>
{% if settings.language_enable %}
<div class="lang2">{{ settings.header_mobile_custom_text | split: '[lang2]' | last }}</div>
{% endif %}
</div>
</div>
<div class="mobile-nav-overlay"></div>
</header>

header_type2.liquid

Spoiler

{% include 'header-top-bar' %}
<div class="header container">
{% include 'header-logo' %}
<div class="cart-area">
{% if settings.header_custom_text != '' %}
<div class="custom-block">
{% if settings.language_enable %}
<div class="lang1">{{ settings.header_custom_text | split: '[lang2]' | first }}</div>
<div class="lang2">{{ settings.header_custom_text | split: '[lang2]' | last }}</div>
{% else %}
{{ settings.header_custom_text | split: '[lang2]' | first }}
{% endif %}
</div>
{% endif %}
<div class="mini-cart">
{% include 'header-cart' %}
</div>
</div>
<div class="search-area show-icon-tablet">
<a href="javascript&colon;void(0);" class="search-icon"><span><i class="icon-search"></i></span></a>
{% include 'header-search' %}
</div>
<div class="menu-icon"><a href="javascript&colon;void(0)" title="Menu"><i class="fa fa-bars"></i></a></div>
</div>
<div class="header-wrapper">
<div class="main-nav wrapper-top-menu">
<div class="container">
<div id="main-top-nav" class="main-top-nav">
{% include 'header-logo-sticky' %}
<!-- Main Menu -->
{% include 'main-menu' %}
<!-- End Main Menu -->
<div class="mini-cart">
{% include 'header-cart' %}
</div>
</div>
</div>
</div>
</div>

Könntest du mir eventuell einen Tip geben wo ich deinen Code hier einfügen müsste?

Ich habe die Dateien auch als .txt angehängt.

Vielen Dank für deine Zeit.

Gruss

Phil

[PB79]

Hey @Klondev 🙂

Könntet du mir eventuell einen Tip geben, wo ich den Code von @Finer einfügen müsste? Habe die letzten Tage vergebens versucht das Problem alleine zu lösen. Würde mich über Hilfe sehr freuen.

Gruss

Phil

[PB79]

Würde sich eventuell doch noch jemand finden der mir bei meinem Problem helfen könnte?