Hilfe benötigt: Anpassung des CartDrawers bei Produktzugabe

[EcomKing1]

Hallo liebe Shopify-Community,

ich hoffe, es geht euch gut! Ich habe kürzlich das Focal Theme in meinem Shop implementiert und bereits einige Anpassungen vorgenommen. Jetzt stehe ich jedoch vor einer kleinen Herausforderung.

Ich habe das schwarze Pop-up deaktiviert, das normalerweise erscheint, wenn ein Kunde ein Produkt in den Warenkorb legt. Stattdessen möchte ich gerne, dass der CartDrawer (so wie auf Beispielshop: onlybabe.de) automatisch geöffnet wird, wenn ein Kunde ein Produkt hinzufügt, ohne dass zusätzliche Schritte erforderlich sind. Ich habe das schwarze PopUp deaktiviert allerdings, passiert garnichts wenn ich ein Produkt zum Cart einfügen möchte.

Ich habe bereits den Theme-Entwickler kontaktiert, aber in der Zwischenzeit dachte ich, ich könnte auch die weite Community um Rat bitten. Vielleicht hat jemand von euch bereits eine ähnliche Anpassung vorgenommen und kann mir dabei helfen.

Für jeden Tipp oder Hinweis wäre ich sehr dankbar! Ich freue mich auf eure Unterstützung und Erfahrungen.

Vielen Dank im Voraus und einen schönen Tag an alle!

Beste Grüße

[Gabe]

Hey @EcomKing1 

Das automatische Öffnen des CartDrawers, wenn ein Produkt zum Warenkorb hinzugefügt wird, ist eine häufig gewünschte Anpassung, da sie dem Kunden sofortiges Feedback gibt und den Checkout-Prozess fördert.

Aber leider ist es schwer nachzuvollziehen was der genaue Sachverhalt ist ohne einen Link zu einem Beispiel denn es kann sehr viele Ursachen geben, wie z. B. eine Frontend App die du neulich im Shop aktiviert hast. 

Kannst du auch eine frische Kopie deines Themes zum Shop hinzufügen und es da testen? Wenn es in der neuen Kopie nicht vorkommt dann hast du das Problem auf deinem Theme Code isoliert und der 🪱 ist irgendwo in deinem Theme.

DIY Code-Lösung?

Wenn du es selber im Theme coden 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!

• Gehe zu Online Store > Themes.
• Klicke auf "Aktionen" und wähle "Code bearbeiten".
• Suche und öffne die theme.js Datei (oder eine ähnliche JavaScript-Datei, je nach Theme-Struktur).
• Suche nach dem Ajax-Aufruf, der ein Produkt zum Warenkorb hinzufügt. Dies könnte so aussehen:

$.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: formData,
  dataType: 'json',
  success: function() {
    // Hier erfolgt die Logik nach erfolgreichem Hinzufügen
  }
});

Im success-Callback des Ajax-Aufrufs fügst du den Code hinzu, der den CartDrawer öffnet. Dies könnte je nach Theme-Struktur und Namen der Funktion variieren, aber als Beispiel:

success: function() {
  // Funktion, um den CartDrawer zu öffnen
  openCartDrawer();
}

Nachdem du die Anpassungen vorgenommen hast, teste den Warenkorb, indem du ein Produkt hinzufügst und prüfe, ob der CartDrawer automatisch geöffnet wird.

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