FROM CACHE - de_header

Sortierung in der Katalogansicht ändern

Gelöst

Sortierung in der Katalogansicht ändern

Hallo_Christina
Entdecker
17 2 5

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.


IMG_3393.jpg

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

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18263 2869 4233

Erfolg.

@Hallo_Christina 

 

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:

  • Die verfügbaren Optionen mit dem sort_options Attribute.
  • Die aktuell ausgewählte Option, falls eine ausgewählt ist, mit dem sort_by Attribute.
  • Die Default-option mit dem 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&colon;

 

<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

Lösung in ursprünglichem Beitrag anzeigen

7 ANTWORTEN 7

Gabe
Shopify Staff
18263 2869 4233

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

Hallo_Christina
Entdecker
17 2 5

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?

Bildschirmfoto 2023-09-12 um 14.18.35.png

Liebgruß

Christina


Gabe
Shopify Staff
18263 2869 4233

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

Hallo_Christina
Entdecker
17 2 5

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

Gabe
Shopify Staff
18263 2869 4233

Erfolg.

@Hallo_Christina 

 

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:

  • Die verfügbaren Optionen mit dem sort_options Attribute.
  • Die aktuell ausgewählte Option, falls eine ausgewählt ist, mit dem sort_by Attribute.
  • Die Default-option mit dem 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&colon;

 

<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

Hallo_Christina
Entdecker
17 2 5

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

Gabe
Shopify Staff
18263 2869 4233

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