CODEWITHSUNDEEP
shopifyslate-shopify
sophie f
sophie f

Reputation: 499

Shopify variant swatches or radio buttons instead of dropdowns in Slate

Shopify's tutorial for color swatches isn't supported yet for Slate, and the select callback referenced no longer exists in the code base. Is it possible to modify this tutorial to work on Slate themes to create radio buttons or swatches instead of a dropdown for selecting variants on the product template?

Upvotes: 3

Views: 8262

Answers (1)

sophie f
sophie f

Reputation: 499

Yes. I was able to get this tutorial to work by modifying the code slightly. This workaround is only going to be relevant until the shopify tutorial is updated to correspond to Slate.

Follow the tutorial as per the directions. When you get to the step "Locate your selectCallback function", you will notice there is no selectCallback function in Slate. Yikes! Instead find "_onSelectChange" in theme.js and add the code there. This is the final function with the swatches code added: 

/**
 * Event handler for when a variant input changes.
 */
_onSelectChange: function() {
  var variant = this._getVariantFromOptions();

  this.$container.trigger({
    type: 'variantChange',
    variant: variant
  });

  if (!variant) {
    return;
  }

// BEGIN SWATCHES
var selector = this.originalSelectorId;
if (variant) {
    var form = $(selector).closest('form');
    for (var i=0,length=variant.options.length; i<length; i++) {
        var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        if (radioButton.size()) {
            radioButton.get(0).checked = true;
        }
    }
}
// END SWATCHES

  this._updateMasterSelect(variant);
  this._updateImages(variant);
  this._updatePrice(variant);
  this.currentVariant = variant;

  if (this.enableHistoryState) {
    this._updateHistoryState(variant);
  }
},

Then, once you've completed the tutorial, you will notice it's still not working. This is because the code you add to theme.liquid uses a class that is no longer on your variant Selects. On product.liquid (this is a Section on most Slate themes) Add the class "single-option-selector" to your selects, like so: 

    {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
    <div class="selector-wrapper js">
    <label for="SingleOptionSelector-{{ forloop.index0 }}">
      {{ option.name }}
    </label>
    <select
              id="SingleOptionSelector-{{ forloop.index0 }}"
              class="single-option-selector"
              data-single-option-selector
              data-index="option{{ option.position }}">
             {% for value in option.values %}
                 <option value="{{ value | escape }}"
                 {% if option.selected_value == value %}selected="selected"{% endif %}>
                 {{ value }}
                </option>
            {% endfor %}
    </select>
    </div>
    {% endfor %}
    {% endunless %}

Now, the tutorial should work as it's supposed to. I hope this helps someone out!

Upvotes: 7

Related Questions