FROM CACHE - de_header
Gelöst

Produkt- Länge und Breite mit Slider filtern

UA-HandCrafts
Entdecker
15 2 3

Hallo zusammen,

ich bin ganz neu im e-Commerz, bei Shopify und hier in der Community.

 

Ich baue gerade meinen ersten Shop. Total spannende Reise und viel zu lernen. Jetzt stehe ich vor einer Herausforderung und habe noch keine Lösung gefunden. Vielleicht kann mich jemand auf den richtigen Pfad führen.

 

Ich habe u.a. Schneidebretter im Produktportfolio. Ich möchte, dass die Schneidebretter nach Länge und nach Breite indealerweise mit einem Slider (wie Preis) gefiltert werden können.

Ich habe:

  1. unter Metafeldern die Definitionen "Länge" und "Breite" jeweils als Inhaltsart "Maß" erzeugt und das Häckchen unter "Storefront" gesetzt
  2. in zwei Beispielprodukten die Metafelder "Länge" mit Zahlen gefüllt
  3. Leider bekomme ich dieses Metafeld weder unter "Shopify Search & Discovery" noch unter einer 3d Party App angezeigt.

Bin für jeden Hinweis sehr dankbar.

Viele Grüße

 

Dimitrij

1 AKZEPTIERTE LÖSUNG
Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Hallo Dimitry @UA-HandCrafts ,

 

die Antwort ist, dass der Typ Maß nicht für die Filterung zu Verfügung steht.

Mithilfe von Metafeldern kannst du nur Filter für die folgenden Typen erstellen:

  • Einzeiliger Text
  • Einzeiliger Text (Liste)
  • Dezimal
  • Ganze Zahl
  • Wahr oder falsch

Das was Du hoffst zu erreichen (eine Filterung wie die Filterung von Preis bis Preis) ist nicht so einfach möglich out of the box. Wenn Du den Code der Filter anschaust, siehst Du, dass der Filter nach preis eine eigener Filtertyp ist.

 

Ein Filter Maß der von bis funktionieren soll, wie der Filter nach Preis müsste gecodet werden,

mit liquid als auch javascript. Das ist mein job 🙂

Ich mache Dir gern ein Angebot.

 

Grüsse Guido

 

Lösung in ursprünglichem Beitrag anzeigen

10 ANTWORTEN 10

Finer
Shopify Expert
2071 438 742

@UA-HandCrafts der einfachste Weg ist die Verwendung einer App wie z.b. AI Search, Filter & Recommend.

Man kann zwar auch versuchen das alles selbst im Code einzusetzen. Allerdings muss man berücksichtigen, dass Shopify in der Regel eine "UND" Funktion bei den Filtern verwendet. Das heißt, wenn du die Länge und Breite als Range (Slider) definierst, werden die Produkte angezeigt, die genau diesen Werten entsprechen. Alles, was darunter|darüber fällt, wird nicht angezeigt. Das kann auf User-Ebene zu Verwirrungen führen.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
UA-HandCrafts
Entdecker
15 2 3

Hallo @Finer

 

vielen herzlichen Dank für deine Antwort samt Empfehlung.

Ich habe auch beretis nach Drittanbieter-Filterapps geschaut und einige gefunden, wo ich Custom Slider machen kann.

Der Hinweis mit "UND" Bedienung ist für mich neu und sehr wertvoll - vielen Dank! Das muss ich jetzt gründlich überlegen und prüfen, wie es mit den Apps auf User-Ebene funktioniert.

Viele Grüße

Dimitrij

Gabe
Shopify Staff
18021 2849 4195

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! 

 

giphy

 

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!

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

UA-HandCrafts
Entdecker
15 2 3

Hi @Gabe 

 

ich bin überwältigt von deiner ausführlichen Antwort samt Code und Anleitung - vielen Dank - MEGA!

 

Ich werde es auf jeden Fall ausprobieren!

Erlaube mir bitte einen Schritt zurück zu folgender Frage zu gehen.

