Produktanzahl verändert sich nicht -> Seite aktualisiert stattdessen (Dawn 2.0)

[SimonMerkt]

Hi zusammen, 

sobald auf der Produktpage auf den "+" Button gedrückt wird, um die Anzahl zu verändern, wird die Page aktualisiert, die Produktanzahl jedoch wieder auf 1 zurückgesetzt. Verändert man direkt im Eingabefeld zwischen den "-" und "+" Buttons die Anzahl, funktioniert alles wie es soll. Im Warenkorb lässt sich die Anzahl ebenfalls ohne Probleme verändern.

Theme: Dawn 2.0

Ich denke am besten macht ihr euch davon selbst ein Bild: https://tirasioils.de/products/walnussoel

Jede Hilfe und jeder Ansatz wird wirklich sehr geschätzt!

Vielen Dank fürs durchlesen und für deine Hilfe.

[Finer]

@SimonMerkt ist das Problem bereits behoben? Bei mir hat alles funktioniert.

[romu-naassancom]

Hallöchen, liebe shopify Community.
Wir haben ebenfalls das oben beschriebene Problem.
Interessant dabei ist:
Haben 3 Shops mit Dawn 12.0. Da gibt es nur bei einem ein Problem.
Ein Shop ist noch auf Dawn 10.0. Der macht ebenfalls Probleme.
Auch hier ein Verändern der Produktanzahl mit "+" und "-" lädt die Seite neu. Eine direkte Eingabe in das Zahlenfeld funktionieren aber.
Eine Veränderung der Anzahl im Warenkorb klappt ebenfalls problemlos. Der Fehler scheint also wirklich nur auf der Produktseite aufzutauschen.
Warum es in einem unserer Shops funktioniert? Keine Ahnung.

Das Problem scheint aber auch in einem anderen Shop von uns aufzutreten, der Sense 12.0 als Theme hat.

Eine Hilfe wäre da shon wirklich klasse.
Ihr könnt euch selber ein Bild davon machen:
shopify dawn 12.0 shop, der rumzickt: https://pv-insel.de/products/huawei-sdonglea-05wlan-fe
shopify dawn 10.0 shop, der rumzickt: https://der-ergotisch.de/products/exeta-ergosmart-sitz-steh-schreibtisch-weiss
shopify dawn 12.0 shop ohne Probleme: https://omniblend.de/products/omniblend-v-tm-800a-schwarz-1-5-l-standmixer-bpa-frei
shopify dawn 12.0 shop ohne Probleme: https://www.humuserde.de/products/kokoserde-1er
Der sense 12.0 shop mit Problemen:  https://treebag.de/products/treebag-pvc-bewasserungssack-grun

Wir werden da echt nicht schlau draus.
Also Bitte noch einmal: Eine Hilfe wäre da schon wirklich klasse!

[Gabe]

Hey @romu-naassancom 

Das Problem, das du mit dem Dawn-Theme in Shopify beschreibst, bei dem die Seite neu lädt, anstatt die Produktanzahl zu ändern, wenn auf den "+"-Button geklickt wird, oder die Menge wieder zurücksetzen auf "1", scheint sehr ärgerlich zu sein. Ich habe das jetzt in deinen Links replizieren können.

Es könnte allerdings mehrere Ursachen haben, einschließlich spezifischer Anpassungen oder Konflikte mit anderen Skripten oder Frontend Apps, die in deinem Shopify-Shop integriert sind. Wenn das Dawn Theme auf 12.0 aktualisert wurde, ist vielleicht eine App noch mit dessen injizierten Code auf der PDP aktiv die nicht mit dieser Dawn Version kompatibel ist. In der Developer Console wird das auch bestaeigt mit einer sehr hohen Anzahl an Fehlermedlungen wie du hier sehen kannst:

Eine Lösung könnte darin bestehen, Änderungen an den Liquid-Dateien, die für das Theme verwendet werden, rückgängig zu machen. Du kannst zu den vorherigen Versionen dieser Dateien zurückkehren, indem du im Shopify-Adminbereich auf "Online Store" > "Themes" > "Actions" > "Edit code" gehst und dann die spezifische Datei öffnest, die geändert wurde. Dort solltest du eine Option finden, um zu einer früheren Version der Datei zurückzukehren.

