Liquid, JavaScript, Themes
Hallo,
Ich habe folgendes Problem:
Ich möchte für meinen Onlineshop eine Farb und Material Sortierung erstellen. Die verfügbaren Drittanbieter Apps sprechen mich aber vom Design nicht an und bieten nicht die gewünschten technischen Möglichkeiten.
Durch meinen Dropshipping Händler bekomme ich die Produkte ohne die Variante „Farbe“. Das bedeutet ich kann sie nicht über den herkömmlichen Farbfilter filtern, jede Farbvariante ist bei mir ein individuelles Produkt. Durch die Live Synchronisation ist es aber auch nicht möglich das nachträglich hinzuzufügen. Es muss also anders gehen, nicht über die Farb-Filterfunktion.
Ich will die Filter über tags laufen lassen. Alle Produkte aus Baumwolle bekommen den Tag „Baumwolle“ und alle roten Produkte bekommen das Tag „Rot“
nun will ich zwei einzelne Filtergruppen machen. Im Onlineshop soll dann aber unter der Preis Sortierung nicht stehen „Tags“ sondern eben „Farbe“ und „Material“
beides sollen technisch gesehen aber reine Tag-Filter bleiben, nur der Kunde soll das nicht wissen. Tags sind da die einzige Option, aber es werden mir nicht alle Tags angezeigt. Es kommen einfach, alphabetisch geordnet, die ersten 1000 Tags (auch da fehlen komischerweise einige) und dann hört es nach dem Anfangsbuchstaben C einfach auf aufzulisten. Ich kann also die meisten Tags nichtmal verwenden, selbst wenn der ganze Rest funktionieren würde. Möglicherweise tauchen viele Farb-Tags nicht auf weil sie in synonymgruppen enthalten sind (blau, blaue, blauer, blaues (kleid usw..)
Dieses Problem wäre lösbar, auf die Synonymgruppen kann ich verzichten, auf die Tags allerdings nicht.
Hey @modace
Danke für die Angaben und darf ich dazu fragen wie die Produkte deines Dropshipping Händler im Shop eingebunden und ge-synced werden? Und wenn die importierten Produkte Farben haben, warum haben sie dann nicht die Option "Farbe" gleich mit dem Import?
Diese Option kann man eigentlich auch der Import CSV Datei den Spalten ergänzen vor dem Import falls das helfen würde. Man kann den Produkten in der CSV auch die Tags "Farbe" ergänzen vor dem Import, so dass die Tags für den Filter verwendet werden können. Aber du möchtest nicht dass unter der Preis Sortierung „Tags“ als Title steht sondern eben „Farbe“ und „Material“.
Das kannst loesen indem du ins Theme Code eingreifst, wie im collection.json
oder eine ähnliche Datei, die für die Anzeige des Produkt Grids verantwortlich ist. Füge einen Code wie den folgenden hinzu, um die Tags als Filter anzuzeigen. Der Code muss nur an die richtige Stelle im Code eingefügt werden, wahrscheinlich dort, wo die Filter angezeigt werden sollen. Das bitte zuerst in einer Testumgebung/Sandbox Theme testen:
<!-- Filter für Farbe -->
<div class="filter-group">
<h4>Farbe</h4>
<ul>
{% for tag in collection.all_tags %}
{% if tag contains 'Rot' or tag contains 'Blau' or tag contains 'Grün' %}
<li><a href="{{ collection.url }}?tag={{ tag }}">{{ tag }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
<!-- Filter für Material -->
<div class="filter-group">
<h4>Material</h4>
<ul>
{% for tag in collection.all_tags %}
{% if tag contains 'Baumwolle' or tag contains 'Leder' %}
<li><a href="{{ collection.url }}?tag={{ tag }}">{{ tag }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
Den Tag Limit umgehen:
Da du festgestellt hast, dass nicht alle Tags angezeigt werden, einen benutzerdefiniertes Code verwenden, um die Tags manuell hinzuzufügen, ohne auf die Shopify-Limitierung von 1000 Tags zu stoßen.
tags.json
, in der alle benötigten Tags aufgelistet werden.collection liquid
.
<script>
const tags = {
"colors": ["Rot", "Blau", "Grün"],
"materials": ["Baumwolle", "Leder"]
};
</script>
Wenn du es selber auf deiner Collection Page programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024