Shopify - Debut theme - show and hide additional text boxes containing variant metafield depending on selected variant dropdown option

Question

As the title suggests, I'm looking to update my Shopify Debut theme to show and hide an additional text boxes containing variant metafield depending on selected variant dropdown option.

Here's the HTML select dropdown:

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
    <option value="Option no 1" selected="selected">This is option 1</option>
    <option value="Option no 2">This is option 2</option>
    <option value="Option no 3">This is option 3</option>  
</select>

In Shopify product.liquid template, it looks like so - I've added the id="{{variant.id}}" to the option but it's not populating it on testing, I was hoping this would be a way of matching both the select option and the div together.

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

Then I want to show the selected product variant metafield (option.description) based on the selected variable of the product. I'm currently using the following code (this is a shopify liquid reference) to pull in all of the variant metafields which would be ready to show and hide:

{% for variant in product.variants %}               
    <div class="variantoption" id="{{variant.id}}">
        {% if current_variant.id %}
        {{ variant.metafields.option.description }}
        {% else %}
        {% endif %}
        </div>
{% endfor %}

I understand that I need to either add some onchange javascript to the select or alternatively hook into the Shopify theme js to show / hide the selected variant's metafield options. This could be based on the IDs, but I'm struggling to pull those into the page on the select box, plus all tutorials I've come across reference a 'selectCallback' function but this isn't present in the Debut theme - it's a slate based Shopify theme.

Assistance on finishing this dynamic show / hide of variant metafields based on the selected option would be most appreciated!

/* UPDATE */

I've managed to get to this stage with the code:

_updateMetaDescription: function(evt) {

  var variant = evt.variant;
  var urlvariant = GetURLParameter('variant'); // finds variant parameter in URL
  var currentvar = $('.variantoption' + '#' + urlvariant); // looks for div with class MetaDescription & ID with the same variant as in the URL

    if (currentvar) {
      // The variant exists, remove hide class.            

      $(this.selectors.metaDescription).removeClass('hide');
       }

  else {
    $(this.selectors.metaDescription).addClass('hide');
  }
},

Trouble is it's removing the 'hide' class for all ids. Somehow it's not recognising the correct ID associated with the DIV.

drip drip · Accepted Answer · 2018-10-05T06:06:05

I'm a little confused what you are exactly looking, but if I understand here is what you have.

You have a default select that you target using the option_selection.js and you want to have additional content based on that select. If this is indeed correct, you can just do the following:

$('#product-select').on('change', function() {
  var $this = $(this);
  var thisId = $this.val();
  $('#' + thisId).show().siblings().hide();
})

As for your code here:

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

You don't have access to the variant.id here, so the <option> id should be empty now.

Shopify - Debut theme - show and hide additional text boxes containing variant metafield depending on selected variant dropdown option

1 Answers