Set up app proxy on Shopify shop for products template

app_proxy.js

jQuery(function($){
     
  /*  app proxy in jQuery*/			 
  var base_urlc = window.location.hostname; //grab shop url
  var window_width = $(window).width();  //save width

  if ($('#custom_app').length > 0 ){   
      $('#custom_app').css({'width':'100%'}); // set container width
      var width_canvas = $('#custom_app').width(); //get container width
      var product_id = $('#custom_app').data('product'); //get product id 
    /* call Shop to get a json list of product parameters */
      $.get( '/products/' + product_id + '.json',
            
          function(xhr,status){
              
              data_params = JSON.stringify(xhr); //save parameters
              data_param = JSON.parse(data_params); //parse parameters
              var product_id = data_param.product.id; //set product.id
              var img_lrg = Shopify.resizeImage(data_param.product.images[0].src, 'large'); //resize image
              /* create iframe with src set to the app proxy url as src to call. Notice that /apps/customize can be changed but needs to match your proxy settings*/
              var target_html = '<iframe id="customized-iframe" src="//' + base_urlc  +  '/apps/customize?shop=' + Shopify.shop +  '&product_id=' + product_id +  '&image=' + img_lrg + '" frameborder="0" scrolling="no" style="display:block;" width="100%" />';
              $('#custom_app').html(target_html); //write iframe to #custom_app html
      });
  }

product.liquid

//somewhere in product.liquid add this.

<div id="custom_app"></div>

//and this

<div id='customized' data-product='{{ product.handle }}' ></div> 

@myjanky Thanks for sharing this. I've been experiencing an issue with my proxy app not rendering to my store. It's a fairly straightforward setup where I'm specifying my app URL and setting the proxy to be "apps/blah". My app is returning a liquid application content type but for some reason, I'm not able any part of my app.

Would I need to do something like this gist to get it to work?

@mbeezy sorry, I am never on this account and the reason for a late reply.
Yes you can use this to get data from your proxy using the apps/blah path you set up.

If you see in my gist it is apps/customize followed by a query string to pass back to the server.