Display only selected variant when webpage loads the first time

[JR954]

Hi everyone,

I customised a store to display the metafields of a product in a table, and it refreshes correctly when selecting a different variant; however, when the webpage is loaded for the first time, a table for each variant is created. How can I manage that it initially loads a single variant instead of all of them?

I have created a snipped that is rendered into the main product section, which contains the following code:

{% for variant in product.variants  %}
              <div class="variant__description" data-variant-id="{{variant.id}}" style="display: none;" {% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>
              <table class="tg">
                  {% if variant.metafields.custom.product_code%}<tr><th>Product Code:</th><th>{{ variant.metafields.custom.product_code }}</th></tr>{% endif %}
                  {% if variant.metafields.custom.wattage %}<tr><td>Wattage:</td><td>{{ variant.metafields.custom.wattage }}</td></tr>{% endif %}
                  {% if variant.metafields.custom.voltage %}<tr><td>Voltage:</td><td>{{ variant.metafields.custom.voltage }}</td></tr>{% endif %}
                  ...
                  ...
                  ...
               </table>
              {% if variant.metafields.custom.product_sheet != blank %}<p><a href="{{ variant.metafields.custom.product_sheet }}">Product Sheet</a></p>{% endif %}
              </div>
{% endfor %}

 Also, I have added a JS function in the global asset to refresh the current variant as follows:

updateVariantDetails(currentVariant){
    const variants = document.querySelectorAll('[data-variant-id]')
    
    variants.forEach( function(variant) 
    {
        variant.style.display = 'none';
        if(variant.dataset.variantId == currentVariant.id)
        {
          variant.style.display = 'block'
        }
    });
    
   }

The above function is called in the onVariantChange() function (within global asset).

onVariantChange() {
    ...
    ...
    ...
    if (!this.currentVariant) {...}
    else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      //Function to update the current variant (and its details)
      this.updateVariantDetails(this.currentVariant);
    }
  }

I have tried hidding the <div> initially and then making it visible when a variant is selected; however, this causes the webpage to load no table at the beginning.

Is there a way to display a selected variant only upon refresing the webpage (i.e. if the webpage is refreshed and style 2 is selected, then only show the table for style 2 and not style 1/3)?

[JR954]

Fixed it by initially hiding the table and leaving a message asking the user to select a variant, then as a variant is selected, displaying the table with the variant information.

This code is the HTML used (bold text for the CSS code that hides/display the table. Done via if conditional using Liquid):

<div class="variant__description" data-variant-id="{{variant.id}}" style="display: none;"

{% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>

This is my code:

{% for variant in product.variants %}
   <div class="variant__description" data-variant-id="{{variant.id}}" style="display: none;" {% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>
   <table class="tg" >
     {% if variant.metafields.custom.product_code%}<tr><th>Product Code:</th><th>{{ variant.metafields.custom.product_code }}</th></tr>{% endif %}
       ...
     {% if variant.metafields.custom.warranty %}<tr><td>Warranty:</td><td>{{ variant.metafields.custom.warranty }}</td></tr>{% endif %} 
   </table>
   </div>
{% endfor %}

Additionally, added some JS code to hide the product description (it was leaving an empty space as the variant information is displayed underneath the product  description) and hiding the message requesting to select a variant using:

document.querySelector("#ProductInfo-template--15872891748581__main > div.metafield > p").remove();

This is my JS code:

updateVariantDetails(currentVariant)
{
 var message = document.querySelector("#ProductInfo-template--15872891748581__main > div.metafield > p")
 var description = document.querySelector("#ProductInfo-template--15872891748581__main > div.product__description.rte")
 const variants = document.querySelectorAll('[data-variant-id]')

variants.forEach( function(variant) 
{
variant.style.display = 'none';
if(variant.dataset.variantId == currentVariant.id)
{
variant.style.display = 'block'

}
});
message.remove();
description.remove();
}

Lastly, I also found a way to get the correct code to select a HTML element within the website by using the browser Developers tools (F12 from the browser). This is explained on the following link:
https://devtoolstips.org/tips/en/copy-element-js-path/