Convert variant dropdown into swatches, one-option-sollution

show-sizes.liquid

{% comment %}
	This snippet displays sizes

	Usage:
		{% include 'show-sizes' with product %}

	Return:
		no return

	Required:
		Must be called within product loop
{% endcomment %}


{% assign itemType = show-sizes %}

{% comment %}
	CREATE A VARIANTS DROPDOWN IF THE PRODUCT HAS MORE THAN ONE VARIANT. THIS WILL BE HIDDEN BY CSS AND MANIPULATED BY JS
{% endcomment %}
{% if itemType.variants.size > 1 %}

	<select name="id" id="variant-select-{{ itemType.id }}" class="is-hidden js-variant-select">
		{% for variant in itemType.variants %}
			<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
		{% endfor %}
	</select>

	<script>
		$(function() {
			new Shopify.OptionSelectors("variant-select-{{ itemType.id }}", { product: {{ product | json }} });

			{% if itemType.available %}
				{% assign found_one_in_stock = false %}
				{% assign all_in_stock = true %}
				{% for variant in itemType.variants %}
					{% if variant.available %}
					{% else %}
						{% assign all_in_stock = false %}
					{% endif %}
					{% if variant.available and found_one_in_stock == false %}
						{% assign found_one_in_stock = true %}
						{% for option in itemType.options %}
							$('#variant-select-{{ itemType.id }}-option-' + {{ forloop.index0 }}).val({{ variant.options[forloop.index0] | json }}).trigger('change');
						{% endfor %}
					{% endif %}
				{% endfor %}
			{% endif %}
		});
	</script>

{% comment %}
	IF THE PRODUCT ONLY HAS ONE VARIANT, CREATE A HIDDEN INPUT WITH THE VARIANT ID. NOTE: NECESSARY FOR "ADD TO CART" TO WORK
{% endcomment %}
{% else %}

	{% for variant in itemType.variants %}
		<input type="hidden" name="id" class="is-hidden js-variant-select" value="{{ variant.id }}" data-variant-title="{{ variant.title }}" />
	{% endfor %}

{% endif %}


{% comment %}
	GENERATING LISTS OF VARIANTS
{% endcomment %}
{% assign firstItem = true %}
{% assign availableVariants = 0 %}

{% capture output %}
	<ul class="show-sizes" data-select="variant-select-{{ itemType.id }}">
{% endcapture %}

	{% for variant in itemType.variants %}
		{% if variant.available %}
			{% capture output %}{{ output }}<li class="size js-variant{% if firstItem %} is-selected{% endif %}" data-val="{{ variant.title }}" data-id="{{ variant.id }}">{{ variant.title }}</li>{% endcapture %}
			{% assign firstItem = false %}
			{% assign availableVariants = availableVariants | plus: 1 %}
		{% else %}
			{% capture output %}{{ output }}<li class="size size-unavailable">{{ variant.title }}</li>{% endcapture %}
		{% endif %}
	{% endfor %}
{% capture output %}{{ output }}</ul>{% endcapture %}


{% comment %}
	IN CASE THERE IS ONLY ONE VARIANT IN THIS OptionSelectors
{% endcomment %}
{% if itemType.variants.size < 2 %}
	{% assign output = "" %}
{% endif %}


{% comment %}
	IN CASE IT'S SOLD OUT
{% endcomment %}
{% if availableVariants < 1 %}
	{% capture output %}
		<ul class="show-sizes">
			<li class="size-label">Item sold out</li>
		</ul>
	{% endcapture %}
{% endif %}


{% comment %}
	PRINTING OUTPUT
{% endcomment %}
<div class="show-sizes-wrapper">
	<span class="show-sizes-label">
		Size
	</span>
	{{ output }}
</div>

show.js

/**************************************************************| VARIANT SELECT |*/
$(function() {
	$(".js-variant").click(function() {
		var $this = $(this);
		var $val = $this.attr("data-val");
		var $id = $this.attr("data-id");
		var $sel = $this.parent("ul").attr("data-select");
		var $select = $("#" + $sel + "-option-0");
		var $select2 = $("#" + $sel);

		$select.val( $val ); //setting js compiled select
		$select2.val( $id ); //setting variant id in select that actually submits
		$(".js-variant").removeClass("is-selected");
		$this.addClass("is-selected");
	});
});

show.scss

// VARIANT STUFF
.show-sizes-wrapper {
	vertical-align: middle;

	.show-sizes-label {
		text-transform: uppercase;
		vertical-align: middle;
		display: inline-block;
		margin-top: 21px;
	}

	.show-sizes {
		list-style: none;
		padding: 0;
		margin: 10px 0;
		overflow: hidden;
		display: inline-block;
		vertical-align: middle;
		float: right;
		.size-label,
		.size {
			display: inline-block;
			vertical-align: middle;
			height: 35px;
			padding: 6px;
			text-transform: uppercase;
		}
		.size-label { padding: 5px 0 0 0; }
		.size {
			margin: 3px;
			text-align: center;
			border: 2px solid #aaa;
			min-width: 35px;
			display: inline-block;
			color: #aaa;
		}
		.size.is-selected {
			color: #fff;
			border: 2px solid #000;
			background-color: #000;
		}
		.size.size-unavailable {
			color: #eee;
			border: 2px solid #eee;
			background-color: #fff;
		}
		.size:hover { cursor: pointer; }
		.size.size-unavailable:hover { cursor: default; }
	}
}
.selector-wrapper { display: none; }