Refresh Product page info when variant selected

Store Design
1

I am moving my site over to use the latest Dawn theme. In my previous theme I added code to hide and show message boxes depending which variant was selected.

Now in Dawn I am trying to do it cleanly. I have added custom liquid elements and added the code. However when you select different variants it does not refresh the page. I would rather avoid touching the JS like in previous theme if I can. This is my liquid element for 2 boxes when a specific variant selected.

 

{% assign current_variant = product.selected_or_first_available_variant %}
              
{%- if current_variant.title == 'Send Direct' -%}

 

              

{%- endif -%}
2

Hi @Paul_Davis ,

With Dawn theme, you have to edit JS to make it work. Because all data will be reloaded with ajax, it will not refresh the page. Go to Assets > global.js file, find ‘class VariantSelects extends HTMLElement’. You can add custom code to display here.

Because this is a complex request and requires debugging, I can’t guide you in detail. You can hire professionals for it, they will help you change quickly.

Hope it helps!

3

Thanks for response.

As I will need to change the JS I will just write it myself.

For anyone else who wants to know how I am going to do it then I will try explain.

For in Global.js find

class VariantSelects extends HTMLElement

Inside that class find the function

renderProductInfo()

Under the line this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
I will add my own this.toggleMessageBoxes(!this.currentVariant)

Then just above the function toggleAddButton(disable = true, text, modifyClass = true)

I will add my own function toggleMessageBoxes.

Inside here I will just show or hide the message box elements I want to display if the correct variant is selected.

Was hoping this could all be done in the them settings in custom liquid because it means each update I have to keep editing the js files which is a pain.

4

Here is my code that’s working. I will post the Global.js code and my custom liquid.

Global.js in the VariantsSelect Class. In renderProductInfo I added the call toggleMessageBoxes which called my function. This just finds the div element and sets it to visible or not.

renderProductInfo() {
    fetch(`${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${this.dataset.section}`)
      .then((response) => response.text())
      .then((responseText) => {
        const id = `price-${this.dataset.section}`;
        const html = new DOMParser().parseFromString(responseText, 'text/html')
        const destination = document.getElementById(id);
        const source = html.getElementById(id);

        if (source && destination) destination.innerHTML = source.innerHTML;

        const price = document.getElementById(`price-${this.dataset.section}`);

        if (price) price.classList.remove('visibility-hidden');
        this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
      	this.toggleMessageBoxes(this.currentVariant)
      });
  }

  toggleMessageBoxes(variant) {
    
	var message = document.getElementById("custom_text");
	if( variant && variant.title == 'Send Direct' ){

      message.style.display = "block";
	} else {

      message.style.display = "none";
    }
  }

In my custom liquid I have the div id as custom_text which the Global.js uses to find and I set the initial style to hide the elements.
5

Quick note for developers of the theme if you read this.

Now when a variant change happens you actually refresh certain elements. Buy Buttons etc. What would be better is to add a flag to all elements in the builder. For example the Custom Liquid element on product page in builder. If you have a flagon there to select for refresh on changes which would then parse these elements in the global.js this would mean that as a site owner I do not have to worry about making sure all my updates are added to every theme update.

6

Hi @Paul_Davis ,

So have you added it successfully?

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.