Display name of colour variant selected

Highlighted
Tourist
12 0 1

Hello,

On this page I have some swatches that when selected they don't display the variant name.
Basically, I need to add a paragraph <p></p> text under the variant swatches that indicate the name of the variant selected... 

I'm not good on javascript and online I didn't found any complete guide about that

Thanks a lot for your help!

0 Likes
Highlighted
Shopify Partner
86 3 18

Hey there, 

It should be easy for you to do.

It looks like somewhere in your theme you have the following code:

$('.swatch.color .swatch-element').click(function(){
        if ($('.swatch.color.swatch-element').hasClass('active')){
          $('.swatch.color .swatch-element').removeClass('active');
          $(this).addClass('active');
        }else{

          $('.swatch.color .swatch-element').removeClass('active');
          $(this).addClass('active');  
        }
      });

The view source shows it at lines 2942 - 2952.

What you need to do is the following : 

  1. Add the <p> element where you need it, assuming its under the swatches. 
  2. Add a class to the <p> element something like so it looks something like <p class="swatch-color-display"></p>
  3. Add the following: "$('p.swatch-color-display').text($(this).data('value'));" after the lines with " $(this).addClass('active'); "  

However you will need to be careful as you have two rows of those swatches : Paid and Free. Depending on what you want to do with the second row of swatches, you need to create two p and differentiate the clicks on free colours and paid ones, so that the correct colours are displayed in the <p> respectively. 

Let me know what you need and I'll see if I can help with that.

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
12 0 1

Thanks for your answer! Very kind

I'm trying now

I will let you know in 5 min

0 Likes
Highlighted
Tourist
12 0 1

It Works! 

Ony problem that it displays the changes in both the variants (  Paid and Free )

How can I target the two different variants?

like

Paid Product: xxx
Free Product: xxx

 

Ps: Thanks a lot, really !!!!

0 Likes
Highlighted
Tourist
12 0 1

It Works!

Thanks a lot, really!!

"Depending on what you want to do with the second row of swatches, you need to create two p and differentiate the clicks on free colours and paid ones so that the correct colours are displayed in the <p> respectively. "

In fact I need the have the name of the paid one and free one, how can I do? 

0 Likes
Highlighted
Shopify Partner
86 3 18

Hey,

I'm glad it worked for you.

If you need same behaviour in your "free" line of swatches make these changes:

  1. Adjust the class name of the first <p> element to something like "swatch-color-display-paid" 
  2. Add the second <p> element with class like  "swatch-color-display-free".
  3. In the liquid file which deals with outputing the swatches add the data-type="paid" attribute to the divs that hold the swatch: 
    <div data-value="Ice Queen" data-type="paid" class="swatch-element ice-queen available">
            
            <input id="swatch-0-ice-queen" type="radio" name="option-0" value="Ice Queen">
            
            <label for="swatch-0-ice-queen" style="background-image: url(//cdn.shopify.com/s/files/1/1555/1495/t/19/assets/ice-queen.png?14012346308409149095);background-color: #queen; background-color: queen;">
              <img class="crossed-out" src="//cdn.shopify.com/s/files/1/1555/1495/t/19/assets/soldout.png?14012346308409149095">
            </label>
            
          </div>

    This is for paid, do the same for free but add data-type="free"

  4. Change this : "$('p.swatch-color-display').text($(this).data('value'));"  to  "$('p.swatch-color-display' + $(this).data('type')).text($(this).data('value'));". This will look for the specific <p> element for the type of swatch clicked.

This should do the trick.

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Tourist
12 0 1

This is the file that manage the swatches.... I can't find how to apply point 3 on it..

Thanks again you are saving my day =)

 

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}
<div class="swatch error">
  <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
  <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #add-to-cart-form .selector-wrapper {display:none}
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
<script>//jQuery(window).load(function() { jQuery('.product-shop .selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% unless found_option %}
<div class="swatch error">
  <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>
{% else %}
<div class="swatch clearfix {% if is_color %}color {% endif %} sw-{{ option_index }}" data-option-index="{{ option_index }}">
  <div class="header">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}    
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
  
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-image: url({{ value | handle | append: '.' | append: 'png' | asset_url }});background-color: #{{ value | split: ' ' | last | handle }}; background-color: {{ value | split: ' ' | last | handle }};">
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% else %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>

{% endunless %}

{% endif %}

0 Likes
Highlighted
Shopify Partner
86 3 18

That's a lot of code :)

Alright, looking at your code I think it's better to this: 

  1. On those <p> tags add an attribute data-option-index="0" for the paid one and data-option-index="1" for the free one. No more need for the "paid" and "free" classes.
  2. Instead of adding data-type="paid" and data-type="free" on the divs add data-option-index-for-color="{{ option_index }}". The code will look like this :  
    <div data-value="{{ value | escape }}" class="swatch-element {{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}" data-option-index-for-color="{{ option_index }}">

    3. Change this : "$('p.swatch-color-display').text($(this).data('value'));"  to  "$('p[data-option-index=\'' + $(this).data('option-index-for-color') +  '\']').text($(this).data('value'));". In this situation the option_index 0 is the paid swatches, and 1 is the free swatches.

This is a bit hacky but should help you out in your situation.

 

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
12 0 1

YOU LITERALLY SAVE MY DAY!

I don't know how to thank you enough really =) !!!!!

 

0 Likes
Highlighted
Shopify Partner
86 3 18

No worries, I'm glad I was of help!

 

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes