Explanation about linking custom setting implemented from app to shopify website

[rubycis]

Hi, I have created partner account and created app as well. I have integrated the library also. Done with app installation and authorization. Now I am stuck for next step. I don't understand how can I linked the custom setting implemented on my app to shopify frontend. How can I linked the app database to shopify website. How can I implement a page on shopify website for customer to customize any product and where I save all the customized data and how can I linked that data with shopify website.

I am able to make standalone app with php but don't understand how it's data can be linked to shopify website. How my local app database can be used in shopify website.

I am new here. Any help is very much appreciated.

Thanks

[myjanky]

Hi @rubycis

I hope I understand you correctly. You want your app connected to the "Front End" or Shop so that you can add functionality for your customers and visitors to use.

If so, you need to enable the app proxy part of your app in the partners dashboard for that app. For example: In your store, you can call your app's server url with the proxy url you created to get the data from your app into your store. The drop down Sub path prefix allows you to change the first part of the url and the text box allows URL to be the rest of the app proxy url. So in my case xxxx.myshopify.com/app/customize will call the proxy url https://xxxxx.com/shopify/shirt/client/ where my app code resides for the front end of the shop. Keep in mind that this has to be ssl cert protected with a valid non-selfsigned cert or Shopify will not allow the proxy to be called (throw up warnings of cross site validation). Also, shopify gets your app into the Shop via an iFrame which could cause other issues and why the SSL is so important.

[rubycis]

Thank you so much myjanky :+1: You understand me with some extent. But the Proxy URL is the app's server url i.e the complete new page in shopify front end. But if we want to add some custom things in the existing product page or collection page itself in shopify front through our php app, then what we need to do in that case.

[myjanky]

No problem, you are welcome. Yes you would use a proxy url to add functionality to the product or collection page. I have an Embroidery Application that allows our customers to add monograms to the clothing we sale. It launches on the product page and allows the customer to see a virtual render of the product with the monogram. This is all done using the app proxy url. Maybe you only want to feed/get data to your store and not html/css, an app proxy is used for this as well.

So no, the proxy URL is not a complete new page in shopify frontend. You can add it to any template (or layout, snippet, asset), to get the result you are looking for.

Let me know what kind of front end functionality you are looking to implement and I may be able to steer you in the right direction.

The Proxy URL allows you to keep your store secure and prevent CSRF or XSRF attacks. By creating a /apps/customize type of URL for your store (you do not have access to add your app server domain to the CORS origin on Shopify) it will call your app server to retrieve the content without the need to setup CORS.

[rubycis]

As you told me "you can add proxy URL to any template (or layout, snippet, asset), to get the result you are looking for." Can you explain me how this can be implement? Because in app section of partner dashboard we need to add a single url. So I don't understand how this can be implemented in the shopify collection, product etc template file or snippet. Thanks

[myjanky]

This can be implemented in several ways. I will show you a simple Javascript implementation.

Create an asset JS file and save something similar to the following.

