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 hidden or 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 hidden or 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> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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.