Liquid, JavaScript, Themes
Hi an Alle,
wie kann man die Möglichkeiten bei "Sortieren nach" ausblenden bzw. kennt jemand die genauen Field-Beschreibungen zu den möglichen Sortiervarianten?
Ich bin der Lösung von diesem Beitrag gefolgt: https://community.shopify.com/c/technical-q-a/hide-certain-sort-by-options/td-p/1963769. Der Shopify Agent im Chat meinte auch , dass es funktionieren würde. Jetzt ist mein Vermutung, dass die genaue Feldbezeichnung nicht stimmt. Ich möchte gern "meistverkauft" und "Datum, alt zu neu", "Datum, neu zu alt" entfernen.
Habt ihr Ideen, Lösungen etc.?
Danke und liebe Grüße!
Hey @Lin22da
Danke für die Angaben und den Link und du sagst "Jetzt ist mein Vermutung, dass die genaue Feldbezeichnung nicht stimmt." Diese Feldbezeichnungen sind je nach Theme anders und ich konnte deiner Frage nicht entnehmen um welches Theme es sich handelt. Dawn?
Und hat der folgende Code Tipp nicht helfen können?
<style>
.facet-filters__field .select__select option[value="meistverkauft"],
.facet-filters__field .select__select option[value="Datum, alt zu neu"],
.facet-filters__field .select__select option[value="Datum, alt zu neu"],
.facet-filters__field .select__select option[value="Datum, neu zu alt"]{
display: none;
}
</style>
Da dein Shop auf Deutsch ist, hast du die korrekt Feldbezeichnungs-Sprache verwendet? Vielleicht gibst du Deutsch ein anstatt Englisch. Was sagst du dazu @Finer?
Man kann den obigen CSS-Code verwenden, um bestimmte Felder im Dropdown-Menü auszublenden. Der Code nutzt den CSS-Selektor, um die Optionen, die bestimmte value
-Attribute haben, auszuwählen und deren display
-Eigenschaft auf none
zu setzen, wodurch sie nicht angezeigt werden.
Allerdings gibt es einige Dinge zu beachten:
Browser-Kompatibilität: Das Ausblenden von <option>
-Elementen mit CSS funktioniert nicht in allen Browsern (z.B. in älteren Versionen von Internet Explorer). Wenn die Browser-Kompatibilität wichtig für den Shop ist, ist es möglicherweise besser, die Optionen direkt im Liquid-Code zu entfernen oder auszukommentieren, mit {% comment %}
und {% endcomment %}
Tags.
Platzierung des Styles: Es ist am besten, den CSS-Code innerhalb des <head>
-Tags in theme.liquid
zu platzieren. So wird sichergestellt, dass der Stil korrekt angewendet wird.
Testing: Nachdem du den CSS-Code hinzugefügt hast, den Shop in verschiedenen Browsern und Geräten testen, um sicherzustellen, dass die Optionen korrekt ausgeblendet werden.
Der bereitgestellte CSS-Code ist eine schnelle Möglichkeit, die Optionen auszublenden, aber wie bereits erwähnt, ist es möglicherweise die sicherste Methode, sie im Liquid-Code zu entfernen oder auszukommentieren, insbesondere wenn man sicherstellen möchte, dass die Optionen in allen Browsern ausgeblendet werden.
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
Hi @Gabe,
ja genau, es geht im Dawn. Ich habe es eben hinbekommen, dass meistverkauft und die anderen beiden Werte nicht mehr erscheinen, jedoch wird der Kasten neben "Sortieren nach" immer noch mit meistverkauft vorbefüllt, obwohl die Auswahlmöglichkeit nicht mehr existiert. Gibt es hierzu eine Möglichkeit?
Danke und viele Grüße!
Super, somit bist du einen Schritt weiter. Ich kann dir auch eine Lösung mit dem vorgefüllten Kasten auf Dropdown-Kopfebene geben wenn du mir genau beschreibst wie du das gelöst hast.
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
@Gabe
es war ein Zeichen zu viel drin bei best-selling und es funktioniert nur mit den englischen Field-ID´s. Die habe ich über den Entwicklermodus im Shop gefunden.
Der Code für die drei Möglichkeiten ist demnach:
<style>
.facet-filters__field .select__select option[value="created-ascending"],
.facet-filters__field .select__select option[value="best-selling"],
.facet-filters__field .select__select option[value="created-descending"]{
display: none;
}
</style>
VG
Ok es kann sein, dass wenn das Dropdown-Menü mit "meistverkauft" vorbefüllt ist, obwohl diese Option nicht mehr verfügbar ist, liegt dies wahrscheinlich daran, dass diese Sortierung im Code immer noch als Standardwert festgelegt ist. Man könnte somit den Standardwert ändern, um dieses Problem zu beheben.
Suche nach dem Dropdown-Menü-Code in der Datei, die das Dropdown-Menü für "Sortieren nach" enthält - kann im collection.liquid
sein.
Überprüfe, ob es einen selected
-Attribut gibt, das auf die Option "meistverkauft" (oder "best-selling" im Code) angewendet wird. Dies könnte so aussehen:
<option value="best-selling" selected>Meistverkauft</option>
Entferne das selected
-Attribut von dieser Option und füge es der Option hinzu, die du als Standardwert haben möchtest. Zum Beispiel, wenn du "Alphabetisch, A-Z" als Standard haben möchtest, sollte es so aussehen:
<option value="alpha-asc" selected>Alphabetisch, A-Z</option>
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
Die Attribute sind nirgendwo zu finden und es gibt kein reines collection.liquid. Das Einzige, was zu Sort_by zu finden ist, ist der Code hier unter main-list-collections.liquid:
"type": "select",
"id": "sort",
"options": [
{
"value": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.options__1.label"
},
{
"value": "alphabetical_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__2.label"
},
{
"value": "date_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__3.label"
},
{
"value": "date",
"label": "t:sections.main-list-collections.settings.sort.options__4.label"
},
{
"value": "products_high",
"label": "t:sections.main-list-collections.settings.sort.options__5.label"
},
{
"value": "products_low",
"label": "t:sections.main-list-collections.settings.sort.options__6.label"
}
],
"default": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.label"
Ich nehme an du machst das ganze in einer Testumgebung zuerst und nicht im Live-Theme? Und hat dir unsere Anleitung hier nicht weiterhelfen können? Wenn nein, warum nicht?
Es scheint als ob die Konfiguration für das "Sortieren nach"-Dropdown-Menü in einer JSON-artigen Struktur vorliegt. Der Eintrag "default": "alphabetical"
gibt an, dass der Standardwert für das Dropdown-Menü "alphabetical" ist.
Wenn "meistverkauft" (oder "best-selling") nicht in dieser Liste enthalten ist, kann es sein, dass es einige spezifische JavaScript-Funktionen gibt, die diesen Wert standardmäßig setzen.
Um dies zu überprüfen und möglicherweise zu ändern, die folgenden Schritte probieren:
JavaScript-Dateien überprüfen: Durchsuche die Theme-JavaScript-Dateien nach Schlüsselwörtern wie "sort" oder "best-selling", um zu sehen, ob ein Skript den Sortierwert manipuliert.
Liquid-Variablen überprüfen: Es könnte eine Liquid-Variable geben, die den aktuellen Sortierwert (z. B. current_sort_value
oder ähnlich) speichert. Suche in den Template- und Snippet-Dateien nach dieser oder ähnlichen Variablen.
Theme-Einstellungen überprüfen: Einige Themes bieten eine Benutzeroberfläche in den Theme-Einstellungen, um Standardwerte zu setzen, ohne den Code zu berühren. Überprüfen Sie die Einstellungen Ihres Themes, um zu sehen, ob es eine Option gibt, den Standard-Sortierwert festzulegen.
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