Da das Problem in verschiedenen Shops mit unterschiedlichen Versionen des Dawn-Themes auftritt, deutet alles somit auf ein Problem mit dem Theme selbst. In diesem Fall könnte es hilfreich sein, sich an den Shopify-Support oder die Entwickler des Frontend Apps zu wenden, um weitere Unterstützung zu erhalten.

Fuege auch eine Frische Kopie des Dawn Themes zum Shop um zu schauen wie das Code da aussieht und vergleiche es am besten mit dem obigen Theme im diffchecker.com Tool. 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!

VG,

[romu-naassancom]

Hallo Gabe,

danke für die Informationen.
Meinst du hier das theme.liquid oder main-product.liquid?

[Gabe]

@romu-naassancom 

Kann ich leider nicht sagen den ich kenne dein Liquid Code nicht. Du siehst aber alle Liquid Dateien die geändert wurden - die haben einen Punkt, wie unten abgebildet und du wirst diese mit einer 🔎 selber durchgehen müssen:

Ansonsten wird das ein Entwickler verlangen der einen 👀 in euer Code wirft. Viele Experten findest du in unserer privaten FB Gruppe hier. Ansonsten haben wir einige Frontend Entwickler aus Indien in unserem Design Forum hier. Aber tbh, eure Themes scheinen laut der Developer Console sehr kaputt zu sein. So viele rote Fehler habe ich lange nicht mehr gesehen.

Wenn du es selber fixen möchtest dann vielleicht in einer Themekopie als Testumgebung zuerst testen und lade auch eine frische Kopie vom Theme Store als Vergleich zum Shop. Auch ein Backup deines Themes erstellen, bevor du den Code bearbeitest, oder den Code wiederherstellen, falls dies nötig sein sollte. 

Du könntest auch einen unserer zertifizierten 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!

VG,

[romu-naassancom]

Hallo Gabe,

danke für die Antwort.
Falls kein Backup vorliegt, wo kann ich die orginal theme.liquid Datei/Code finden?
Kann ich da einfach dawn in meiner Theme Übersicht installieren und dort den Code entnehmen?
VG

[romu-naassancom]

Hi Gabe,

ich glaube, ich habe das Problem gefunden. Im Theme Editor.
Ich hatte auf der Produktseite ein benutzerdefiniertes Liquid, das die Artikelnummer des Produktes anzeigen sollte.
Nachdem ich diesen ausgeblendet hatte und auf der Seite erneut versucht habe, die Artikelzahl per "+" und "-" zu erhöhen/verringern, klappte dies nun problemlos.
Ganz wichtig zu erwähnen: Die Vergößerung der Bilder ging vorher ebenfalls nicht! Nun funktioniert es ebenfalls 😉

Hier der Code, um den es sich handelt (der im custom.liquid Bereich lag):

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>Art.Nr.: {{ variant.sku }} </strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

Ich hoffe, ich konnte hier irgendwie zur Lösung des Problems beitragen.
Das Problem, das ich nun habe:
Wie kann ich dafür sorgen, das der Artikelname zu sehen ist, ohne solche Probleme?

Viele Grüße

[Gabe]

@romu-naassancom 

Hmm, gut dass du den  🪱 gefunden hast! 

Es hat also mit dem benutzerdefinierten Liquid-Script zusammengehängt. Insbesondere der JavaScript-Teil, der die Seite automatisch neu lädt, könnte der Grund für die beobachteten Probleme sein. Um den Artikelnamen (SKU) auf der Seite anzuzeigen, der Teil des Scripts, der setInterval verwendet, um die Seite regelmäßig neu zu laden, könnte entfernt werden. Das ist vielleicht der Grund für das Zurücksetzen der Produktanzahl und die Probleme mit der Bildervergrößerung. Ersetze das aktuelle Script durch etwas wie:

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>Art.Nr.: {{ variant.sku }} </strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Der Code zeigt weiterhin die Artikelnummer an, ohne die Seite neu zu laden. Stelle sicher, dass die "+" und "-" Buttons korrekt konfiguriert sind. Sie sollten die Anzahl ändern, ohne die Seite neu zu laden. Dies könnte durch entsprechende AJAX-Funktionalität oder JavaScript-Handling erreicht werden.

