Leere Kategorien in der Navigation/Menuführung automatisch ausblenden

PB79 · September 9, 2022, 5:55pm

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 · September 10, 2022, 4:37pm

@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 · September 13, 2022, 9:15am

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

{% 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 %}

[details=Show More]

{%- assign name_header = ‘header_’ | append:settings.header_design -%}

{%- include name_header -%}

{% if settings.header_sticky_enable == ‘enable’%}

[details=Show More]

$(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;

}

})

});

{% endif %}

{% include ‘mobile-menu’ %}

{% if settings.header_design == ‘type3’ %}

{% include ‘mobile-menu’, include_second_menu: true %}

{% endif %}

{{ settings.header_mobile_custom_text | split: ‘[lang2]’ | first }}

{% if settings.language_enable %}

{{ settings.header_mobile_custom_text | split: ‘[lang2]’ | last }}

{% endif %}

header_type2.liquid

{% include ‘header-top-bar’ %}

{% include ‘header-logo’ %}

{% if settings.header_custom_text != ‘’ %}

{% if settings.language_enable %}

{% else %}

{% endif %}

{% endif %}

{% include ‘header-cart’ %}

{% include ‘header-search’ %}

{% include ‘header-logo-sticky’ %}

{% include ‘main-menu’ %}

{% include ‘header-cart’ %}

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 · September 19, 2022, 10:47am

Hey @byteriver

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 · October 14, 2022, 7:50pm

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

Topic		Replies	Views
Shopify Dawn. Leere Kategorien ausblenden Technische Fragen & Antworten shopify-theme	3	19	August 27, 2023
How can I hide empty collections in my navigation menu? Store Design	11	45	September 14, 2022
How To Hide Empty Collections In Nested Navigation (Avenue Theme 2.0) Store Design	8	20	February 13, 2022
How to hide empty collections in nested navigation (Minimal theme) Store Design	7	20	August 31, 2022
Hide sale-link in navigation linked to a collection when collection is empty Store Design menu	6	43	February 16, 2023

Leere Kategorien in der Navigation/Menuführung automatisch ausblenden

Related topics