How to use metafield value in Shopify APP - shopify

I have created metafield using API. Currently accessing those Metafield in shopify cart.liquid like given below -
{{shop.metafields.AnnexCloud.access_token}}
Getting correct value using above syntax.
But when I try to access Metafield through above syntax in APP files facing issue.
I am creating new shopify public APP using python. In that want access metafield using
{{shop.metafields.AnnexCloud.access_token}}
So, please help me out.
Thanks

I'm not 100% sure what you mean about accessing that metafield through your app - there are lots of places where you might be trying to use that value, so I'll try to cover a few of the bases here.
If you're trying to access the metafield in your Python code
Your app is not running on Shopify's servers and doesn't have any native concept of Liquid code. However, since your app is running on your servers with access to whatever database you've used to store the data you need, you shouldn't need to access this metafield - you should have all the information you need already saved.
That said, if your app's requirements have put you in a position where you need to read that live from the store, you can use your app's credentials to access [the-store-domain.myshopify.com]/admin/metafields.json to get metafield information into your app. You can refine your request as well - for example, [the-store-domain.myshopify.com]/admin/metafields.json?namespace=atuls-app would only return metafields where the namespace was atuls-app.
If you're trying to access the metafield in your app's front-end code
You unfortunately won't be able to put the liquid drop into any file inside of the store's /assets folder (if you're writing any files there), nor will you be able to put any Liquid inside of any assets your app loads through the content_for_header.
For the latter case, though, the scripts loaded through content_for_header would be coming from your server, so you could use any of the methods listed above to get that value injected into the script file through your server's code/logic.
For the former case, where you are adding a file to the /assets folder of a Shopify theme, you would only have access to a very limited number of Liquid variables (and unfortunately shop isn't one of them). To get around this, you would need your app's install to add a script tag to the layouts/theme.liquid file to save a global variable with the contents of your metafield. Any other scripts would then be able to access that global variable. (Note: this method comes with all the normal caveats/considerations about using global variables for things)
Hope this helps!

Related

How do we store variables for each user on a shopify app?

I'm building a simple app where that shows product recommendations.
I want to make it possible for the client to choose how many products he'd like to display, like from 5 or 20 with a liquid variable called {{NofProducts}}
I'm using the shopify app example, there are two important pages:
pages/index.js <- here the client can write inputs
theme-app-extension/block.liquid <- here we write a liquid code that will be appended to the page.
How do I pass the inputs from index.js to the block.liquid?
Do I have to store it elsewhere in a database for each user?
Do I have to create a file using graphQL inside each theme with the user choices using "createScriptTag"?
Ok, unfortunately every Shopify tutorial is extremely confusing for beginners.
They way you pass the store owner inputs to the app is using a database, I did it using Redis, but you can use MongoDB or maybe even a local file, but that's not ideal.
You should not store the user inputs inside their theme, because each time you access or modify a file in the customer's store, you need to use their getSessionToken function and make a new request using the token, while using your database you just need to get the session ID using SESSION_STORAGE.

Shopify Interact with product page HTML via app

We plan to create a Shopify app but we face some problems to find in documentations how to interact with pages.
I`m not sure we must ask every time users to add codes and etc, so I need to know if I miss something.
I need to interact with the product pages in Shopify from an app.
I search and read all the web for this and everything is how to start but not the actual examples.
I know for the ScriptTags and how to include them but that is.
If someone can give me a simple example of how for example to hide the Buy button and insert something on instead.
I know how to select it with the default theme with JQuery but what about all other themes?
There are two ways to interact with the front page:
1) Inject some code in the page ( the live one )
2) Use ScriptTag as you mentioned.
The code injection script will modify the product template for example and inject your code if you like to do this automatically or you can instruct the user to do so on their own, but if they are not code savvy there might be issues.
In addition this code will live only on the live theme in most cases. And if the user likes to delete your app at a specific time you must be sure to write the logic in such way that it won't affect the site if your app is no longer present ( since it will be really hard to clean up the files once you add the code automatically )
For this approach you will need to use the Asset API.
You will need to get the content of the file with a GET request to the file and make a put request in order to update it.
The better approach is to use ScriptTag API.
This will allow the use of a script file that will be attached on EVERY theme. This will not modify the theme files in any form or shape.
It seems that this is the approach that you are looking for.
Please have in mind that you will be the one hosting the file from your app so pretty much you can write what ever you like there. So if you like to use jQuery you must be sure that the themes have included jQuery or you will have to add the jQuery core code inside your script.
As for how to write a script tag, there is a pretty straightforward documentation here: https://help.shopify.com/en/api/reference/online-store/scripttag#create-2020-01

Share dynamic content on LinkedIn

I have a JS based CMS that populates a single page with different content based on URL parameters passed to the page. I am using the shareURL format (https://www.linkedin.com/shareArticle?mini=true&url=''&title=''&summary=''&source='')
But the parameters I pass are never used it always falls back to what is being served directly from the server.
Do I have to use the API to make this work and if so can I use the API without making the user authenticate?
Is there a correct way to pass this so that linked in will display the correct data.
After testing this more I realised that the linked ins share URL does not take its parameters it only takes what is served from the server. So I changed my build process not to get the pages in run time but to precompile them onto the server. Maybe in the future linked in will have resolved this for dynamic pages.

Shopify [Plus] Liquid to Retrieve Orders & Customers, or Include App Proxy Snippets

I'm looking for a way in Liquid to retrieve all Customers, or all Orders. I know it's targeted from a Client POV so probably not, but I just wanted to double check if there are any undocumented handles anyone has come across? Its for a protected page for staff user only access.
If the only solution to fetch this data is to use the App Proxy (for API access), is there a tidy way of including the output in a template? I gather there is no way to simply include an App Proxy liquid file into a Page as you can with Snippets, so does that purely leave either having the webpage at a proxy url or to pull in the contents with a jQuery call?
Your question is confusing. If you're on the front-end of a store, using Liquid, it seems pretty obvious you cannot easily access all customers. That would not be a front-end store thing. If you were logged in as a customer, with Liquid you'd have all that customer's order data.
With a clearer question, maybe you might get more help. What are you trying to do, and why?

Integrating custom analytics with Shopify

I am developing an analytics product similar to Google Analytics and want to offer an integration for our Shopify users.
I would need to do just two things:
1) Insert our JavaScript snippet into the body of all the shop's pages
2) Insert a second conversion snippet into the body of only the "thank you" page after a purchase to record the sale, passing back the order total and order number
Could you point me in the right direction?
The ScriptTag endpoint looks optimal except that it doesn't seem to provide any way to differentiate between the "thank you" page and other pages, or to pass the order details from the "thank you" page into the script.
It seems like I either need an endpoint that can inject arbitrary code into all pages, or one which lets me alter the theme layout file to add code before the </body> tag.
If I can do that much, it looks like I might be able to use a conditional in the templating language to only show the conversion code if the URL matches the "thank you" page URL, and use {{ total_price }} and {{ order_number }} in that code.
Does the uninstall webhook allow me to make changes before the rights for the app are revoked? It seems like I would need a way to clean up at uninstall to remove my code from the theme, if I'm allowed to edit the layout file.
itThere are two ways you can go about this:
ScriptTags: You're already aware of this method. It's true that the script is loaded into each and every page, but you can look at document.url in your js to figure out which page you're on and conditionally execute code based on that.
Scripts inserted this way are executed during the 'onLoad' event. At that time you have access to the DOM and can do basically whatever you want with the page.
Snippets: Using the Assets endpoint you can make arbitrary changes to the user's theme. Be careful with this power! The recommended way to make complex changes to a page is to create a custom snippet in the theme with your additions and then tell the user to insert an include tag into their code where it needs to appear. This reduces clutter in the main theme files.
I'd recommend using ScriptTags wherever possible. As mentioned below, they don't need cleaning up and remove the need for user interaction when setting up the app.
--
As for the uninstall webhook: It is fired after the app has been uninstalled from the shop, so you no longer have access. It's designed to be used to trigger cleanup on your end (remove db entries, etc.). Note that ScriptTags and Webhook subscriptions are automatically cleaned up, but any changes you've made to the theme aren't
You ask a lot of questions in one posting.
For your #1 and #2 read:
http://api.shopify.com/scripttag.html
Secondly, for your app install/uninstall read:
http://api.shopify.com/webhook.html
Pay attention to the part about app/uninstalled since you're interested in that.
As for knowing when someone installs your App, that is really up to you to figure out. Should not be too hard since you probably read about how to make and App in the first place. Shopify provides lots of boiler plate code on github that can show you almost everything you asked here.