Product Swatches APP JSON example

product-swatches-json.liquid

<div class="swatchslider">
  <ul class="slides product-swatches-{{product.id}}"></ul>
</div>
<div style="clear:both;"></div>
<script>

  /*$(window).load(function() {
    $('.swatchslider').flexslider({
      animation: "slide",
      animationLoop: false,
      directionNav: true,
      controlNav: false,
      itemWidth: 70,
      itemMargin: 1,
      slideshow : false
    });
  });*/

  jQuery(document).ready(function(){
    var appDomain = '//productswatches.herokuapp.com';
    var url = appDomain + '/product_swatches/get-json/{{product.id}}';
    var data = {
      	return_format: 'json',
      	product_id:'{{product.id}}',
        tooltop: 'no',
        tooltop_split: '-',
      	{% if product.metafields.Grouping.grouping %}tag:'{{product.metafields.Grouping.grouping}}'{% endif %}
    };
    //console.log('goooooooo');
    $.ajax({
      	type: 'post',
        url: url,
      	data: data,
        cache: false,
        //dataType: "json",
        success: function(data) {
          	//console.log(data);
          	var slider_html = '';
          	$.each(data, function(i, item) {
              //console.log(item);
              slider_html += '<li><a href="/products/'+item.product_handle+'"><img src="'+item.featured_image+'" /></a></li>'
            });

          	//product-swatches-{{product.id}}
          	//console.log('goooooooo');
          	//console.log(data);
            //console.log(slider_html);
            //console.log(".product-swatches-{{product.id}}");
            $(".product-swatches-{{product.id}}").html(slider_html);
            $('.swatchslider').flexslider({
              animation: "slide",
              animationLoop: false,
              directionNav: true,
              controlNav: false,
              itemWidth: 70,
              itemMargin: 1,
              slideshow : false
            });
        }

    });
  }); // end on document ready
</script>