Automatische Aktualisierung des Warenkorbs bei Klick auf das Warenkorb-Icon

[Mythik]

Hallo zusammen,

ich nutze derzeit das Dawn-Theme und möchte, dass sobald man auf das Warenkorb-Icon rechts oben im Header klickt, sich der Warenkorb automatisch aktualisiert. 

Wenn ich Produkte ganz normal über die Shopify-Produktseite in den Warenkorb lege, habe ich es so eingestellt, dass sich direkt auf der rechten Seite der Warenkorb-Slider öffnet und alle sich im Warenkorb befindenden Produkte anzeigt - auch das, was gerade hinzugefügt wurde.

Wenn ich aber beispielsweise Produkte von meiner Wunschliste (Wishlist Hero) aus in den Warenkorb lege, muss ich erst immer die Seite aktualisieren, bevor mir das Produkt im Warenkorb angezeigt wird. 

Meine Frage lautet nun, wie ich das so einstellen kann, dass wenn ich auf das Warenkorb-Icon im Header klicke und sich der Warenkorb-Slider auf der rechten Seite öffnet, sich der Warenkorb von selbst aktualisiert, sodass der Kunde nicht immer die Seite manuell aktualisieren muss, um das Produkt im Warenkorb angezeigt zu bekommen.

Zudem würde ich gerne wissen, ob es eine App gibt mit der man diese Animation für das Erreichen des MBW für den kostenfreien Versand im Warenkorb hinzufügen kann. Falls ja, würde ich mich über eure Empfehlungen freuen. Mit Animation meine ich so einen "Ladebalken" für das Erreichen des MBW.

Ich hoffe, dass ich meine Anliegen gut genug geschildert habe und würde mich sehr über Unterstützung freuen.

Vielen Dank im Voraus.

Beste Grüße

Luca

[Gabe]

Hey @Mythik 

Danke für die Angaben und du hast den Warenkorb Einschub aktiviert und da werden die innerhalb Shopify hinzugefügten Produkte angezeigt. Es werden aber nicht die von der Wishlist hinzugefügten Produkte angezeigt bis man einen Page Refresh macht, ist das richtig?

Das wäre kein tolles Kundenerlebnis, da hast du recht. Es gibt hier aber möglich Ursachen dieses unerwarteten Verhalten der Wishlist Hero App in Verbindung mit dem Dawn Theme Cart und zwar das erste wäre ob der Wishlist Hero Code ein Hinzufügen des Wishlist Produktes zum Cart irgendwie nicht ordnungsgemäß ausführt. Oder der Cart Typ muss ggf. anstatt ein Cart Einschub, eine Cart Page sein. Ggf. ist diese Arbeitsfluss der App nicht mit dem Einschub kompatibel.

• Siehe meinen kurzen Video dazu hier.

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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Mythik]

@Gabe Vielen Dank für dein ausführliches Video.

Bei dir im Video wird das Produkt aber auch nur im Warenkorb angezeigt, weil du die automatische Weiterleitung von der Wunschliste zum Warenkorb aktiviert hast. Also sobald du auf den "In den Warenkorb-Button" in der Wunschliste klickst, wirst du aktuell direkt zum Warenkorb weitergeleitet und dabei wird ja automatisch die Seite neu geladen. Ich habe das gerade auch rekonstruiert. 

Diese automatische Weiterleitung kannst du aber in der App "Wishlist Hero" deaktivieren. 

Ich habe dir im Screenshot einmal die entsprechende Stelle markiert. 

Sobald du den Haken in der App entfernt hast, sollte es bei dir genauso aussehen, wie bei mir. Also, dass du die Seite erst aktualisieren musst, bevor die 1 beim Warenkorb-Icon erscheint und das Produkt im Warenkorb-Slider erscheint.

Ich habe den Entwickler der App auch bereis diesbezüglich kontaktiert. Das war die Antwort von denen: 

"Can you please check with the theme developer on what calls do we need to trigger for the count to update ? we are calling the standard Shopify add to cart, what else should we call to show the count ?"

Aber ich bin mir nicht sicher, ob der Entwickler mich da missverstanden hat. Der Warenkorb zählt ja, aber halt erst nach einer Aktualisierung. Das ist ja auch normal. Mein Wunsch wäre, dass der Warenkorb-Einschub auch erscheint, wenn man in der Wunschliste auf den "In den Warenkorb"-Button klickt. Dann würde sich der Warenkorb während des Einschubs ja selbst aktualisieren.

[Gabe]

@Mythik 

Oh, der App Entwickler denkt anscheinend dass wir in der App Entwicklung spezialisiert sind, wie es aussieht. 🤔

Somit ist das Wunschverhalten das Folgende was du an den Entwickler senden kannst. Sende bitte diesen Video an den Entwickler und dass sollte die Sache besser erklären.

