Whenever I click on a button, I want the text and image to change. I attempted to do this but encountered difficulties in updating multiple elements simultaneously.
{% for variant in product.variants %}
<label for="variant_{{- variant.id }}">{{ variant.title }} - <img src="{{ variant.image | img_url: '100x100' }}" v-on:click="changeMessage('{{ variant.price | money_with_currency }}')"></label>
<input type="radio" {% if forloop.first %}checked{% endif %} class="variant_id" id="variant_{{- variant.id }}" name="productVariants" value="{{ variant.id }}"/>
<div class="variant_price d-none">{{ variant.price | money_with_currency }}</div>
<div class="variant_sku d-none">{{ variant.sku }}</div>
<div class="variant_img d-none">{{ variant.image | img_url: master }}</div>
{% endfor %}
{% raw %}{{ price }}{% endraw %}
{% raw %}{{ image }}{% endraw %}
The price is currently hidden by default and only appears when I click the radio button. I would like it to be visible by default.
This is how it looks after clicking the radio button
export default {
data () {
return {
price: document.getElementsByClassName('variant_price').innerHTML,
sku: document.getElementsByClassName('variant_sku').innerHTML,
img: document.getElementsByClassName('variant_img').innerHTML,
}
},
methods: {
changeMessage(message) {
this.message = message
}
},
}
When the radio button is clicked, I want to display the price and image, but my JavaScript skills are lacking. I need assistance, please 🙏🙏🙏