Last active
November 28, 2021 22:42
-
-
Save myjanky/fea449e74830c86aed6a83d2e02ead3b to your computer and use it in GitHub Desktop.
Set up app proxy on Shopify shop for products template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//somewhere in product.liquid add this. | |
<div id="custom_app"></div> | |
//and this | |
<div id='customized' data-product='{{ product.handle }}' ></div> |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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?