Mengenauswahl neben Add to Cart Button ?

[T_50]

 

Leute 

wie bekomme ich die Mengenauswahl links neben den Add to Cart Button? Die mengenauswahl soll aber weniger als die Hälfte des Platzes vom Add to Cart button nehmen. 
sicherlich Programmierung oder ? 
Könnte da jmd weiterhelfen? 
Lg

[Gabe]

Hey! @T_50 

Du möchtest also den Quantity Selector aus dem Mengenauswahl Grid direkt neben dem ATC Button Buy platzieren. Wäre das um Platz zu sparen? Es wird nicht einfach sein und an erster Stelle habe ich ein paar Leitfäden zu diesem Thema gefunden die dir auch ggf. weiterhelfen können.

Bei so einer Frage sind jegliche Angaben die du uns lieferst (wie z. B. ein Link zu einem Beispiel, so dass wir das in der Dev Console anschauen können) sehr hilfreich um eine effektive Antwort zurückbekommen. Je weniger Infos desto mehr hin-und-zurück wird es vorher geben.

Aber lass uns hier weiter 👀 was alles möglich ist. Was du möchtest wird wie du selber erwähnt hast eine Programmierung verlangen und so einfach ist das nicht denn es handelt sich um zwei separate Grids (Mengenauswahl- und Buy Buttons Grids) und die zwei sind ziemlich fest-gecodet und sie zusammen mergen wird eine komplexe Arbeit verlangen. Solche Änderungen können auch einen Domino Effekt auf andere Dinge haben wie z. B. könnte es sich negativ auf Mobile auswirken denn da ist weniger Platz auf dem kleineren Screen.

Wenn dir das im Theme nicht gefällt wie es derzeit ist dann kann man natürlich überlegen andere Themes zu testen die das genauso out-of-the-box machen wie du dir es vorstellst. Hast du andere Themes im Shop testen können?

Um die Mengenauswahl direkt neben den "In den Warenkorb" Button zu setzen, könnte man folgenden Code benutzen. Beachte aber, dass die genaue Platzierung und das Design von der spezifischen Vorlage und dem CSS der Website abhängen können. 

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 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!

Zuerst den "Add to Cart" Button und die Mengenauswahl in dieselbe Reihe setzen. Man kann dafür das HTML und CSS der Produktseite bearbeiten.

In der Datei product-template.liquid oder einer ähnlichen Datei, die für das Layout der Produktseite zuständig ist, kann man den folgenden Code finden oder hinzufügen:

<div class="product-form__controls-group">
  <div class="product-form__item product-form__item--quantity">
    <button type="button" class="product-form__qty-decrease">-</button>
    <input class="product-form__input" type="number" min="1" value="1">
    <button type="button" class="product-form__qty-increase">+</button>
  </div>

  <div class="product-form__item product-form__item--submit">
    <button type="submit" class="btn product-form__cart-submit">
      <span id="AddToCartText">In den Warenkorb</span>
    </button>
  </div>
</div>

Danach das CSS anpassen, um den Platz und die Breite der Mengenauswahl und des "In den Warenkorb" Buttons zu kontrollieren mit einem Code den man in die CSS-Datei einfügt wie den folgenden:

.product-form__controls-group {
  display: flex;
  justify-content: space-between;
}

.product-form__item--quantity {
  flex: 0.4;
}

.product-form__item--submit {
  flex: 0.6;
}

.product-form__qty-decrease, .product-form__qty-increase {
  width: 20px;
}

Dieser Code benutzt die CSS Flexbox, um die Mengenauswahl und den "In den Warenkorb" Button in derselben Zeile zu positionieren. Die Mengenauswahl nimmt 40% des verfügbaren Raums ein, und der "In den Warenkorb" Button nimmt die restlichen 60% ein. Sie können die Werte 0.4 und 0.6 an Ihre Bedürfnisse anpassen.

Hoffe das hilft! 😉

[T_50]

 

Hey @Gabe 

vielen Dank erstmal für diese ausführliche Antwort! Und im Moment denke ich nicht daran mein theme zu ändern, da ich in meinem aktuellen theme schon selbst Änderungen im theme code vorgenommen habe, dank YouTube.

Und den ATC Button mit der mengenauswahl sieht man hier im Screenshot und bei volston.de

und werde es hoffentlich sehr bald mit deinem Lösungsansatz mal versuchen 👍

lg 

[Gabe · Accepted solution]

Hey @T_50 

Ja, das sieht nach einem stark angepassten Prestige Theme aus in deinem Link. Und nicht vergessen, dass dein Theme von den Theme Updates ausgeschlossen sein wird wenn Code-Anpassungen durchgeführt werden. Wenn du aber bereit bist das in Kauf zu nehmen dann ist alles paletti! 😉

In dem abgebildeten Element ist ein Formular zur Kontrolle der Produktmenge und zum Hinzufügen des Produkts zum Warenkorb. Eine "sticky" Version des Formulars, die angezeigt wird, wenn das Hauptformular nicht im sichtbaren Bereich des Fensters liegt. Es enthält ähnliche Kontrollen wie das Hauptformular.

Der JavaScript-Teil enthält Funktionen, die die Sichtbarkeit des Hauptformulars kontrollieren und das "sticky" Formular anzeigen oder ausblenden, je nachdem ob das Hauptformular sichtbar ist oder nicht.

Die Mengensteuerung wird auch zwischen dem Hauptformular und dem "sticky" Formular synchronisiert, um sicherzustellen, dass die Menge in beiden Formularen gleich ist, unabhängig davon, welches Formular der Benutzer verwendet.

Ich hoffe du wirst dein Ziel erreichen! 😉