JavaScript so anzupassen, dass es nur auf bestimmte Produkte oder Situationen angewendet wird. Beispielsweise kannst du eine Bedingung im Liquid-Code hinzufügen, die überprüft, ob es sich um das spezifische Produkt handelt, für das das Skript erforderlich ist. Wenn das Skript nicht benötigt wird, wird es nicht ausgeführt.

Dies verhindert, dass die Seite unnötigerweise neu geladen wird, und könnte in deinem Fall helfen, wo das Problem nur bei bestimmten Produkten oder Themes auftritt. Es ist auch ratsam, das Skript sorgfältig zu überprüfen und sicherzustellen, dass es keine Befehle wie location.reload() enthält, die eine vollständige Seite Neuladung verursachen.

[romu-naassancom]

Hi Gabe,

freut mich ebenfalss, das ich hierbei helfen konnte.

VG

[Gabe]

@romu-naassancom 

Um Artikelnummern (SKU) für Produktvarianten dynamisch auf der Produktseite in Shopify anzuzeigen, JS verwenden. Füge Liquid-Code ein, der die SKU für die aktuell ausgewählte Variante anzeigt, vielleicht innerhalb der Produktbeschreibung oder in einem anderen Bereich der PDP. JavaScript verwenden, um auf Änderungen bei der Auswahl der Varianten zu reagieren. Das Skript erkennt, wenn eine neue Variante ausgewählt wird, und aktualisiert die angezeigte SKU entsprechend. Einen Event Listener hinzuzufügen, der auf Änderungen im Varianten-Select-Element hört und dann die SKU aktualisiert, wenn eine andere Variante ausgewählt wird. Nutze die Shopify API oder das Produktobjekt, um auf die SKU der jeweiligen Variante zuzugreifen.

Hier weiteres aus unserer Developer Doku und die Foren, sowie  Ed Codes und  GitHub:

Dynamische Aktualisierung der SKU bei Variantenänderung:

• Für Shopify-Themes wie Dawn kannst du eine neue Blockart in der main-product.liquid-Datei erstellen, um die SKU anzuzeigen. Du erstellst einen neuen Blocktyp im Schema und gibst HTML aus, das angezeigt wird, wenn der neue Block zur Seite hinzugefügt wird.
• In der global.js-Datei fügst du Code hinzu, um die SKU dynamisch zu aktualisieren, wenn eine andere Variante ausgewählt wird. Dazu gehört das Hinzufügen von Funktionen wie renderProductInfo() und updateSku(html), um die SKU zu aktualisieren und die Sichtbarkeit zu steuern, basierend darauf, ob eine Variante verfügbar ist oder nicht.

Auflisten der Varianten und ihrer SKUs:

• Wenn du ein anderes Theme verwendest und die oben genannte Methode nicht anwendbar ist, kannst du einfach eine Liste aller Varianten und ihrer SKUs ausgeben. Dies kann in einem zusätzlichen Abschnitt oder in einem vorhandenen Bereich der Produktseite erfolgen. Du kannst die SKUs in einer geordneten Liste oder mit Aufzählungszeichen darstellen.

Ich bin nun mal ab in das W-Ende und wünsche dir eine schönes! 😉

[romu-naassancom]

Hallo Gabe,
danke. Konnte ich bereits lösen, indem ich im Theme-Editor auf einer Produkt-Seite den Standard-Block "SKU" hinzugefügt habe.
Es ist wirklich gut, bei solchen Problemen im Hinterkopf zu haben, das JavaScripts mit Schleifen/reload-Funktionen für soetwas verantwortlich sein könnten!
... wobei ich hier klar im Vorteil war und eine Vergleichskonfiguration hatte (die Shops, die funktionierten). So konnte ich einfach Bereiche deaktivieren, die in den anderen Shops nicht vorhanden waren.
Aber der Code, den ich für die Anzeige der Artikelnummer eingetragen hatte - Das hatte ich am Anfang überhaupt nicht auf dem Schirm 😅

[Gabe]