Bedingungen:

- Verwendung von "Studio" Theme

- Verwendung von "Shopify Search & Discovery" App

- Definition von Produkt-Metafeld "Läng" als Inhaltsart "Maß" ist vorhanden und Lesezugriff für Storefront ist gewährt

- Mehrere Produkte sind angelegt, einer Kategorie zugeordnet und die Werte für das MEtafeld "Länge" sind hinterlegt

 

Frage:

- Warum sehe ich das Metafled "Länge" nicht in der Filterliste der "Shopify Search & Discover" App?

- Als Anfänger würde ich es erwarten - wenn ich ein vordefiniertef Metafeld mit Leben fülle, dann sollte ich es auch in der Filterkonfiguration sehen können, oder verstehe ich da was falsch?

 

Vielen Dank im Voraus und viele Grüße

Dimitrij

Gabe
Shopify Staff
18021 2849 4195

Hey  @UA-HandCrafts 

 

Freut mich dass das hilfreich war!

 

Bzgl. unserer Search & Discovery App:

Du kannst Metafields verwenden um Produktempfehlungen oder Produkt-Boosts im Shopify-Admin zu bearbeiten, wie im Bulk Editor, oder mit anderen Apps, wie Shopify Flow. Alle Änderungen, die an den Metafeldern vorgenommen werden, werden mit der Search & Discovery App synchronisiert. Man muss nur die genauen Standarddefinitionen verwenden, die im Shopify Help Center beschrieben und verlinkt sind für product recommendations und product boosts

 

Hoffe das hilft! 😉

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

UA-HandCrafts
Entdecker
15 2 3

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:

  1. Können alle hier beschriebenen Metafeld-Inhaltsarten für Filterfunktion verwendet werden?
  2. Für was kann ich die Metafeld-Inhaltsart "Maß" verwenden?
    Screenshot 2023-05-02 173927.jpg

Danke und Grüße

Dimitrij

Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Hallo Dimitry @UA-HandCrafts ,

 

die Antwort ist, dass der Typ Maß nicht für die Filterung zu Verfügung steht.

Mithilfe von Metafeldern kannst du nur Filter für die folgenden Typen erstellen:

  • Einzeiliger Text
  • Einzeiliger Text (Liste)
  • Dezimal
  • Ganze Zahl
  • Wahr oder falsch

Das was Du hoffst zu erreichen (eine Filterung wie die Filterung von Preis bis Preis) ist nicht so einfach möglich out of the box. Wenn Du den Code der Filter anschaust, siehst Du, dass der Filter nach preis eine eigener Filtertyp ist.

 

Ein Filter Maß der von bis funktionieren soll, wie der Filter nach Preis müsste gecodet werden,

mit liquid als auch javascript. Das ist mein job 🙂

Ich mache Dir gern ein Angebot.

 

Grüsse Guido

 

UA-HandCrafts
Entdecker
15 2 3

Hallo @Guido_Michele 

vielen Dank für die Erklärung.

 

Das habe ich vermutet, konnte leider nirgends eine Auftellung der standardmäßig filterbaren Metafelder finden.

Vielen Dank für dein Angebot bzgl. Programmierung. Ich muss noch einige Schritte gehen, bis ich den Shop designt und mit Leben gefüllt habe und werde ggf. auf dein Angebot zurück kommen.

 

Viele Grüße

Dimitrij

Eigiman
Besucher
3 0 0

Hallo Guido, kannst Du mich bitte bezüglich Offerte kontaktieren? Habe das gleiche Bedürfnis um Dimensionen mit Slidern zu filtern. Gruss Matthias (kontakt at vanatics.ch)

Guido_Michele
Shopify Partner
93 25 75

Hallo @Eigiman 

gerne mache ich Dir ein passendes Angebot, 

allerdings müssten wir einige Fragen klären,

am besten telefonisch, das geht am schnellsten.

 

Ich schreibe mir mein whatsapp an Deine kontakt at Email.

 

Gruss Guido