Skip to content

Instantly share code, notes, and snippets.

@j7u7l7s

j7u7l7s/Swatches-from-select.js

Last active April 7, 2018 23:02
Show Gist options
  • Save j7u7l7s/4262933fe7a5c65f0e1ad3ce895da7e9 to your computer and use it in GitHub Desktop.
Save j7u7l7s/4262933fe7a5c65f0e1ad3ce895da7e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Swatches-from-select.js
{% capture image %}{{ 'test.png' | asset_url | split:'test.png' | first }}{% endcapture %}
var srcURL = '{{ image }}';
//Swatch Script
$('#wjFilterFront option').each(function(i){
//generate the swatches and add matching data attributes to select options
var imageName = $(this).val();
var srcImage = 'https:' + window.srcURL + imageName + '.png';
srcImage.toString();
var index = i++;
var swatch = '<a class="swatch-link" href="javascript:void(0)" data-option-index="' + index.toString() +'"><img class="swatch-image" src="test.png" data-tag="' + imageName + '" ></a>';
$(this).attr('data-option-index', index.toString());
$(this).closest('.columns').append(swatch);
//add the images to the swatches
$('.swatch-image[data-tag="' + imageName + '"]').attr('src', srcImage );
});
//link the select and swatches
$('a[data-option-index]').click(function(e) {
e.preventDefault();
var dataSwatch = $(this).data('option-index');
var dataOption = $("#wjFilterFront option").data('option-index');
$("#wjFilterFront").find('option[data-option-index='+ dataSwatch +']').attr('selected','selected').siblings('option').removeAttr('selected');
;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment