Varianten Beschreibung ändert sich (AJAX)

[lajones]

Hi,

Ich hoffe, dass mir jemand weiterhelfen kann.

Es geht um die Darstellung unserer Variantenbeschreibungen im Theme "Expanse".

Bis letzte Woche hat es noch funktioniert, dass sich die Beschreibung dynamisch angepasst hat, je nachdem welche Variante ausgewählt wurde.

Nun ist es so, dass nach Auswählen einer Variante erst die Seite neu geladen werden muss, bis die Beschreibung auftaucht (Beispiel-Seite: https://www.spessarttraum.de/collections/beliebte-produkte/products/faserbettdecke_silber_spessarttr...).

Und hier nach Neuladen der Seite:

Wir haben eine HTML Kachel eingesetzt und dabei folgenden Code benutzt:

<h2 class="collapsible-trigger-btn">Beschreibung</h2>
{% for variant in product.variants %}
{% assign active_variant = current_variant.title %}
{% assign current = product.selected_or_first_available_variant %}
<div class="product-description option_value value_{{variant.title | remove: ' ' | replace: '/' , '_'}} {% if active_variant == variant.title or current.title == variant.title %}Show{%else%}hide{%endif%}">
{{ variant.metafields.custom.produktbeschreibung }}
</div>
{% endfor %}

Wir können uns nicht erklären, warum es vorher funktioniert hat und jetzt auf einmal nicht mehr. Aber es scheint, als würde hier irgendetwas fehlen, das nach Auswahl der Variante die richtige Beschreibung anzeigt.

Wir wären so dankbar, wenn jemand drüber schauen könnte.

Vielen Dank im Voraus

[Gabe]

Hey @lajones 

Das kann aufgrund einer Reihe von Dingen auftreten. Habt ihr das Theme die Woche zur nächsten Version aktualisiert?

Es scheint das etwas nicht ganz kompatibel mit diesem aktuellen Code mehr ist. Funktioniert es wenn ihr das Theme Code zurücksetzt oder ein Kopie mit einer älteren Version des codes testet?

Die Zeile, die das Problem verursachen könnte, ist die, die prüft, ob die aktive Variante mit der Variante übereinstimmt, die gerade dargestellt wird:

{% if active_variant == variant.title or current.title == variant.title %}Show{%else%}hide{%endif%}

Diese Zeile scheint nur die Beschreibung anzuzeigen, wenn die aktive Variante oder die aktuell ausgewählte Variante mit der Variante übereinstimmt, die gerade dargestellt wird. Dies könnte das Problem sein, wenn die Seite neu geladen wird und eine andere Variante als die aktive ausgewählt ist.

Es könnte auch ein JavaScript-Problem sein. Viele Themes verwenden JavaScript, um Elemente auf der Seite dynamisch zu ändern, basierend auf den Aktionen des Benutzers. Wenn es ein JavaScript-Problem gibt, könnte es sein, dass der Code, der die Produktbeschreibung ändern soll, wenn eine andere Variante ausgewählt wird, nicht ausgeführt wird. Hast du versucht die JavaScript-Konsole im Browser zu verwenden, um zu sehen, ob es Fehlermeldungen gibt, die auf ein solches Problem hinweisen könnten?

[Gabe]

@lajones 

Desweiteren - wurde die <h2 class> Attribut in der letzten Woche geändert, vielleicht von einer anderen Hx Style, wie <h3 class> oder <h4 class>?

[lajones]

Hi @Gabe ,

Vielen Dank für die schnelle Rückmeldung.

---

Die Zeile, die das Problem verursachen könnte, ist die, die prüft, ob die aktive Variante mit der Variante übereinstimmt, die gerade dargestellt wird:

{% if active_variant == variant.title or current.title == variant.title %}Show{%else%}hide{%endif%}

Diese Zeile scheint nur die Beschreibung anzuzeigen, wenn die aktive Variante oder die aktuell ausgewählte Variante mit der Variante übereinstimmt, die gerade dargestellt wird. Dies könnte das Problem sein, wenn die Seite neu geladen wird und eine andere Variante als die aktive ausgewählt ist.

Damit triffst du es, denke ich, genau auf den Punkt.

Die Konsole wirft mir tatsächlich auch einiges auf, allerdings kann ich das nicht zu 100% interpretieren. 

Irgendwo fehlt etwas, um das Laden der jeweiligen Varianten Beschreibungen hervorzurufen, aber was und wo erschließt sich mir leider noch nicht.

Vielen Dank für deine Hilfe

[Finer]

@lajones meines Wissens nach, konnte man bei noch keinem Theme standardmäßig Varianten-Inhalte (Metafelder) einfach einblenden lassen. Um das zu ermöglichen, gibt es aber eine ganze Reihe an Event-Listener, die als Grundlage genutzt werden können, um Inhalte nach einem Variantenwechsel, ein- und auszublenden. 

Hattet Ihr ein solches Script im Einsatz?

[lajones]

Hi @Finer ,

Vielen Dank auch an dich für die schnelle Rückmeldung.

Wir hatten kein Script im Einsatz, sondern lediglich folgenden Code, mit dem es bis vor kurzem einwandfrei funktioniert hat:

<h2 class="collapsible-trigger-btn">Beschreibung</h2>
{% for variant in product.variants %}
{% assign active_variant = current_variant.title %}
{% assign current = product.selected_or_first_available_variant %}
<div class="product-description option_value value_{{variant.title | remove: ' ' | replace: '/' , '_'}} {% if active_variant == variant.title or current.title == variant.title %}Show{%else%}hide{%endif%}">
{{ variant.metafields.custom.produktbeschreibung }}
</div>
{% endfor %}

Vielleicht ist das hier auch semi-relevant dazu:

• https://www.identixweb.com/an-ultimate-guide-to-shopify-variant-metafields-for-your-store/
• https://community.shopify.com/c/shopify-apps/react-to-variant-change-to-display-hide-text-depending-... 

Wenn es eine Reihe von Event Listener gibt, die wir zur Umsetzung einsetzen könnten, wäre das super. Kannst du mehr Details mit mir teilen?

Vielen Dank 

[Gabe]

@lajones 

Gehe doch mal in die Liquid Datei mit dem Code, klicke auf "Aktuelle Änderungen" ganz oben und vergleiche die Versionen miteinander im diffchecker.com Tool um zu sehen welche Änderungen durchgefuhrt wurden.

[lajones]

Hey @Gabe ,

Das war ein super Tipp.

Ich hab mal versucht, die relevanten Änderungen herauszufiltern.

Was hälst du davon?

Der Yoast Plugin Code kommt mir komisch vor, bei dem zweiten bin ich mir nicht so sicher.


{% comment -%}Auto-disabled. Yoast plugin is taking care of Meta Tags output.{%- endcomment -%}
{%- assign yoast_seo_settings = shop.metafields.yoast_seo.settings.value | default: shop.metafields.yoast_seo.settings -%}
{%- if disabled_by_yoast_seo or yoast_seo_settings.integrations.webmasterVerification.google == blank or yoast_seo_settings.integrations.webmasterVerification.google == null -%}
<meta name="google-site-verification" content="K0HiS6MrVvdVJevK-0o9W4N7a5SGA397dmX2srPT8fg" />
{%- comment -%} End Yoast auto-disable. {%- endcomment -%}
{%- endif -%}
<!-- GSSTART Show variants. Do not change -->

{% if request.path contains "/products/" %}{% else %}{% if request.path contains "/collections/" %}<script type="text/javascript" src="https://gravity-apps.com/variantmanager/js/shopify/image_swapschlafstil7268.js?v=a9e14d93320269da13e..."></script>{% endif %}{% endif %}{% endif %}
<!-- Show variants code end. Do not change GSEND --></head>

Vielen Dank

[Finer]

@lajones in den Beiträgen wird ebenfalls ein Script verwendet, um bei einem Variantenwechsel die Inhalte zu tauschen. Habt Ihr ein solches Script irgendwo eingesetzt oder wieder herausgenommen? 

Welches Theme verwendet Ihr denn?

[lajones]

Hallo @Finer ,

Am Code wurde von uns nichts verändert, außer das ist automatisch per Update oder per App passiert, die hinzugefügt wurde.

Also herausgenommen oder verändert wurde nichts.

Es fehlt also etwas - und mit einem solchen Script Zusatz sollte es theoretisch wieder klappen?

Viele Grüße

[Gabe]

@lajones 

Ich habe oben gefragt ob die <h2 class> geändert wurde, vielleicht von einer <h3> oder <h4>. Das könnte auch einen Effekt auf das korrekte Ausführen des Skriptes haben.

[lajones]

Hi @Gabe ,

Es wurde nichts an der Überschriften-Hierarchie oder den H-Tags geändert.

Viele Grüße