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:
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 %}
...
{% 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!
