product swatches with dropdown

other-product-swatches-with-dropdown.liquid

<div class="product-swatches-{{product.id}}-2"></div>
<div class="product-swatches-{{product.id}}"></div>
<div style="clear:both;"></div>
<style>
	.product-swatches-ul li {
        border-color: #f7f7f7 !important;
      	max-width: 50px;
      	border-width: 3px;
    }
</style>
<script>
  jQuery(window).load(function(){
    
    $('.product-swatches-active').css('border-color','#000;');
    $('.go-color').val('/products/{{product.handle}}');
    
  });
  jQuery(document).ready(function(){
    
    
    
    var appDomain = '//productswatches-herokuapp-com.global.ssl.fastly.net';
    var url = appDomain + '/product_swatches/get-json/{{product.id}}';
    var data = {
        return_format: 'html',
      	product_id:'{{product.id}}', 
        tooltip: 'yes',
        tooltip_split: '-',
        tooltip_bg: '555',
        tooltip_color: 'fff',
        border_radius: '0%',
        border_color: 'ffffff',
        border_active: '000000',
        border_width: '0',
        width: '40',
        height: '40',
        swatch_title: '',
      	{% if product.metafields.swatch.tag %}tag:'{{product.metafields.swatch.tag}}'{% endif %}
    };
    $.ajax({
      	type: 'post',
        url: url,
      	data: data,
        cache: false,
        dataType: "html",
        success: function(data) {
          	console.log(data);
            $(".product-swatches-{{product.id}}").html(data);
        }
    });
          
    
    // CUSTOM CODE
    $(document.body).on('change','.go-color',function(){
      window.location = $(".go-color").val();
    })
    var appDomain 	= '//productswatches-herokuapp-com.global.ssl.fastly.net';
    var url 		= appDomain + '/product_swatches/get-json/{{product.id}}';
    var data = {
        return_format: 'dropdown',
      	product_id:'{{product.id}}',
      	{% if product.metafields.swatch.tag %}tag:'{{product.metafields.swatch.tag}}'{% endif %}
    };
    $.ajax({
      	type: 'post',
        url: url,
      	data: data,
        cache: false,
        dataType: "html",
        success: function(data) {
			$('.product-swatches-{{product.id}}-2').html(data);
            $('.go-color').val('/products/{{product.handle}}');
             var options = $('.go-color option');
              var arr = options.map(function(_, o) {
                  return {
                      t: $(o).text(),
                      v: o.value
                  };
              }).get();
              arr.sort(function(o1, o2) {
                  return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
              });
              options.each(function(i, o) {
                  console.log(i);
                  o.value = arr[i].v;
                  $(o).text(arr[i].t);
              });                 
        }
    });
          
          
  }); // end on document ready
</script>