How can I change text on variant selector when product is pre-selected?

[Cpuga]

Hello,

im trying to make a script to change text for id "texto-variante" when a variant is selected. i already make a script thats work when you press the variant but i need to show the text when you enter the product and the variant is already selected by default.

So when enter to the product the text with the id "texto-variante" is blank, but when i select a variant it change it.

<script>
  function updateText() {
    // Get the selected variant title
    var variantTitle = document.querySelector('input[name="variant"]:checked').value;
    // If the variant title is "57 g", set the text of the element with the ID "texto-variante"
    if (variantTitle == "57 g") {
      $("#texto-variante").text('288 Tazas');
    }
    else if (variantTitle == "454 g") {
      $("#texto-variante").text('2889 Tazas');
    }
  }
</script>

        {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
           {% unless product.has_only_default_variant %}
  {% for option in product.options_with_values %}
    <div class="row">

      <div class="col-12">
                        <p id="texto-variante" style="font-size: 16px;"></p>
                      </div>
      
      <div class="col-md-12">
        <div id=""></div>
        <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
          <p>{{ option.name }}</p>
        </label> 
      </div>
      {% assign option_position = forloop.index %}
      <div class="col-md-12">
        {%- for value in option.values -%}
          <ul class="donate-now">
            <li style="display: inline-block;">
              <input style="cursor: pointer;" type="radio" class="single-option-selector-{{ section.id }}"
                     {% if option.selected_value == value %} checked="checked"{% endif %}
                     value="{{ value | escape }}"
                     data-index="option{{option_position}}"
                     name="variant"
                     id="SingleOptionSelector-{{option_position}}"
                     onchange="updateText()">
              <label for="SingleOptionSelector-{{ forloop.index0 }}">{{value}}</label>
            </li>
          </ul>
        {%- endfor -%}
      </div>
    </div>
  {% endfor %}
{% endunless %}

Hope someone can help me.

Regards,

[StoreWatchers]

Hello @Cpuga,

Greetings from the Store Watchers Support Team! Happy to help you today.

To show the text when you enter the product page, you have to add the liquid code. In liquid you can get the default selected variant using product.selected_or_first_available_variant.

Now based on this you can add similar if conditions you have added in the JavaScript. It should be like :

<p id="texto-variante" style="font-size: 16px;">
{% if product.selected_or_first_available_variant.title == "57 g" %}
288 Tazas
{% elseif product.selected_or_first_available_variant.title == "454 g" %}
2889 Tazas
{% endif %}
</p>

I hope above solution helps you. Let me know if need further assistance 🙂 

Thanks,

Store Watchers Support Team

[Cedcommerce · Accepted solution]

Hello @Cpuga,

Kindly provide your store URL so that we can check the issue and provide the exact solution to you for the issue. 

Based on your issue we have a similar example that can be helpful, please find it below. 

<span id=”vairent_text”></span>

<script>

  function updateText() {

   var ele = document.getElementsByName('Your_Color_input');

   var text = document.getElementById(‘ vairent_text’);

for (var i = 0; i < ele.length; i++) {

        ele[i].addEventListener('click', function (e){

            Text =  e.target.value

     })

}

  }

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

updateText();

  });

</script>

Hope it helps. Let us know if you have any questions.

All the best,

CedCommerce