Liquid, JavaScript, Themes
Ich habe das Problem, dass alle Produkte in meinem Shop per Bulk Import importiert wurden. Daher haben alle Produkte das gleiche Erstellungsdatum. Eine Sortierung nach "neu-alt" ist daher nicht möglich. Ich habe ein Metafeld erstellt, das die richtigen Daten beinhaltet.
So bin ich bisher vorgegangen:
Ich habe bei den Product Items jeweils das Datum als Wert hinzugefügt (Beispiel: value_date="15012022"). Dann habe ich einen neuen Button in den Sortieroptionen erstellt. ("NEW (Descending)")
Dann habe ich ein Skript geschrieben, das die Items nach value_date sortiert.
Die Idee habe ich von hier -> https://stackoverflow.com/questions/43416483/shopify-order-products-by-custom-field
Das Problem ist, dass bei der Sortierung in Shopify ein Attribut in der URL übergeben wird, z.B. "?sort_by=title-descending". Meine Lösung gibt nichts weiter und dieser Wert ist dann leer. Man kann diese Funktion auch nicht überschreiben oder deaktivieren. Zumindest ist es mir nicht gelungen. Man kann auch nicht auf den Sortiercode im Backend zugreifen. Hat vielleicht jemand eine Idee, wie ich das hinbekommen könnte?
Ich verstehe ehrlich gesagt nicht, wieso man mit Metafeldern filtrieren kann, sortieren aber nicht.
Eine neue Kollektion manuell zu erstellen, ist leider keine Option.
Vielen Dank!
Hey @irgendeinkerl
Danke für die Frage und es stimmt, dass Shopify standardmäßig keine direkte Möglichkeit bietet, Produkte basierend auf Metafeldern zu sortieren. Eine Möglichkeit, dies zu umgehen, besteht darin, ein benutzerdefiniertes JavaScript- oder Liquid-Skript zu verwenden, um die Produkte clientseitig zu sortieren indem du deinem Theme eine benutzerdefinierte Sortierungs-Option hinzufuegst.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Gehe in die Datei collection-template.liquid
oder collection.liquid
(abhängig vom Theme) und füge eine neue Sortierungs-Option hinzu wie mit einem Code wie den folgenden:
<option value="metafield_date_desc" {% if current_tags contains 'metafield_date_desc' %}selected{% endif %}>NEW (Descending)</option>
Erstelle eine JavaScript-Datei (z. B. custom-sorting.js
) und ergänze der Datei einen Code wie den folgenden hinzu (ohne Gewähr):
document.addEventListener('DOMContentLoaded', function () {
const sortSelect = document.querySelector('#SortBy'); // Ändern Sie '#SortBy' in den tatsächlichen Selector Ihrer Sortierungs-Select-Box.
if (sortSelect) {
sortSelect.addEventListener('change', function () {
if (this.value === 'metafield_date_desc') {
sortProductsByMetafieldDateDesc();
} else {
window.location.href = window.location.pathname + '?sort_by=' + this.value;
}
});
}
});
function sortProductsByMetafieldDateDesc() {
const productGrid = document.querySelector('.grid.grid--uniform'); // Ändern Sie '.grid.grid--uniform' in den tatsächlichen Selector Ihrer Produktgitter.
if (!productGrid) return;
const products = Array.from(productGrid.children);
products.sort((a, b) => {
const aDate = a.getAttribute('data-value_date');
const bDate = b.getAttribute('data-value_date');
return bDate.localeCompare(aDate);
});
while (productGrid.firstChild) {
productGrid.removeChild(productGrid.firstChild);
}
products.forEach((product) => {
productGrid.appendChild(product);
});
}
Ersetze #SortBy
und .grid.grid--uniform
durch die tatsächlichen Selektoren deiner Sortierungs-Select-Box und Produktgrids. Füge im Theme die erstellte JavaScript-Datei (custom-sorting.js
) hinzu:
{{ 'custom-sorting.js' | asset_url | script_tag }}
Füge diese Zeile am besten am Ende der theme.liquid
-Datei oder einer anderen Haupt-Layout-Datei hinzu. Stelle sicher, dass das data-value_date
Attribut in den Produkt-Elementen im Produktgrid vorhanden ist, z. B.:
{% for product in collection.products %}
<div class="grid__item" data-value_date="{{ product.metafields.namespace.key | date: '%Y%m%d' }}">
...
</div>
{% endfor %}
Ersetze namespace
und key
durch die tatsächlichen Werte des Metafelds.
Wenn alles korrekt ist, sollte die neue Sortierungs-Option "NEW (Descending)" im Shop funktionieren und die Produkte basierend auf dem Metafeld sortieren. Beachte, dass diese Lösung clientseitig erfolgt und möglicherweise nicht ideal für große Produktmengen ist.
Bei weiteren Fragen kann ich gerne einen Entwickler empfehlen!
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
Wie hört sich das an?
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