Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-16T09:37:45.453Z
Answers.LastActivityDate: 2021-08-16T09:37:45.453Z
Answers.UserDisplayName: Terry Upton
Body: <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>
  
Tags: <templating><plugin-craftcommerce><javascript><js>
Title: Showing and hiding details (price, sale price, sku etc)when product variant is selected on details page
ThreadText: # 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>
  
  ```
  <div class="flex-1 p-8" x-data="{
   price: '{{- product.defaultPriceAsCurrency|trim -}}',
   variant: '{{- product.defaultVariant.title|trim -}}',
   sku: '{{- product.defaultSku|trim -}}'
  }"
  
  <div class="flex flex-wrap items-center pb-6 mb-12 space-x-8 border-b border-gray-200">
    <div class="text-2xl text-blue-500" x-text="price"></div>
    <div class="mt-1 text-sm  flex items-center space-x-2">
      <span class="text-blue-200" x-text="variant"></span>
      <span class="mx-1 text-gray-200">&bull;</span>
      <span class="text-blue-200" x-text="sku"></span>
    </div>
  </div>
  
  {% for variant in product.variants %}
  <label class="relative transition cursor-pointer variant-option choice-button focus-within:ring-1 focus-within:ring-offset-2 focus-within:ring-blue-500"
         for="{{ variant.id }}"
  >
    <input type="radio"
           @click="price='{{- variant.priceAsCurrency|trim -}}', variant='{{- variant.title|trim -}}', sku='{{- variant.sku|trim -}}'"
           id="{{ variant.id }}"
           name="purchasables[1][id]"
           value="{{ variant.id }}"
           class="sr-only"
      {{ loop.first ? 'checked' }}
    >
    <span class="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">
      {{ variant.title }}
    </span>
  </label>
  {% 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 %}
    <del class="text-sm text-gray-500">{{ variant.priceAsCurrency }}</del>
    <br>{{ 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 %}
      <div x-show="selectedVariant === {{ variant.id }}" class="mt-3">
        <div class="flex flex-wrap items-center pb-2 mb-8 space-x-8 border-b border-gray-200">
          {% if variant.onSale %}
            <div class="flex items-center">
              <del class="text-sm text-gray-500 mr-2">{{ variant.priceAsCurrency }}</del>
              <span class="text-blue-500 text-2xl font-semibold">{{ variant.salePriceAsCurrency }}</span>
            </div>
          {% else %}
            <span class="text-blue-500 text-2xl font-semibold">{{ variant.priceAsCurrency }}</span>
          {% endif %}
          <div class="mt-1 text-sm  flex items-center space-x-2">
            <span class="text-blue-200">{{ variant.title }}</span>
            <span class="mx-1 text-gray-200">&bull;</span>
            <span class="text-blue-200">{{ variant.sku }}</span>
          </div>
        </div>
      </div>
    {% endfor %}
  {% endblock %}
  
  <h3 class="mb-3 text-gray-700 uppercase">{{ variantHeading|default('Options') }}</h3>
  <div class="flex flex-wrap items-center space-x-3 mb-12">
    {% for variant in product.variants %}
      <label class="relative transition cursor-pointer variant-option choice-button focus-within:ring-1 focus-within:ring-offset-2 focus-within:ring-blue-500"
             for="{{ variant.id }}"
      >
        <input type="radio"
               @click="selectedVariant={{ variant.id }}, variantTitle='{{- variant.title|trim -}}'"
               id="{{ variant.id }}"
               name="purchasables[1][id]"
               value="{{ variant.id }}"
               class="sr-only"
          {{ loop.first ? 'checked' }}
        >
        <span class="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">
      {{ variant.title }}
    </span>
      </label>
    {% endfor %}
    
    <div class="text-sm text-gray-400 font-light mb-0 self-center mt-2">
      Can’t find the right size? <a href="{{ siteUrl('contact') }}" class="text-blue-500 underline hover:text-sea-500">Contact Us</a>
    </div>
  </div>
  
  ```
  
  
  ---
  
  