Tag basiertes Filtern mit Search & Discovery

[modace]

Guten Tag Liebe Community, 

Ich möchte eine Tag basierte Größenfilterung erstellen. Aus verschiedenen Gründen (Änderung im Design) kann ich nicht auf Drittanbieter Apps zurückgreifen. Aufgrund verschiedener Supplier, welche Produkte automatisch importieren und eine Änderung der Varianten nicht zulassen kann ich den Filter auch nicht direkt über die Größen-Variante laufen lassen. Es bleibt also wirklich nur der Tag filter. Problem: ich kann weder entscheiden, welche Tags ich dafür verwenden möchte (es werden einfach die ersten 1000 angezeigt und die manuelle Sortierung bringt da auch nichts) noch kann ich alle nicht benötigen Tags ausblenden. Der Größenfilter hätte demnach nicht einmal alle Größen drin und zusätzlich würden auch Tags, wie „Baumwolle, Leder“ angezeigt werden. 
ich habe über 6300 Produkte mit jeweils bis zu 30 verschiedenen Tags. Es ist also (auch mit Apps und Bulk editor) wirklich nicht zumutbar diese zu entfernen. Davon abgesehen brauche ich Sie für die Suchfunktion. Die einzige Lösung wäre also, das ganze per Code zu regeln. Ich nutze das Dawn Theme. Weiß jedoch nicht welchen Code, und noch viel wichtiger: wo genau ich ihn eintragen muss. Eine Unterstützung hierzu wäre nicht nur hilfreich sondern essenziell für mich, um eine gute Navigation für meine Kunden bereitzustellen. Aktuell kann ich nur übers Google Merchant Center verkaufen, keiner macht sich die Mühe in einem so großen Produktkatalog zu stöbern ohne zumindest seine gewünschte Größe anzugeben. Vielen vielen Dank im Voraus.

[Ben310]

Hey @modace 

Haben dir die vielen Threads nicht weiterhelfen können, wie z. B. hier und hier?

Um das umzusetzen, dass nur die relevanten Tags (Größen) gefiltert werden, musst du das mit Coding lösen. Stelle zu erste sicher, dass du Produkt-Tags für die Größen bereits angelegt hast, wie z. B. "Größe_S", "Größe_M", "Größe_L", etc. und alle konsistent in einem bestimmten Format benannt sind, sodass du sie im Code gezielt ansprechen kannst.

Im Theme Code suche nach der Datei main-collection-product-grid.liquid (oder so ähnlich, je nach Theme) und da musst du das Produkt-Raster für Sammlungen definieren. Dann eine Dropdown-Liste oder die Checkboxen erstellen, mit denen deine Kunden nach Größe filtern können, wie zum Beispiel:

<!-- HTML für den Größenfilter -->
<div class="size-filter">
    <label for="size-filter-select">Wähle eine Größe:</label>
    <select id="size-filter-select" onchange="filterBySize(this.value)">
        <option value="">Alle Größen</option>
        <option value="Größe_S">S</option>
        <option value="Größe_M">M</option>
        <option value="Größe_L">L</option>
        <option value="Größe_XL">XL</option>
        <!-- Weitere Größen hinzufügen -->
    </select>
</div>

<script>
    function filterBySize(selectedSize) {
        if (selectedSize) {
            window.location.href = window.location.pathname + '?filter.p.tag=' + selectedSize;
        } else {
            window.location.href = window.location.pathname;
        }
    }
</script>

Den Code an einer geeigneten Stelle in der Produktgitter-Datei einfuegen, wie z. B. vor der Produktliste, sodass der Filter über den Produkten angezeigt wird. Pass auf, dass du im Code oben die tatsächlichen Größen-Tags verwendest, die du in deinem Shop definiert hast. Wenn du z. B. "Größe_S" statt "S" als Tag hast, dann passe die option-Werte im Code an.

Viele in der Shopify-Community schlagen vor, Metafelder zu verwenden um benutzerdefinierte Filterkategorien zu erstellen, z. B. für Größen, ohne auf Tags angewiesen zu sein. So kannst du über das Menü in Einstellungen -> Metafelder -> Produkte neue Metafelder definieren und sie dann in deinem Shop als Filteroptionen anzeigen lassen​. Da du viele Produkte und Tags hast, sind Metafelder eine bessere Lösung, um eine saubere Filterung zu haben und irrelevante Tags wie "Baumwolle" oder "Leder" nicht anzuzeigen...