[Mythik]

@Gabe Ich habe das Video nun weitergeleitet. Vielen Dank für deine Bemühungen. Sobald ich eine Rückmeldung erhalten habe, werde ich es hier mitteilen.

Hättest du auch vielleicht eine App-Empfehlung bezüglich meines zweiten Anliegens in diesem Beitrag?

"Zudem würde ich gerne wissen, ob es eine App gibt mit der man diese Animation für das Erreichen des MBW für den kostenfreien Versand im Warenkorb hinzufügen kann. Falls ja, würde ich mich über eure Empfehlungen freuen. Mit Animation meine ich so einen "Ladebalken" für das Erreichen des MBW."

Vielen Dank im Voraus.

[Gabe]

Hey @Mythik 

Ja, der MBW ist ein toller Weg deine AOV zu erhöhen und die Umsätze zu steigern. Die Go-to die die Meisten verwenden ist die Free Shipping Bar App. Klicke in diesen Apps einfach in die Demos und teste sie aus bis du die findest die dir am besten gefällt. 

Hier sind ein paar weitere Apps die aber bezahlbar sind und erweiterte Features anbieten (samt O-Ton der App Beschreibungen):

• Vitals (kostet $29.99 pro Monat): Diese App bietet eine Vielzahl von Funktionen, einschließlich einer kostenlosen Versandbalkenfunktion, die man zum Shop hinzufügen kann. Man kann damit Kunden anzeigen, wie nah sie daran sind, ein spezielles Angebot zu erhalten. Es gibt auch andere Funktionen wie einen Countdown-Timer und Möglichkeiten, die Konversionen zu verbessern​.
• Sales Rocket (kostet ab $9.99 pro Monat): Dies ist eine vielseitige App mit mehr als 40 Funktionen, darunter ein hervorragender Versandfortschrittsbalken. Es gibt auch Optionen wie einen guten Countdown-Timer und Lagerbestands-Countdown-Optionen. Die App enthält auch "FOMO"-Optionen (fear of missing out), die dabei helfen können, den Warenkorbabbruch zu reduzieren​.
• Shipping Bar by ShopStorm (bietet einen kostenlosen Plan): Diese App benötigt keinen Entwickler zur Installation. Sie integriert sich sofort in den Shop und man kann sie gleich live schalten. Man kann auch die Schriftart und die Farben sehr schnell und einfach anpassen, sodass du die dem aktuellen Store-Branding anpassen kannst und die Kunden nicht verwirren. Die Balken sind vollständig responsive, sodass sie auf jedem Gerät perfekt angezeigt werden​.
• Smart Shipping Bar (kostet $0.99 pro Monat): Diese App verspricht, den AOV der Kunden zu erhöhen, indem sie ein Ziel zum Erreichen des kostenlosen Versands gibt. Sie funktioniert auch für andere Arten von Rabatten, wie z.B. einen Rabatt von 10%, wenn man mehr als €50 ausgibt. Sobald ein Produkt in den Warenkorb gelegt wird, aktualisiert sich die Benachrichtigungsleiste. Sie kann oben oder unten auf der Website platziert werden und die Designs sind anpassbar​.

Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.
Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

[Mythik]

@Gabe Vielen Dank für die App-Vorschläge und die Erläuterungen dazu. Das hilft mir sehr weiter.

Ich habe nun die Antwort des App-Entwicklers erhalten:

"Thank you for the video and the information in it, please find below the response to the support team member:

Thanks, the app does offer the merchant the option to redirect after addition to page or just show notification ( but not showing the drawer, thanks for the suggestion there ).

We are currently using this Shopify AJAX API to add the item to cart https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-add-js , The question we wanted to ask is how to make sure the cart object on the page does update after the additions is made ?.

Our merchant wants the count to update on the cart icon ( and perhaps the drawer to open ). Can you please direct us to which event to trigger or api to call to achieve that using Shopify's theme configuration?

we are looking for a general function call or event to call, that will then check on customer-configured theme settings and act accordingly ( open drawer, just update count, .. etc ).

Thanks and appreciate your help"

So wie ich die Nachricht verstehe, denken die Entwickler anscheinend, dass der Zähler bei dem Icon gar nicht auslöst. Aber der Zähler löst ja aus, aber halt erst sobald man die Seite manuell aktualisiert.

Könnten wir das Problem nicht einfach lösen, indem man das so einstellt, dass sobald man auf das Warenkorb-Icon im Header klickt, sich der Warenkorb (also quasi die ganze Seite) aktualisiert? Dann würde der Artikel direkt dort angezeigt werden und der Zähler bei dem Icon würde sich auch aktualisieren, sobald man den Warenkorb öffnet.

Was hältst du von der Idee?

Und danke nochmal für deine Hilfe. 🙂

[Gabe]

Hey @Mythik 

