Shopify themes, liquid, logos, and UX
I use the Impact Theme.
I would like my custom Liquid code in Shopify to change on the product page when the variant is changed.
With this code:
{% for variant in product.variants %} {% if product.selected_or_first_available_variant.id == variant.id %} <div class="variant-description"> {{ variant.metafields.custom.beschreibung }} </div> {% 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($){ // Funktion, um den Text basierend auf der ausgewählten Variante zu aktualisieren function updateVariantDescription() { var selectedVariantId = {{ product.selected_or_first_available_variant.id | json }}; var description = ''; {% for variant in product.variants %} if ({{ variant.id | json }} == selectedVariantId) { description = {{ variant.metafields.custom.beschreibung }}; } {% endfor %} $(".variant-description").text(description); } // Bei Änderung der Variante aktualisieren $(document).on('change', ".single-option-selector", function(){ updateVariantDescription(); }); // Initialen Text festlegen updateVariantDescription(); }); </script>
This is the code that I've written in the Custom Liquid block.
The text only changes after reloading the page. Can someone help me?
Update:
ich habe an einem Workaround gearbeitet hier die Informationen die ich durchgeben kann:
In den Theme Liquids habe ich folgende anpassungen gemacht:
product-info.liquid
<variant-vdes form="{{ product_form_id }}" class="product-info__description" {% if product.selected_or_first_available_variant.metafields.custom.u_vdes == blank %}hidden{% endif %} {{ block.shopify_attributes }}>
{{ product.selected_or_first_available_variant.metafields.custom.u_vdes -}}
</variant-vdes>
Dies habe ich unterhalb der SKU eingetragen damit dort das Metafield der jeweiligen Variante angezeigt wird. (Siehe Anhang: Bild 1.png)
theme.js.liquid
var VariantVDes = class extends HTMLElement {
constructor() {
super();
this._onVariantChangedListener = this._onVariantChanged.bind(this);
}
connectedCallback() {
document.forms[this.getAttribute("form")]?.addEventListener("variant:change", this._onVariantChangedListener);
}
disconnectedCallback() {
document.forms[this.getAttribute("form")]?.removeEventListener("variant:change", this._onVariantChangedListener);
}
_onVariantChanged(event) {
if (!event.detail.variant) {
this.hidden = true;
} else {
this.innerText = `${event.detail.variant[" metafields.custom.u_vdes "]}`;
this.hidden = !event.detail.variant[" metafields.custom.u_vdes "];
}
}
};
if (!window.customElements.get("variant-vdes")) {
window.customElements.define("variant-vdes", VariantVDes);
Das bold geschriebene metafields.custom.u_vdes wird leider nicht gefunden, dies sorgt dafür, dass beim wechseln der Variante einfach nichts angezeigt wird. (Siehe Anhang: Bild 2.png)
Tausche ich in dem Teil des Codes metafields.custom.u_vdes zu beispielsweise sku funktioniert der wechsel aber es zeigt mir natürlich dann die SKU an:
else {
this.innerText = `${event.detail.variant[" sku "]}`;
this.hidden = !event.detail.variant[" sku "];
}
(Siehe Anhang: Bild 3.png)
Meine Vermutung war dann dass in der microdata-schema.liquid noch die definitionen gemacht werden müssen (das bold geschriebe ist das was ich hinzugefügt habe):
microdata-schema.liquid
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.metafields.custom.u_vdes != blank -%}
"vdes": {{ variant.metafields.custom.u_vdes | json }},
{%- endif -%}
&&
"sku": {{ product.selected_or_first_available_variant.sku | json }},
"vdes": {{ product.selected_or_first_available_variant.metafields.custom.u_vdes | json }},
Leider hat das das Problem nicht gelöst.
Ich sollte noch erwähnen, dass ich alle Möglichen Optionen bei den event.detail.variant probiert habe (variant.metafields.custom.u_vdes, custom.u_vdes, u_vdes, vdes)
Ich hoffe ich konnte es verständlich erklären.
Grüße
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025