Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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,
Solved! Go to the solution
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
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
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
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024