Es sieht so aus wie ich es befürchtet habe,  dass es einfach nicht mit dem Cart-Drawer kompatibel ist. Der Entwickler scheint auch meinen Video nicht verstanden zu haben wahrscheinlich wegen eines Sprachproblem da sie meist in Indien oder so sind:

Wichtig: Kannst du die App Entwickler dazu bitten einen 👁️ in deinen Code zu werfen?

Weiteres dazu haben meine Recherchen folgendes ergeben:

Die Frage bezieht sich darauf, wie der Warenkorb auf der Shopify-Seite in Echtzeit aktualisiert werden kann, ohne dass der Benutzer die Seite manuell aktualisieren muss. Es scheint also das Problem darin zu bestehen, dass das Warenkorb-Widget nicht sofort aktualisiert wird, wenn Artikel über die Wunschliste hinzugefügt werden.

Der App-Entwickler scheint die Shopify AJAX API zu verwenden, um Artikel zum Warenkorb hinzuzufügen. Allerdings wird der Warenkorb nicht automatisch aktualisiert, wenn ein Artikel hinzugefügt wird. Das liegt wahrscheinlich daran, dass die Webseite nicht auf den Erfolgsfall der POST /cart/add.js API-Aufruf reagiert.

So dass das Warenkorb-Widget automatisch aktualisiert wird, wenn ein Artikel zum Warenkorb hinzugefügt wird, kann man dem Erfolgsfall der POST /cart/add.js API-Aufruf eine Funktion hinzufügen, um das Warenkorb-Widget zu aktualisieren. Dies könnte durch eine AJAX-Anforderung an die GET /cart.js API erreicht werden, die den aktuellen Zustand des Warenkorbs abrufen würde, und dann würde diese Information dazu verwendet werden, um das Warenkorb-Widget auf der Seite zu aktualisieren.

Hier ist ein einfaches Beispiel für jQuery, wie dies umgesetzt werden könnte aus unseren Entwickler Documents entnommen (bitte alles weitere mit einem unserer Experten besprechen):

$.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: {
        // Die Produktdaten hier
    },
    dataType: 'json',
    success: function () {
        $.get("/cart.js", function(data, status){
            // Aktualisiere hier den Warenkorb-Widget mit den jeweiligen Daten
        });
    },
    error: function () {
        // Hier das Error-Handling
    }
});

Dies ist ein recht allgemeiner Ansatz, und man muss wahrscheinlich Änderungen vornehmen, um ihn an die speziellen Anforderungen anzupassen.

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

[Mythik]

@Gabe Hey, vielen Dank für die ausführliche Hilfestellung. 

Ich werde den Entwicklern der App noch einmal schreiben. Weshalb sollten die sich meinen Code denn nochmal ansehen? Wegen dem Warenkorb oder hast du im Code zufällig etwas gefunden, was nicht korrekt ist?

Danke für deine Bemühungen.

Beste Grüße

[Gabe]

@Mythik 

Ja genau - wegen dem Warenkorb und auch deswegen weil die App scheinbar nicht mit dem Einschub kompatibel ist...oder wir ggf. etwas in den App Einstellungen übersehen haben!

VG,

[Mythik]

@Gabe Hallo, ich hoffe du hattest ein schönes Wochenende. Ich habe nun nochmal eine Nachricht von den Entwicklern erhalten:

"Thank you for your patience and apologies for any delay. Unfortunately, the question we have been asking is not yet answered, likely context is missing. We mainly have the same concern as the partner here : Cart Drawer Does Not Update Automatically (Dawn Theme) - Shopify Community. Mainly we don't think adding our own custom code to override how Shopify's cart drawer look is the best way ( this can be fragile if shopify changes it in the future ), instead looking for a library / JS event to call from Shopify Library to automatically refresh the cart content.

We have recorded a video here explaining the problem and what we do need: https://screenrec.com/share/L7aA6OzlbF"

Ich finde den Beitrag aus dem englischen Shopify-Forum recht interessant. Was sagst du zu dem Lösungsansatz?

Vielen Dank im Voraus für deine Bemühungen.

[Gabe]

Hey @Mythik 

Man würde denken die Entwickler haben bessere Mikrofone, da kann man ja fast kein Wort verstehen. Aber so was ich davon verstanden habe, scheint es so zu sein, dass der Entwickler erwähnt, dass es eine komplexe Coding Lösung verlangen wird um das zu erzielen was du erwähnt hast.

Mich überrascht es, dass die Entwickler das nicht bereits gemacht haben denn die Cart Drawers werden immer mehr von modernen Shops verwendet, und nicht Cart Pages, da die Drawers eine viel verbesserte UX gewährleisten.

Somit kann ich dir nur ans Herz legen zu überlegen einen Experten zu heuern. Wenn du es selber auf deiner Cartseite 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.