jQuery(function($){ /*app load container */ var base_urlc = window.location.hostname; //get store url var window_width = $(window).width(); //get window width if ($('#custom_app').length > 0 ){ //check if element #custom_app exist $('#custom_app').css({'width':'100%'}); // set container width var width_canvas = $('#custom_app').width(); //save it var product_id = $('#custom_app').data('product'); //set ID of current product $.get( '/products/' + product_id + '.json', /* call the store and get a json list of the products parameters */ function(xhr,status){ data_params = JSON.stringify(xhr); //store parameters data_param=JSON.parse(data_params); //parse parameters var product_id = data_param.product.id; var img_lrg = Shopify.resizeImage(data_param.product.images[0].src, 'large'); //fix image size /* this is where the magic occurs. Notice I am calling /apps/customize into an iframe with url query parameters. you could also just call custom html with a .get function */ var target_html = '<iframe id="custome-app-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%" />'; //create iframe elements with src of app server from proxy url $('#custome-app-iframe').html(target_html); //write iframe html to element }); }

Sorry for the formatting above.

Now that you have this piece you can add more functions to it based on the URL params being sent to the app server via the proxy URL. Notice I have Shopify.shop which identifies the store we are working with (in case we have multiple stores using the app). then there is the product.id because the app above was made to work with the product page. But nothing is stopping you from getting the current page (collection, blog, product, page etc...) and sending that to the app server via a query param to do something with and return data/content back to your shop.

[myjanky]

here is a gist I made for this.

https://gist.github.com/myjanky/fea449e74830c86aed6a83d2e02ead3b

[rubycis]

Hi myjanky I have used your code but I don't get product_id. It's coming undefined. I have included app_proxy.js file and added custom_app div also in the product template.

[myjanky]

Sorry about that. I did not add the element with the "data-product" attribute.

add this to product.liquid to get the product.id <div id='customized' data-product='{{ product.handle }}' ></div>

as long as you are using this with product.liquid you should be ok, but other file files like collection.liquid will need some heavy edits depending on what you are looking to do.

[alexandprivate]

Larry how you doing pal, I have kind of the doubt here with this part of the proxy and the frontend store modification like in the example you provide with the URL .../customize/ how can you modify for example a product name by adding some word in the product.liquid template? and I see you are using a js to do so, are you using a php file to inject the js to the desire view ? by the way can I get the checkout,liquid even if the shop that in runnig my app don't have a plus account plan ?

[myjanky]

Doing good, thanks! you? that is possibly a js only solution.

Without knowing the full scope of what you are going after, this could be done with Liquid and a bit of js magic.

var title = {{ product.title | json }}; if (title == "My Product" ){ $.get("/proxy_url", function(data, status){ $('product_title h1').html('My Super Awesome' + data) }); }

also you could pass query params to /proxy_url whatever that is (like /customize). Really you should not even need the ajax .get if you save your logic in a liquid template and then call that file instead of the get.

It just depends on how you plan on using the app proxy url.

[alexandprivate]

great ! and the checkout.liquid just to add a couple of plane text lines ?

[myjanky]

pretty much the same but you would need a Plus account. Unless it is static text than you could add it through a css content var, although I could be mistaken on that.

[alexandprivate]

well that a reasonable doubt since the API doc didn't mention the need for a plus plan to modify the checkout.liquid (just adding text) by an app, I fact it says about the plus plan if the store owner wanna change the checkout manipulating the liquid. Have you ever try to PUT some text at the checkout.liquid of a developer store ?

[myjanky]

try this in the theme editor.

[myjanky]

depends on what plan you have.

[alexandprivate]

Great but remember I wanna do the text injection to the checkout.liquid using the app proxy without touch the liquid itself

[alexandprivate]

In the first pic you try to create a new layout base in checkout.liquid ... thats because you have a plus account right ?

[myjanky]

well there is this additional scripts in the admin where you can add some js for things like google tracking and such. I would try it there but I have never had a use case where I needed to get data from the app server on the checkout page. It should work but remember the checkout for shops that are not Plus are hosted at checkout.shopify.com and not somestore.myshopify.com. This is why I am unsure the app proxy will work this way.

[alexandprivate]

hummmmmmmm I see it is just to put some

text at the left side in the checkout

[myjanky]

what about adding the text to a custom image and uploading it as the background image in the customize theme option?

[alexandprivate]

Humm no, that wont work for me, look what I really need is to change some content in the template automatically without touching the liquid file itself, I saw I can do so through the Asset API I just don't know how to do it. Any idea ? ohh Larry by the way this is a public App not a private one, the product name will change with content set using the app and modifying the product name automatically, since the app will be installed en several shops we cant touch the liquid, that's the reason we need to accomplish this using the Asset and like so far we cant not determine the tag containing the element we need to modify there is another concern. because one shop may use a "h1" with class name to place the product name and another shop may use a "p" tag or whatever to place the product name and so on.

[myjanky]

The issue with that understanding is that the Asset API gets or puts theme files and can modify those. So adding content to the checkout.liquid will not work for most accounts. (plus required.)

the docs need to be updated to reflect these restrictions.

So your app users will log in and load your app, make content changes they want to appear as the product title then save it. When customers Checkout, you want the app users content to be displayed instead of the default product.title?

If so, this could be done using the new Shopify Scripts. (Plus account required.)

[alexandprivate]

this https://help.shopify.com/api/reference/scripttag ??

[myjanky]

https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/script-tags-in-checkout-111988

[alexandprivate]

ok checkout appart, this is perfectly accomplish for the rest of view, like product detail view and product list, collections etc ?

[alexandprivate]

so how can I modify the name of a product out of the checkout page ? in all places but in the checkout using data placed through my app ?

[alexandprivate]

Larry how much cost the plus plan ?

[myjanky]

Yes, you can use for the rest of the page views that use product.title. I see many app developers use a "kludge" so to speak. Where they create a new hidden product that they replace in the cart for the originally added product? In your case it would be a hidden product that has the title you want but is a representation of the original added to the cart.

The base cost of a plus plan is $1200 per month.

[myjanky]

Also, try to install a few apps and poke around in the code that was added to your site. It may clear any misunderstandings and also give you ideas on how to implement what you want.

[alexandprivate]

yeah that exactly what I meant, so going back to the checkout, for me I dont need the changes I did in the others view be reflected in the checkout just place a plane text in the left side of the checkout page, just that.

[myjanky]

So it will be Static text no matter the product?

[alexandprivate]

yeah

[alexandprivate]

I am trying to add some text there using the scss but nothing.

[myjanky]

https://help.shopify.com/themes/customization/order-status/show-content-based-on-products

I think you can do some stuff to the thank you page but not prior to that in the checkout process.

https://help.shopify.com/themes/customization/order-status https://help.shopify.com/themes/development/templates/checkout-scss-liquid

What you are after is only possible with Plus.

[alexandprivate]

humm I see, how much plus stores should be active, I know that's a weird data but It will be good to have a close number

[myjanky]

There a more than 10,000 plus stores active. Even Google has a Shopify shop on a plus account.

[alexandprivate]

wow ! Larry last question(for now LOL) man how can I test a plus issue if my developer store is not in plus plan ?

[myjanky]

No worries, ask as many as you need. lol.

You can request a Plus plan on your Partners account (developers.shopify.com) from your partner manager. They are free but if you make the dev shop active then it will require a CC.

[alexandprivate]

although how can I get the theme ID to use Assets API ? because I need the theme ID to use Asset

[myjanky]

What I do is retrieve a list of all assets and read the key until I find the one that equals the file name I need to update. After I find the file, I grab the Id and drop it into my function that updates the file.

GET /admin/themes/#{id}/assets.json where #{id} is the theme's ID. retrieve list of all assets.

[myjanky]

Sorry I mis read.

theme Id can be found by getting list of all themes and asking which one is published.

[myjanky]

https://help.shopify.com/api/reference/theme

[alexandprivate]

Great! By the way the first explanation solve my next question. Thanks man

[alexandprivate]

Larry I am getting an error here when I call all themes GET/admin/themes.json but when I call GET/admin/shop.json works perfectly !!!!!

[myjanky]

can you post the response headers?

[alexandprivate]

HTTP status code was >= 400 or response contained the key 'errors'

[alexandprivate]

and I am calling like this GET/admin/themes.json to get all themes and see what is published to get the ID and the work with the ID

[myjanky]

You will need to dump CurlException() to the screen or file.

[alexandprivate]

So I need to modify the library ? I just dont know why GET/admin/themes.json isn't working.

[alexandprivate]

you use to GET/admin/themes.json to get all themes right ?