I’m trying to add a custom tag to the shop immediately when my app is installed but I’m having a hard time figuring out how. This simple task has proven quite difficult for me, being that this is my first Shopify React app.
My goals are:
Add custom script to the shop immediately when app is installed w/ scriptTagCreate
Use GraphQL mutations scriptTagCreate and scriptTagDelete w/ Shopify’s Polaris’s component
In short it recommends that you use a library like Apollo to build queries and mutations into your app. The Apollo client and its React components were designed to let you quickly build a React UI that fetches data with GraphQL. Apollo’s components handle complexities like storing low-level networking details and maintaining a local cache when working with an API. https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apollo
I’m having the same issue - do you have any code/examples you could share for how you got it to work? I’m finding the docs linked to be far too sparse.
i have the similar problem, too. I am new at react and i dont know how to use it on the right way, maybe some codes or some apps on github will help me, too.
So far I have confirmed that you can either do it via scriptTag mutation or REST API.
In the tutorial, they only make a POST request to create a billing plan with graphQL.
How does that apply to creating a POST request and creating scriptTag. Once the scriptTag is created how does one use that scriptTag to actually display it on the store-front when react Component state changes. You would need to have something like Redux on the front-end, no?
SHOPIFY, please STEP UP on this part as there is not enough documentation to learn how to do it.
I have spoken to Shopify Reps and they sent me here, to community.shopify. But it seems nobody knows is able to JUST list the steps on how each part talks to each other.
Thank you to all who would like to spend some time on this thread and help out fellow beginner developers.
Agreed - I really think there needs to be better documentation on this. I was able to get it to work so I’ll share here in case it helps someone else:
Some things about ScriptTags that weren’t obvious to me but I think Shopify assumes is clear:
They’re global - so you only need to add them once and then have logic in the script tag that displays what you need to for a given page
You can’t make API calls to your server directly from them, you have to set up an online store App Proxy through the Shopify settings
Here’s my code, built off of the sample app from Shopify that inject a ScriptTag. I would prefer to do it from server.js but couldn’t get that working. This is probably not the cleanest way to do it, but it works:
import { EmptyState, Layout, Page } from '@shopify/polaris';
import { ResourcePicker, TitleBar } from '@shopify/app-bridge-react';
import store from 'store-js';
import ResourceListWithProducts from '../components/ResourceList';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
const img = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
const CREATE_SCRIPTTAG = gql`
mutation scriptTagCreate($input: ScriptTagInput!){
scriptTagCreate(input: $input) {
scriptTag {
id
}
userErrors {
field
message
}
}
}`;
class Index extends React.Component {
state = { open: false };
render() {
const emptyState = !store.get('ids');
let installScriptTag = !store.get('scripttag');
const productPageScriptTagInput = {
src: 'https://raw.githack.com/funnycat/test/master/productPageScriptTag.js',
displayScope: 'ONLINE_STORE',
};
return (
);
}
handleSelection = (resources) => {
const idsFromResources = resources.selection.map((product) => product.id);
this.setState({ open: false });
store.set('ids', idsFromResources);
createScriptTag;
};
}
export default Index;
My ScriptTag code does something like the following:
Get the product slug from the URL
Use it to make a call to my app’s APIs to get settings for that product
Use the settings for that product to replace the checkout button
Since my app is still very close to the app in this tutorial: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react - you could basically clone the tutorial, then add the code I posted into index.js and replace the link with the link to your linked code. It’s not exactly doing the injection on app install (I couldn’t get that working) but it checks to see if it’s ever been done, and does it once when the user selects products.
