FROM CACHE - de_header

Dawn Theme Mini-Cart (Slide Out) funktioniert mit shopify cli nicht.

SMEG
Shopify Partner
38 2 18

wie geschrieben, funktioniert der Mini-Warenkorb (slide out cart) lokal bei mir nicht, wenn ich mit Shopify-CLI arbeite. 
Liegt das u.U. an irgendwelchen Abhängigkeiten?

Wer kann helfen?

@r8r 

24 ANTWORTEN 24

Gabe
Shopify Staff
16357 2587 3853

Hey @SMEG 

Hättest du einen Preview Link den wir vielleicht hier anschauen können um zu sehen was du bis jetzt gemacht hast, Ist-wert und Soll-wert, und was genau du erreichen möchtest?

Hast du das auch an unser Theme Team geschickt (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest?

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

SMEG
Shopify Partner
38 2 18

Hallo Gabe,

ich kann dir keinen Link schicken, da ich ja lokal an dem Theme arbeite. Deshalb ja die Erwähnung von Shopify CLI.

 

Aber auch wenn ich das unveränderte Dawn-Theme (2.3.0) über Shopify-CLI teste bekommen ich das Mini-Cart nicht angezeigt, wenn ich das Produkt in den Warenkorb hinzufüge.

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

 

Erzähl doch etwas mehr was du erreichen möchtest und warum, was ist der Anwendungsfall bzgl. deinem Dawn Mini-Cart Slideout. Hast du ein Shop Beispiel wo dieser Cart in Aktion vielleicht in einem anderen Theme zu sehen ist? Welche Warenkorb Kundenreibungen werden durch deine Anpassungen reduziert? Ist es vielleicht dass der derzeitige Dawn Cart den Kunden eine verschlechterte Cart Erfahrung bietet?

 

Oder möchtest du den Pop-out Cart deaktivieren wie in diesem Beispiel:

 

image.png

 

Wenn ja, dann können wir das machen wie man hier sieht.

 

Lass wissen falls du keinen Zugriff zu den folgenden Links hast: hast du im Github die 291 Cart Issues durchgesucht um zu sehen, ob dieses Problem bereits gemeldet wurde? Das Projekt "Fix null cart properties and line items #257" findest du da falls dieser damit verbunden ist. Bist du auch als Partner Mitglied in unserem Partner-Slack-Kanal? Wenn ja kannst du da auch fragen. Du kannst auch einen Dawn-Bug hier im Github melden wenn du glaubst es handelt sich um ein Bug.

 

In unserem Dokument über das Cart-Objekt findest du vllt. mehr darueber. Da ich selbst kein Programmierer bin, kann ich nicht sicher sein, aber es sieht so aus, als hätten Sie zwei Instanzen davon in dem Code, den Sie in Ihrer ursprünglichen E-Mail mitgeteilt haben.

 

Beispiel: ich weiss, dass in Dawn gibt es eine Webkomponente namens product-form.js, die den Warenkorb Artikel hinzufügt. Diese Komponente verwendet die Rendering-Funktion für gebündelte Abschnitte der Cart-API, die hier beschrieben wird: https://bit.ly/2ZVHy4H. Wenn man jedoch versucht, diesen Code lokal über den Shopify CLI-Vorschau-Link auszuführen, hat das von der Cart API zurückgegebene JSON-Objekt sections:null

 

Es scheint die Abschnitte, die von der Section Rendering API gerendert werden sollen, nicht zu erfassen, wenn es in diesem Modus ausgeführt wird. Es funktioniert jedoch wie erwartet, wenn es über den Link zur Themenvorschau zurückgegeben wird. Das lässt vermuten, dass dieser API-Aufruf in dieser Umgebung vielleicht nicht funktioniert, und bestätigen kann ich das leider nicht, ob dies der Fall ist oder nicht - nur damit du im Rahmen deines Entwicklungsworkflows Bescheid weisst.

 

Shopify unterstützt Theme-Entwickler durch den Aufbau umfangreicher Shopify.Dev-Ressourcen, und ich habe einige dieser Ressourcen hier für dich zum überprüfen, als auch für weitere Informationen:

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

SMEG
Shopify Partner
38 2 18

Hallo @Gabe ,

ich möchte einfach nur, dass der Mini-Cart, wie er im Dawn-Theme bereits vorhanden ist funktioniert. Wenn du dir das Dawn-Demo ansiehst und ein Produkt in den Warenkorb legst, dann erscheint der Mini-Cart.

https://themes.shopify.com/themes/dawn/styles/default/preview

Genau das passiert bei mir nicht, wenn ich Shopify CLI benutze. Egal ob mit dem original Dawn-Theme (also ohne irgndwelche Änderungen) oder mit meinem veränderten Theme.

Meine Frage ist, warum das online funktioniert (also wenn das Theme aktiviert ist) und über Shopify CLI nicht. Ich möchte den Mini-Cart verändern, dafür muss er aber erstmal funktionieren.

Ich hoffe jetzt ist mein Anliegen klarer.

Gruß

Mirko

Gabe
Shopify Staff
16357 2587 3853

Ok Mirko @SMEG 

Kannst du mir bitte die Shopify CLI-Version hier posten, die du verwendest? Ich nehme an, dass der Cart nicht funktioniert, weil er sich nicht öffnen lässt?

Und bitte angeben, welchen Befehl/Command des CLI du ausführst.

Bitte Version, deinen Browser und Gerät auch angeben.

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

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Das haben wir jetzt getestet und von unserer Seite läuft alles ok im CLI und Dawn Mini-Cart. Bitte nur Google Chrome neueste Version verwenden:

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

SMEG
Shopify Partner
38 2 18

Hallo @Gabe 

Ich benutze:
- VS Code 1.61.2 und den Terminal aus VS Code
- OSX Big Sur
- Shopify CLI version 2.6.5
- Chrome 95.0.4638.69

Bei mir geht der Mini-Cart nicht auf.

Hier ist ein Video: https://www.loom.com/share/ab198baf7f6f445698bdaac2cea58677

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Es besteht die Möglichkeit, dass Chrome JavaScript auf local-host blockiert. Aber Chrome sollte funktionieren, nur bei andere Browsern kann das manchmal nicht der Fall sein da nur Chrome wird jetzt unterstützt für den shopify theme serve command. Mehr dazu hier.

JavaScript ist nicht deaktiviert, weil ich davon ausgehe, dass die Änderung des Status "In den Warenkorb" JS verwendet.

Hier könnte ein Javascript-Problem vorliegen. Wenn es eines gibt, sollte er eine Fehlermeldung in der Devtools-Konsole von Chrome sehen, die uns genau sagen wird, was falsch ist.

Eine andere mögliche Ursache: Wie ich sehe, hast du einen Adblocker und eine Menge Erweiterungen. Möglicherweise blockieren diese auf local-host, aber nicht die Produktseite. Kannst du die mal deaktivieren und nochmal probieren?

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

SMEG
Shopify Partner
38 2 18

Hallo @Gabe,

ich habe Chrome ohne Erweiterungen ausprobiert und auch Brave (das ist ein Browser der auf Chrome basiert) und es geht trotzdem nicht.

Ich bekommen folgende Fehlermeldung in der Konsole:

Bildschirmfoto 2021-11-04 um 17.59.33.png

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Wir haben ein Bug gefunden, können aber nicht bestätigen, ob es bei dir der Fall sei da auf unserer Seite das CLI Mini-cart funktioniert:

Wenn zwei Asset-URLs in der gleichen Zeile stehen:

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" /><link rel="stylesheet" href="{{ 'theme2.css' | asset_url }}" />

Dies führte dazu, dass diese beiden Assets nicht wie vorgesehen lokal bedient werden konnten.

Kannst du bitte folgendes machen:

  • Deine Theme Datei exportieren als .zip und an folgende E-Mail schicken, so dass wir versuchen können es auf unserer Seite zu reproduzieren: marxxxxxxxx@shopify.com (Siehe PN).  

image.png

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

SMEG
Shopify Partner
38 2 18

@Gabe Kann ich machen,

aber bei mir funktioniert schon das unveränderte Dawn-Theme 2.3.0 lokal nicht.
Das hat nichts mit meiner Customization zu tun. Ich bekomme das Mini-Cart schon mit dem von Git-Hub herunter geladenem Theme nicht zum funktionieren.

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Vielleicht ist der Entwickler in der Lage das anzuschauen wenn du ihn anschreibst da unser Team ernsthaft in diesen Fall interessiert ist.

Dazu habe ich leider zu wenig Ressourcen hier um das Problem zu lokalisieren.

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

SMEG
Shopify Partner
38 2 18

Okay, dann schicke ich ihm das Zip-File, welches ich heruntergeladen habe und ein Loom-Video

 

Gabe
Shopify Staff
16357 2587 3853

Und halte uns auf dem Laufenden 😉

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

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Hast du was zurückgehört diesbzgl.?

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

SMEG
Shopify Partner
38 2 18

@Gabe 
Leider nein. Wollt dich auch schon danach fragen.

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Werde das nachhaken.

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

SMEG
Shopify Partner
38 2 18

@Gabe  Das wäre super

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

Derzeit sieht es so aus:

Wir haben uns das angesehen und wir konnten es mit dem Theme, das du uns geschickt hast, nicht reproduzieren. 

Alles deutet also darauf hin, dass der Wurm irgendwo auf deiner Seite versteckt ist wie z. B. du eine Browser Erweiterung oder etwas anderes, dass du auf deinem Rechner hast, dass dieses Problem verursacht.

Als Workaround kannst du den Link unter "Share this theme preview:" anstelle von http://127.0.0.1:9292 verwenden, um den Popup-Warenkorb zum Funktionieren zu bringen, aber mit diesem Link erhälst du keinen Hot-Reload und keine schnellen Updates bei Änderungen an den Liquid-Dateien.

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

SMEG
Shopify Partner
38 2 18

Hallo @Gabe 
Danke für den Workaround-Tip.

Das das Problem an den Erweiterungen liegt kann ich nicht bestätigen. Ich habe alle Erweiterungen deaktiviert. Ausserdem funktioniert das Theme ja online auch mit Erweiterungen.

Ich habe mal ein wenig gegoogled und anscheinend kann es sein, dass Chrome die AJAX-Ausführung verhindert, da die Daten von unterschiedlichen "Servern" bzw. "locations" stammen.
Ich habe das Theme ja bei mir auf der Festplatte und nicht online (z.B. auf Github). Die Produkt-Daten, Texte, Bilder etc. kommen aber von den Shopify-Servern. Chrome scheint wohl sehr empfindlich zu sein wenn es Daten von unterschiedlichen Servern per AJAX ausführen soll und verweigert das.

Das ist dann wohl ein CORS-Problem:
https://www.w3.org/wiki/CORS_Enabled

Das würde auch erklären, warum dein Workaround funktioniert, da die Daten beim Sharen irgendwie von Shopify kommen und nicht von meiner Festplatte.

Ich habe jetzt auch noch folgende zusätzliche Fehler im Chrome gefunden, die das bestätigen. Chrome wird keine Cookies per Cross Origin zulassen und damit kann z.B. der shop_events_listener.js (2 Eintrag ganz unten) nicht sauber arbeiten.

Mich wundert nur, warum außer mir bisher niemand ein Problem damit hat. 🤔

Bildschirmfoto 2021-11-15 um 17.56.41.png

Gabe
Shopify Staff
16357 2587 3853

Hey @SMEG 

 

Wir sind uns ziemlich sicher, dass die Fehlermeldungen nicht viel damit zu tun haben denn die meisten Browser werden dieselben Warnungen/Fehler zeigen, aber das Warenkorb-Popup funktioniert trotzdem von dem was unsere Tests ergeben haben.
Wir denken, dass der Fehler ein JavaScript-Fehler ist, so wie du ihn geschickt hast, und er scheint nur auf deinem Rechner aufzutreten. 

Alles deutet also darauf hin, dass das Problem nur bei dir auftritt. Möglicherweise wird die Anfrage von deinem Rechner in unserem Backend nicht korrekt weitergeleitet.

Aber wir prüfen das noch also watch this space! 

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

SMEG
Shopify Partner
38 2 18

@Gabe hmmm okay. Ich habe das jetzt schon ein paar mal ohne Erweiterungen in Chrome probiert und auch dann geht es nicht.

 

Gabe
Shopify Staff
16357 2587 3853

@SMEG 

 

Hast du damals lösen können?

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

SMEG
Shopify Partner
38 2 18

Nein, leider nicht.