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

Solved

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

Cpuga
Shopify Partner
43 0 7

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,

Accepted Solution (1)

Cedcommerce
Shopify Partner
718 76 114

This is an 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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 2 (2)

StoreWatchers
Trailblazer
205 30 37

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

 

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs

Cedcommerce
Shopify Partner
718 76 114

This is an 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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here