Produkt- Länge und Breite mit Slider filtern
Hey @UA-HandCrafts
Es ist wie Finer sagt und mit Finer seid ihr guten Experten-Händen! 😉
Es ist auch super, dass du deinen ersten Shopify-Shop erstellst - willkommen an Bord!
Bezüglich deines Problems mit der Filterung von Schneidebrettern nach Länge und Breite, um eine erweiterte Filterfunktion in deinem Shop zu integrieren ist die "Product Filter & Search" App von Finer empfohlen (von Boost Commerce) gar nicht schlecht und ermöglicht es dir, benutzerdefinierte Filter, wie Länge und Breite, zu erstellen und auf deiner Website zu implementieren. Die app muss aber Metafelder unterstützen können, um die Metafelder für Länge und Breite als Filterkriterien zu verwenden.
Eine andere Möglichkeit besteht darin, die Funktion selbst zu entwickeln, und eine Filterfunktion für Länge und Breite basierend auf den Metafeldern deiner Produkte zu erstellen. Das würde die Hilfe eines erfahrenen Entwicklers benötigen und eine ausführliche Anleitung zur Erstellung von benutzerdefinierten Filtern mit Liquid findest du hier in der Shopify-Dokumentation.
Im Collection template Liquid könnte man beispielsweise einen Filter-HTML-Code wie den folgenden hinzufuegen, an der Stelle ein, an der du die Filter-Elemente auf der Produktliste anzeigen möchtest:
<div class="filter-wrapper">
<label for="min-length">Minimale Länge:</label>
<input type="range" min="0" max="100" value="0" id="min-length" class="slider" />
<span id="min-length-value">0</span>
<label for="max-length">Maximale Länge:</label>
<input type="range" min="0" max="100" value="100" id="max-length" class="slider" />
<span id="max-length-value">100</span>
<label for="min-width">Minimale Breite:</label>
<input type="range" min="0" max="100" value="0" id="min-width" class="slider" />
<span id="min-width-value">0</span>
<label for="max-width">Maximale Breite:</label>
<input type="range" min="0" max="100" value="100" id="max-width" class="slider" />
<span id="max-width-value">100</span>
<button id="apply-filters">Filter anwenden</button>
</div>
Füge auch einen JavaScript-Code hinzu, wie den folgenden Beispiel-Code im theme.liquid im Verzeichnis "Layout" ein:
<script>
document.addEventListener('DOMContentLoaded', function() {
var minLengthSlider = document.getElementById('min-length');
var maxLengthSlider = document.getElementById('max-length');
var minWidthSlider = document.getElementById('min-width');
var maxWidthSlider = document.getElementById('max-width');
var applyFiltersButton = document.getElementById('apply-filters');
minLengthSlider.addEventListener('input', function() {
document.getElementById('min-length-value').innerText = this.value;
});
maxLengthSlider.addEventListener('input', function() {
document.getElementById('max-length-value').innerText = this.value;
});
minWidthSlider.addEventListener('input', function() {
document.getElementById('min-width-value').innerText = this.value;
});
maxWidthSlider.addEventListener('input', function() {
document.getElementById('max-width-value').innerText = this.value;
});
applyFiltersButton.addEventListener('click', function() {
var minLength = parseInt(minLengthSlider.value);
var maxLength = parseInt(maxLengthSlider.value);
var minWidth = parseInt(minWidthSlider
Dieser Beispielcode sollte eine Filterfunktion erstellen, die es Benutzern ermöglicht, Produkte basierend auf der Länge und Breite in deinem Shopify-Shop zu filtern.
Wenn du es selber auf deiner Collection Seite 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!
Viel Erfolg bei deinem Shopify-Abenteuer und zögere nicht, weitere Fragen hier zu stellen, wenn du weitere Hilfe benötigst!
Hi @Gabe
vielen Dank für deine Antwort. Leider hat die Antwort meine Frage nicht beantwortet.
Meine Frage war
"Warum sehe ich das Metafled "Länge" nicht in der Filterliste der "Shopify Search & Discover" App?"
und nicht, wie ich mit Metafeldern die "Product recomendations" oder "Product Boosts" beeinflussen kann.
Vielleicht kann ich die Fragen anders stellen:
- Können alle hier beschriebenen Metafeld-Inhaltsarten für Filterfunktion verwendet werden?
- Für was kann ich die Metafeld-Inhaltsart "Maß" verwenden?
Danke und Grüße
Dimitrij
Community Blog Artikel
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024
Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024
Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024