Manuelle Sortierung von Kollektionskacheln im "Modular_mit Parallax Code"-Theme

[MVR]

Hallo zusammen,

wir verwenden das Theme "Modular_mit Parallax Code" für unseren Onlineshop und möchten die Kacheln auf unserer Kollektionsseite [mein-karton.shop/collections] nicht mehr alphabetisch, sondern manuell oder nach Änderungsdatum sortieren. Die relevanten Dateien sind list-collections-page-template.liquid und list-collections.liquid. Hat jemand Erfahrung damit, wie man diese Anpassung umsetzen kann? Ein Screenshot der aktuellen Seite ist angehängt.

 

[Gabe]

Hey @MVR 

Eher nicht aber 👁️ wir hier was alles möglich ist. Und mit "Modular_mit Parallax Code" meinst du dieses Theme? Wenn ja, hat dir die Theme Doku oder deren Entwickler nicht weiterhelfen können?

• Collection Pages
• Creating more Collection page templates
• Customizing the Collection List page

Du könntest folgendes probieren:

Im list-collections.liquid füge eine Sortierung nach Änderungsdatum hinzu, wie z. B. eine manuelle Sortierung -> den Collections eine Sortiernummer hinzufügen und diese dann verwenden. Beispiel:

{% assign sorted_collections = collections | sort: 'updated_at' | reverse %}

<div class="collection-list__row row EndlessScroll">
  {% for collection in sorted_collections %}
    <div id="CollectionBlock--{{ collection.handle }}" class="collection-block js-collection-block collection-block--has-image block s1 lg_s14 med_s12" data-animation="moFadeInUp">
      <a href="{{ collection.url }}" aria-label="{{ collection.title }}" class="collection-block__link">
        <div class="collection-block__image collection-block__image--zoom">
          <div class="collection-block__image-bg bg-position--center-center lazyloaded" style="background-image: url('{{ collection.image.src | img_url: '360x' }}');">
            <noscript>
              <div class="collection-block__image-bg no-js-image bg-position--center-center" style="background-image:url('{{ collection.image.src | img_url: '1024x' }}');"></div>
            </noscript>
          </div>
        </div>
        <div class="collection-block__info text-position--bottom_left">
          <div>
            <h3 class="collection-block__title">{{ collection.title }}</h3>
            <span class="button button--primary">Mehr sehen</span>
          </div>
        </div>
      </a>
    </div>
  {% endfor %}
</div>

Füge den Collections ein benutzerdefiniertes Feld für die Sortierung hinzu (z.B. sort_order) ggf. mit einer App oder ein benutzerdefiniertes Metafeld:

{% assign sorted_collections = collections | sort: 'sort_order' %}

<div class="collection-list__row row EndlessScroll">
  {% for collection in sorted_collections %}
    <div id="CollectionBlock--{{ collection.handle }}" class="collection-block js-collection-block collection-block--has-image block s1 lg_s14 med_s12" data-animation="moFadeInUp">
      <a href="{{ collection.url }}" aria-label="{{ collection.title }}" class="collection-block__link">
        <div class="collection-block__image collection-block__image--zoom">
          <div class="collection-block__image-bg bg-position--center-center lazyloaded" style="background-image: url('{{ collection.image.src | img_url: '360x' }}');">
            <noscript>
              <div class="collection-block__image-bg no-js-image bg-position--center-center" style="background-image:url('{{ collection.image.src | img_url: '1024x' }}');"></div>
            </noscript>
          </div>
        </div>
        <div class="collection-block__info text-position--bottom_left">
          <div>
            <h3 class="collection-block__title">{{ collection.title }}</h3>
            <span class="button button--primary">Mehr sehen</span>
          </div>
        </div>
      </a>
    </div>
  {% endfor %}
</div>

Gerne kann ich Experten empfehlen die das für euch machen können!

---
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.