Auswahl der Produktmenge in 5er/10er Schritten

[k1hm]

Hi zusammen, 

ich stehe bei meinem Shopify Shop gerade vor folgender Aufgabe: Ich möchte, dass die Preise für Einzelprodukte ausgewiesen werden. Die Anzahl der Produkte, die in den Warenkorb gelegt werden, soll jedoch nur in 5er bzw. 10er Schritten erfolgen. Dafür möchte ich idealerweise die Standardsicht (mit dem + und -) nutzen. Sprich, bei klick auf + geht die Anzahl von 5 auf 10 auf 15... (bzw. von 10 auf 20 auf 30...). 

Wenn das Produkt 1 Euro kostet, soll der Preis natürlich ebenfalls entsprechend der menge angepasst werden. Ich weiß, dass es Mindestbestellmengen gibt, die bspw. im Warenkorb getriggert werden. Ich möchte allerdings unbedin

Gibt es dafür eine Möglichkeit? Freu mich über jede Hilfe. 

[Gabe]

Hey @k1hm 

Die Anpassung der Mengenauswahl im Theme, so dass Kunden Produkte nur in festgelegten Schritten (z.B. in 5er oder 10er Schritten) in den Warenkorb legen können, haben wie als Thema schon oft hier in der Community besprochen. Haben dir die anderen Threads helfen können? Da wird oft als Workaround empfohlen die Produkte zu Bündel was man ja jetzt mit unserer tollen Bundles App machen kann und bei Interesse kann ich zeigen wie.

Anonsen wird das eine Anpassung des Themes Codes verlangen und wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ 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!

Hierbei geht es darum, das Verhalten des Mengenauswahlfelds im Produkt- und Warenkorbtemplate so zu ändern, dass die Anzahl der Produkte nur in den gewünschten Schritten erhöht oder verringert werden kann. Zusätzlich muss sichergestellt werden, dass der Preis entsprechend der ausgewählten Menge angepasst wird. Die Implementierung dieser Funktion kann auf verschiedene Arten erfolgen, je nachdem, welche Theme-Vorlage du verwendest und wie komfortabel du mit der Bearbeitung von Liquid-Code, JavaScript und gegebenenfalls CSS bist. 

Allgemeine Anleitung

Zuerst das <input>-Feld für die Menge so anpassen, dass es nur bestimmte Werte akzeptiert. Dies kann durch die Einbindung eines step-Attributs erreicht werden, welches die Schrittgröße definiert (z.B. step="5" für 5er Schritte). Stelle sicher, dass das Input-Feld eine Mindestmenge hat (z.B. min="5"), um zu verhindern, dass Benutzer eine geringere Menge als die festgelegte Mindestmenge auswählen. Um das Plus- und Minus-Verhalten anzupassen, benötigt man JavaScript, das die Logik für die Erhöhung oder Verringerung der Menge in den festgelegten Schritten implementiert.

Ein Beispiel-Code könnte so aussehen:

document.addEventListener('DOMContentLoaded', function () {
  const quantityInput = document.querySelector('input[name="quantity"]');
  const incrementButton = document.querySelector('.increment');
  const decrementButton = document.querySelector('.decrement');

  incrementButton.addEventListener('click', function () {
    let currentValue = parseInt(quantityInput.value);
    quantityInput.value = currentValue + 5; // Erhöhen in 5er Schritten
    updatePrice();
  });

  decrementButton.addEventListener('click', function () {
    let currentValue = parseInt(quantityInput.value);
    if (currentValue > 5) { // Mindestmenge berücksichtigen
      quantityInput.value = currentValue - 5; // Verringern in 5er Schritten
      updatePrice();
    }
  });

  function updatePrice() {
    // Logik zur Preisaktualisierung basierend auf der ausgewählten Menge
    // Dies hängt von Ihrer spezifischen Shop-Setup ab
  }
});

Die Funktion updatePrice muss entsprechend der Shop-Struktur und wie Preise aktualisiert werden sollen, angepasst werden. In vielen Fällen kann dies durch eine AJAX-Anfrage an die Shopify API erfolgen, um den korrekten Preis basierend auf der ausgewählten Menge zu ermitteln und das Preis-Element auf der Seite entsprechend zu aktualisieren.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.