product-swatches-with-dropdown

product-swatches-dropdown.liquid

<div class="product-swatches-{{product.id}}-2"></div>
<div class="product-swatches-{{product.id}}"></div>
<div style="clear:both;"></div>
<script>
  jQuery(document).ready(function(){
    
    $(document.body).on('change','.go-color',function(){
      window.location = $(".go-color").val();
    })
    
    var appDomain = '//productswatches.herokuapp.com';
    var url = appDomain + '/product_swatches/get-json/{{product.id}}';
    var data = {
      	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) {
          	console.log(data);
            $(".product-swatches-{{product.id}}").html(data);
        }
    });
          
     
    var appDomain 	= '//productswatches-herokuapp-com.global.ssl.fastly.net';
    var url 		= appDomain + '/product_swatches/get-json/{{product.id}}';
    var data = {
        return_format: 'json',
      	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: "json",
        success: function(data) {
			var html = '';
          	html += '<select class="go-color">';
            $.each(data, function(i, item) {
              
              product_title = '';
              $.ajax({
                  	type: 'get',
                    url: '/products/'+item.product_handle+'.js',
                  	data: data,
                    cache: false,
                    async: false,
                    dataType: "json",
                    success: function(product) {
                      product_title = product.title;
                    }
                });
				
              html += '<option value="/products/'+item.product_handle+'">'+product_title+'</option>';
                
            });
			html += '</select>';
          	$('.product-swatches-{{product.id}}-2').html(html);
        }
    });
          
          
  }); // end on document ready
</script>