Liquid, JavaScript, Themes
Moin,
mein vorerst letzter Punkt auf meiner To-do-Liste: Die Sortierung im Katalog.
Ich möchte die voreingestellte Reihenfolge ändern und auch einige Optionen weglassen.
Mein Theme ist Impulse.
Gefunden habe ich die Sortierung in der list-collections-template.liquid -> wie ändere ich die Reihenfolge und die Optionen (?) in:
Beliebtheit
Höchster Preis
Niedrigster Preis
Neueste
Relevanz
Vielen Dank schon einmal und Liebgruß
Christina
Gelöst! Zur Lösung
Erfolg.
Ja, das wirst du mit den Impulse Theme Entwickler besprechen müssen (oder im Forum ganz unten verlinkt posten). Im Grunde ist der verantwortlich Sorting Code etwas wie folgendes, nur arbeiten drittanbieter Themes wie Impulse etwas anders:
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<select>
{%- for option in collection.sort_options %}
<option
value="{{ option.value }}"
{%- if option.value == sort_by %}
selected="selected"
{%- endif %}
>
{{ option.name }}
</option>
{% endfor -%}
</select>
{
"collection": {
"default_sort_by": "title-ascending",
"sort_by": "",
"sort_options": [
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop"
]
}
}
Output ist folgender Code den man ändern möchte:
<select>
<option
value="manual"
>
Featured
</option>
<option
value="best-selling"
>
Best selling
</option>
<option
value="title-ascending"
selected="selected"
>
Alphabetically, A-Z
</option>
<option
value="title-descending"
>
Alphabetically, Z-A
</option>
<option
value="price-ascending"
>
Price, low to high
</option>
<option
value="price-descending"
>
Price, high to low
</option>
<option
value="created-ascending"
>
Date, old to new
</option>
<option
value="created-descending"
>
Date, new to old
</option>
</select>
Durch den collection object, kannst du auf Folgendes zugreifen:
sort_options
Attribute.sort_by
Attribute.default_sort_by
Attribute.Du kannst die verfügbaren Optionen in einem <select>
Element outputten, damit die Kunden ihre Auswahl treffen können, und du kannst den Selektor auf der Grundlage der aktuellen und der Standardoptionen initialisieren. Wenn eine neue Auswahl getroffen wird, solltest du JavaScript verwenden, um den URL-Parameter anzuhängen und die Seite zu aktualisieren.
Im Folgenden findest du ein einfaches Beispiel für einen Sortierreihenfolge-Selektor und das dazugehörige Javascript:
<select id="sort-by">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
<script>
Shopify.queryParams = {};
// Preserve existing query parameters
if (location.search.length) {
var params = location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var keyValue = params[i].split('=');
if (keyValue.length) {
Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
}
}
}
// Update sort_by query parameter on select change
document.querySelector('#sort-by').addEventListener('change', function(e) {
var value = e.target.value;
Shopify.queryParams.sort_by = value;
location.search = new URLSearchParams(Shopify.queryParams).toString();
});
</script>
Somit empfehle ich das entweder mit den Impulse Theme Entwickler zu besprechen oder mit einem Experten. Du kannst deine Frage gerne in unserem Design Forum auf Englisch stellen, samt befristeter Vorschaulink zu einem Beispiel so dass die Experten das schneller analysieren können.
VG,
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
Hey Christina! @Hallo_Christina
Diese Sortierung kenne ich nicht, mit Einträge wie "Sortieren [I]", "Relevanz", "Beliebtheit" usw.
Darf ich fragen wer das für dich eingerichtet hat? Die Liste oder den Code dürftest du in der collection-template.liquid finden.
VG,
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
Moin Gabe,
die Sortierung war voreingestellt, ich habe das lediglich etwas anders in der Sprachdatei übersetzt. Den Shop richte ich ansonsten so gut es geht selber ein.
Ich glaube die Sortierung in der list-collections-template.liquid gefunden zu haben (siehe Screenshot), bin mir aber unsicher, ob ich das einfach so verändern kann. Kann ich den Code hier irgendwie anders darstellen als ein Screenshot zu machen?
Liebgruß
Christina
Hey Christina! @Hallo_Christina
Nicht nötig. Mach doch mal das folgende: in einer Kopie des Themes gehe in die gleiche Datei und rangiere einfach die Code Blocks in deinem Screenshot rauf und runter je nach Bedarf und schaue ob die Sortierung dann im Frontend der Theme Kopie so ist wie du sie haben möchtest. Wenn ja, dann mach dasselbe im Live Theme. 😉
VG,
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
Moin Gabe,
hab da ein bisschen rumprobiert und egal, was ich mache -> es ändert überhaupt nichts am angezeigten Ergebnis. So als würde die Datei nicht direkt darauf zugreifen. Selbst komplettes Löschen liefert kein Ergebnis.
Ich hatte auch gelesen, dass die Datei main-collection-product-grid.liquid auf die Sortierung zugreift, diese Datei gibt es bei Impulse aber nicht.
Eine Idee?
Liebgruß
Christina
Erfolg.
Ja, das wirst du mit den Impulse Theme Entwickler besprechen müssen (oder im Forum ganz unten verlinkt posten). Im Grunde ist der verantwortlich Sorting Code etwas wie folgendes, nur arbeiten drittanbieter Themes wie Impulse etwas anders:
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<select>
{%- for option in collection.sort_options %}
<option
value="{{ option.value }}"
{%- if option.value == sort_by %}
selected="selected"
{%- endif %}
>
{{ option.name }}
</option>
{% endfor -%}
</select>
{
"collection": {
"default_sort_by": "title-ascending",
"sort_by": "",
"sort_options": [
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop",
"CollectionDrop::SortOptionDrop"
]
}
}
Output ist folgender Code den man ändern möchte:
<select>
<option
value="manual"
>
Featured
</option>
<option
value="best-selling"
>
Best selling
</option>
<option
value="title-ascending"
selected="selected"
>
Alphabetically, A-Z
</option>
<option
value="title-descending"
>
Alphabetically, Z-A
</option>
<option
value="price-ascending"
>
Price, low to high
</option>
<option
value="price-descending"
>
Price, high to low
</option>
<option
value="created-ascending"
>
Date, old to new
</option>
<option
value="created-descending"
>
Date, new to old
</option>
</select>
Durch den collection object, kannst du auf Folgendes zugreifen:
sort_options
Attribute.sort_by
Attribute.default_sort_by
Attribute.Du kannst die verfügbaren Optionen in einem <select>
Element outputten, damit die Kunden ihre Auswahl treffen können, und du kannst den Selektor auf der Grundlage der aktuellen und der Standardoptionen initialisieren. Wenn eine neue Auswahl getroffen wird, solltest du JavaScript verwenden, um den URL-Parameter anzuhängen und die Seite zu aktualisieren.
Im Folgenden findest du ein einfaches Beispiel für einen Sortierreihenfolge-Selektor und das dazugehörige Javascript:
<select id="sort-by">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
<script>
Shopify.queryParams = {};
// Preserve existing query parameters
if (location.search.length) {
var params = location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var keyValue = params[i].split('=');
if (keyValue.length) {
Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
}
}
}
// Update sort_by query parameter on select change
document.querySelector('#sort-by').addEventListener('change', function(e) {
var value = e.target.value;
Shopify.queryParams.sort_by = value;
location.search = new URLSearchParams(Shopify.queryParams).toString();
});
</script>
Somit empfehle ich das entweder mit den Impulse Theme Entwickler zu besprechen oder mit einem Experten. Du kannst deine Frage gerne in unserem Design Forum auf Englisch stellen, samt befristeter Vorschaulink zu einem Beispiel so dass die Experten das schneller analysieren können.
VG,
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
Moin Gabe,
erst einmal vielen Dank für Deine Hilfe! Ich habe den Theme Entwickler angeschrieben und eine Empfehlung bekommen, welcher Programmierer sich darum kümmern könnte. Diesen lasse ich gerade draufgucken. Falls keine Änderungen möglich sind oder dadurch Probleme entstehen, lasse ich die Sortierung sonst einfach so. Ist je eher ein optisches Ding und für den Bestellverlauf somit unwichtig.
Hab einen schönen Abend.
Liebgruß
Christina
Moin Christina! @Hallo_Christina
Es ist in der Tat überraschend wie komplex diese eine Sortierung ist auf der Collection Page. Nicht mal die Search & Discovery App erlaubt es diesen zu editieren so wie man die Filter editieren kann.
Einen weiteren Thread zum Thema gibt es hier. Aber wie du sagst, es ist eher eine kosmetische Sache.
VG,
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
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024