<p>So, I actually decided a slightly different approach in the end and not sure if it is better or less performant, but I feel gives me a little more flexibility. Basically,  more like a 'tabbed' approach that shows the right div based on the option selected. This allows me to be a little more flexible with the information and layout I want in that area of the page.</p>
<p>Here is the final code:</p>
<pre><code>{% block productVariantSelected %}
  {# Price and Variant SKU #}
  {% for variant in product.variants %}
    &lt;div x-show=&quot;selectedVariant === {{ variant.id }}&quot; class=&quot;mt-3&quot;&gt;
      &lt;div class=&quot;flex flex-wrap items-center pb-2 mb-8 space-x-8 border-b border-gray-200&quot;&gt;
        {% if variant.onSale %}
          &lt;div class=&quot;flex items-center&quot;&gt;
            &lt;del class=&quot;text-sm text-gray-500 mr-2&quot;&gt;{{ variant.priceAsCurrency }}&lt;/del&gt;
            &lt;span class=&quot;text-blue-500 text-2xl font-semibold&quot;&gt;{{ variant.salePriceAsCurrency }}&lt;/span&gt;
          &lt;/div&gt;
        {% else %}
          &lt;span class=&quot;text-blue-500 text-2xl font-semibold&quot;&gt;{{ variant.priceAsCurrency }}&lt;/span&gt;
        {% endif %}
        &lt;div class=&quot;mt-1 text-sm  flex items-center space-x-2&quot;&gt;
          &lt;span class=&quot;text-blue-200&quot;&gt;{{ variant.title }}&lt;/span&gt;
          &lt;span class=&quot;mx-1 text-gray-200&quot;&gt;&amp;bull;&lt;/span&gt;
          &lt;span class=&quot;text-blue-200&quot;&gt;{{ variant.sku }}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  {% endfor %}
{% endblock %}

&lt;h3 class=&quot;mb-3 text-gray-700 uppercase&quot;&gt;{{ variantHeading|default('Options') }}&lt;/h3&gt;
&lt;div class=&quot;flex flex-wrap items-center space-x-3 mb-12&quot;&gt;
  {% for variant in product.variants %}
    &lt;label class=&quot;relative transition cursor-pointer variant-option choice-button focus-within:ring-1 focus-within:ring-offset-2 focus-within:ring-blue-500&quot;
           for=&quot;{{ variant.id }}&quot;
    &gt;
      &lt;input type=&quot;radio&quot;
             @click=&quot;selectedVariant={{ variant.id }}, variantTitle='{{- variant.title|trim -}}'&quot;
             id=&quot;{{ variant.id }}&quot;
             name=&quot;purchasables[1][id]&quot;
             value=&quot;{{ variant.id }}&quot;
             class=&quot;sr-only&quot;
        {{ loop.first ? 'checked' }}
      &gt;
      &lt;span class=&quot;block py-2 px-4 text-sm text-gray-400 border border-gray-300 transition variant-label hover:border-gray-400 hover:text-gray-500&quot;&gt;
    {{ variant.title }}
  &lt;/span&gt;
    &lt;/label&gt;
  {% endfor %}
  
  &lt;div class=&quot;text-sm text-gray-400 font-light mb-0 self-center mt-2&quot;&gt;
    Can’t find the right size? &lt;a href=&quot;{{ siteUrl('contact') }}&quot; class=&quot;text-blue-500 underline hover:text-sea-500&quot;&gt;Contact Us&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 4.0
2021-08-16T09:37:45.453Z
2021-08-16T09:37:45.453Z
Terry Upton
<p>I currently have price, sku and variant title swapping when clicking between variants on a products details page.</p>
<p>This works with AlpineJS and looks something this.
<a href="https://codepen.io/amasci/pen/PoWxbPX" rel="nofollow noreferrer">https://codepen.io/amasci/pen/PoWxbPX</a></p>
<pre><code>&lt;div class=&quot;flex-1 p-8&quot; x-data=&quot;{
 price: '{{- product.defaultPriceAsCurrency|trim -}}',
 variant: '{{- product.defaultVariant.title|trim -}}',
 sku: '{{- product.defaultSku|trim -}}'
}&quot;

&lt;div class=&quot;flex flex-wrap items-center pb-6 mb-12 space-x-8 border-b border-gray-200&quot;&gt;
  &lt;div class=&quot;text-2xl text-blue-500&quot; x-text=&quot;price&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;mt-1 text-sm  flex items-center space-x-2&quot;&gt;
    &lt;span class=&quot;text-blue-200&quot; x-text=&quot;variant&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;mx-1 text-gray-200&quot;&gt;&amp;bull;&lt;/span&gt;
    &lt;span class=&quot;text-blue-200&quot; x-text=&quot;sku&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

{% for variant in product.variants %}
&lt;label class=&quot;relative transition cursor-pointer variant-option choice-button focus-within:ring-1 focus-within:ring-offset-2 focus-within:ring-blue-500&quot;
       for=&quot;{{ variant.id }}&quot;
&gt;
  &lt;input type=&quot;radio&quot;
         @click=&quot;price='{{- variant.priceAsCurrency|trim -}}', variant='{{- variant.title|trim -}}', sku='{{- variant.sku|trim -}}'&quot;
         id=&quot;{{ variant.id }}&quot;
         name=&quot;purchasables[1][id]&quot;
         value=&quot;{{ variant.id }}&quot;
         class=&quot;sr-only&quot;
    {{ loop.first ? 'checked' }}
  &gt;
  &lt;span class=&quot;block py-2 px-4 text-sm text-gray-400 border border-gray-300 transition variant-label hover:border-gray-400 hover:text-gray-500&quot;&gt;
    {{ variant.title }}
  &lt;/span&gt;
&lt;/label&gt;
{% endfor %}
</code></pre>
<p>However, I have come to now add some functionality for sale prices.
Whereby I would like to show the Price with a strike and the new sale price.</p>
<pre><code>{% if variant.onSale %}
  &lt;del class=&quot;text-sm text-gray-500&quot;&gt;{{ variant.priceAsCurrency }}&lt;/del&gt;
  &lt;br&gt;{{ variant.salePriceAsCurrency }}
{% else %}
  {{ variant.priceAsCurrency }}
{% endif %}
</code></pre>
<p>What is the best way to adopt my code to do this?
I cannot pass in the html code to alpine.</p>
<p>Should I just loop the variants and output the code and then show/hide the right block based on which radio is selected or is there a better approach?</p>

<templating><plugin-craftcommerce><javascript><js>
Showing and hiding details (price, sale price, sku etc)when product variant is selected on details page
# Showing and hiding details (price, sale price, sku etc)when product variant is selected on details page

(Asked by: username_0 on 2021-08-13)

I currently have price, sku and variant title swapping when clicking between variants on a products details page.
This works with AlpineJS and looks something this.
https://codepen.io/amasci/pen/PoWxbPX

  
  
    
    •
    
  


{% for variant in product.variants %}

  
  
    {{ variant.title }}
  

{% endfor %}

However, I have come to now add some functionality for sale prices.
Whereby I would like to show the Price with a strike and the new sale price.
{% if variant.onSale %}
  {{ variant.priceAsCurrency }}
  {{ variant.salePriceAsCurrency }}
{% else %}
  {{ variant.priceAsCurrency }}
{% endif %}

What is the best way to adopt my code to do this?
I cannot pass in the html code to alpine.
Should I just loop the variants and output the code and then show/hide the right block based on which radio is selected or is there a better approach?

**Tags:** templating, plugin-craftcommerce, javascript, js

---

## 1 answers

### Answer by username_0 on 2021-08-16. Score: 1

So, I actually decided a slightly different approach in the end and not sure if it is better or less performant, but I feel gives me a little more flexibility. Basically,  more like a 'tabbed' approach that shows the right div based on the option selected. This allows me to be a little more flexible with the information and layout I want in that area of the page.
Here is the final code:
{% block productVariantSelected %}
  {# Price and Variant SKU #}
  {% for variant in product.variants %}
    
      
        {% if variant.onSale %}
          
            {{ variant.priceAsCurrency }}
            {{ variant.salePriceAsCurrency }}
          
        {% else %}
          {{ variant.priceAsCurrency }}
        {% endif %}
        
          {{ variant.title }}
          •
          {{ variant.sku }}
        
      
    
  {% endfor %}
{% endblock %}

{{ variantHeading|default('Options') }}

  {% for variant in product.variants %}
    
      
      
    {{ variant.title }}
  
    
  {% endfor %}
  
  
    Can’t find the right size? Contact Us


---

