Dawn theme 15.2 : how to display a Richtext variant metafield?

[TheRealBarenzia]

Hello!

Each variant of my products have specifics, and I need to display the specifics of whatever variant is selected.
In other words, whenever one of my products have variants, I must display the description of that variant along the general description.

I spend several hours on this issue and am still struggling, so here I am, hoping for the insights of a kind soul.

I've seen multiple people suggesting using metafields for this, so this is what I've tried:

- I went in the Shopify Settings > Custom data > Variants and created a new metafield definition:

Click to expand...

- Then I went editing a couple product variants to put some content inside this new metafield:

Click to expand...

- from there, nothing that I tried worked. I went to the Visual Composer (Theme > Edit), went to a product page that have a variant, and tried a new Text block then using "Connect dynamic source". But the only choices are the product-level metafields, I can't select my custom variant field there

Click to expand...

- Then I tried creating a "Custom Liquid" block. I hoped I could access the data with the key, so I tried several things (I've found on the Web) but nothing was ever displayed

Click to expand...

{{ variant.custom.description_de_variante }}

 {{variant.metafields.custom.description_de_variante }}

(and other things that didn't work better)

- At this point I had to delve into code (which I really tried to avoid). This is what I tried for reference; keep in mind I know nothing about Shopify development, Liquid and stuff

Click to expand...

Assisted by ChatGPT I tinkered with the following files:

// snippets/product-variant-options.liquid
I added the following property to the <input> and <option> element:

data-variant-metafield="{{ metafield | escape }}"

// snippets/product-variant-picker.liquid
I believe I added a parameter to a "render 'product-variant-options' function call or something

 {% render 'product-variant-options',
            product: product,
            option: option,
            block: block,
            picker_type: picker_type,
            metafield: variant.metafields.custom.description_de_variante // added that
 %}​

- I edited my "Custom Liquid" block to add a div wrapper with an id to be able to track and log stuff, and also change the way to access the metafield value:

// this is Liquid code inside my Custom Liquid block (I did it from the visual composer)
<div id="variant-metafield-display">
  {{ product.selected_or_first_available_variant.metafields.custom.description_de_variante }}
</div>

At this point I got something displayed! On the first rendering, I could see a big ugly JSON in the place of the Liquid Code. It seem to be the way Shopify represents the RichText, only that it's there in a JSON string. Piping this to Shopify method (if it is what " | render" mean) did nothing. And that JSON disappears whenever I select another variant (it's only there on the first render of the page).

// assets/product-form.liquid
I have a wall of console.logs in a block there, and it's where I tried different things to access the variant custom data. I guess it's only noise, but I can provide it if needed

document.addEventListener('DOMContentLoaded', function() {

Long story short, I'm no wiser and fear I'm wasting my time with these custom JavaScript hacks. I'm no Shopify professional and am merely trying to help my father solve this issue with variant descriptions.

Any help much appreciated!

[PaulNewton]

Note on chatgpt and other LLM word generators:

Don't use chatgpt for technicals you are not familiar with it's a good way to waste time on random generated nonsense that presents itself as being correct but can't cite any truth and then making other people have to fix the original goal and address any misconceptions the word generator created.

At minimum for any code that DOES NOT WORK generated by such tools keep it to yourself it's a literal waste of time to discuss or even make others read.

Hi @TheRealBarenzia 👋 

Your on the right track with this:

{{variant.metafields.custom.description_de_variante }}

But again just like with product metafields being only for product metafields, the custom-liquid block etc are in the context of a PRODUCT template as there is not such thing as a variant template.

You need to make sure in whatever CONTEXT the custom-liquid is being used there is an actual "variant" variable.

otherwise variant.metafields... means nothing because "variant" doesn't exist.

Use the product object https://shopify.dev/docs/api/liquid/objects/product

to get a variant https://shopify.dev/docs/api/liquid/objects/product#product-selected_or_first_available_variant 

{{product.selected_or_first_available_variant.metafields.custom.description_de_variante }}

or {{product.selected_or_first_available_variant.metafields.custom.description_de_variante.value }}

to get the point of having some sort of output then work on the nature of the output as either raw or using metafield filters

https://shopify.dev/docs/api/liquid/filters/metafield-filters 

[TheRealBarenzia]

Thank you Paul! RichText is now displaying thanks to the metafield filter. For future visitors I'll do a summary (starting from unmodified Dawn theme):

1. Shopify Settings > Custom data > Variants > created a new metafield definition (type RichText)
2. Edit a couple variants to ensure there is content inside this new metafield
3. In the Visual Composer (Theme > Customize) I went to the product page that have the variants and created a Custom Liquid block with the following code (⚠️ replace "description_de_variante" with the key of your field, displayed in Variable metafield definition view in Settings)

{{ product.selected_or_first_available_variant.metafields.custom.description_de_variante | metafield_tag }}

 
But there is still a problem (so I can't mark this as Solved yet): whenever selecting another variant, the metafield data isn't updated.
I mean, the variant id in the URL changes, the other elements (price, quantity etc.) are updated properly, but my variant description isn't.

I've also tried using {{ product.selected_variant.metafields.custom.description_de_variante }} but it didn't fix the update issue.

Is there something I'm missing, or do I need to figure out a JavaScript solution for this?
Thanks again

PS (about GPT)

Click to expand...

I resorted to it after I failed to Google a solution & before asking for human help.

However you're totally right. I thought providing more info about what I've tried would help, but since it didn't work, it's just time-wasting noise here. I'm sorry about it.

I was thinking of removing this section from OP to keep this whole thread cleaner, do you agree?

[TheRealBarenzia]

Until we find a cleaner solution, I've wrote a (very dirty) bit of JavaScript that solve the variant description update issue.

It's intended to work with the "Radio button" variant selection, and is the step 4 (steps 1-3 are summarized in my previous post).

Editing theme code, just drop this at the end of assets/product-form.js:

// Custom code to handle Variant metatext description being refreshed on variant selection
document.addEventListener("DOMContentLoaded", function() {
  const inputs = document.querySelectorAll("variant-selects fieldset input");
  
  inputs.forEach(function(input) {
    input.addEventListener("click", function() {
      setTimeout(function() {
        const currentUrl = window.location.href;
        const queryString = window.location.search;
        const newUrl = window.location.origin + window.location.pathname + queryString;
        window.location.href = newUrl;
      }, 300); // Adjust delay if needed
    });
  });
});

This is too ugly and wrong to "Accept as Solution", but it's still a workaround so I'll leave it there until we find a better way.

PS: Found out I can't edit my posts after 2 hours, so I intend to ask for a Community team member to clean up this thread once we get to the bottom of this issue (or if we fail to find an alternative to this hack) 🙏

[PaulNewton]

@TheRealBarenzia  thread seems fine this is what a workbench looks like , including the chatgpt stuff as warning to future readers about using it for coding instead of summarization of known knowledge.

See the section rendering api for updating parts of page, https://shopify.dev/api/section-rendering 

Most OS2.0 themes based on dawn will have variant-change behavior using fetch for section-rendering but may not update every single block.