App reviews, troubleshooting, and recommendations
I want to create an app that loads external script. I am using Shopify CLI to create app and I managed to take input form user and save the input as setting.
export const loader = async ({ request }) => {
// Fetch current settings from your database
const settings = await fetchSettingsFromDB();
return json(settings);
};
export const action = async ({ request }) => {
const formData = await request.formData();
const enableChatbot = formData.get("enableChatbot") === "on";
const chatbotId = formData.get("chatbotId");
// Save settings to your database
await saveSettingsToDB({ enableChatbot, chatbotId });
return { success: true };
};
export default function App() {
const settings = useLoaderData();
const actionData = useActionData();
const labelStyle = {
display: "block",
width: "100px",
height: "40px",
lineHeight: "40px",
};
const flex = {
display: "flex",
alignItems: "center",
gap: "10px",
};
return (
<AppProvider>
<Page>
<Layout>
<Layout.Section>
<div style={{ fontFamily: "sans-serif" }}>
<Form method="post">
<h2 style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
Thinkstack Settings
</h2>
<hr />
<label style={flex}>
<span style={labelStyle}>Enable Chatbot</span>:
<input
type="checkbox"
name="enableChatbot"
defaultChecked={settings.enableChatbot}
/>
</label>
<label style={flex}>
<span style={labelStyle}>Chatbot ID</span>:
<input
type="text"
name="chatbotId"
style={{ height: "30px" }}
defaultValue={settings.chatbotId}
/>
</label>
<button type="submit" style={{ height: "40px", width: "80px" }}>
Save
</button>
</Form>
{actionData && actionData.error ? (
<p style={{ color: "red" }}>{actionData.error}</p>
) : (
<p style={{ color: "green" }}>Saved!</p>
)}
</div>
</Layout.Section>
</Layout>
</Page>
</AppProvider>
);
}
app/routes/_index.jsx
After this I want to load the script on the website the app is installed for. Here is what I am true.
export const action = async ({ request }) => {
const { session, chatbotId } = await request.json();
const client = new Shopify.Clients.Rest(session.shop, session.accessToken);
try {
const response = await client.post({
path: "script_tags",
data: {
script_tag: {
event: "onload",
src: `https://app.thinkstack.ai/bot/thinkstackai-loader.min.js?id=${chatbotId}`,
},
},
type: "application/json",
});
return json(response);
} catch (error) {
return json({ error: error.message }, { status: 500 });
}
};
app/api/create-script.js
export const loader = async ({ request }) => {
const url = new URL(request.url);
const query = Object.fromEntries(url.searchParams.entries());
const session = await Shopify.Auth.validateAuthCallback(request, query);
const settings = await fetchSettingsFromDB();
if (settings.enableChatbot) {
const response = await fetch(`${url.origin}/api/create-script-tag`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ session, chatbotId: settings.chatbotId }),
});
if (!response.ok) {
throw new Error("Failed to create script tag");
}
}
return redirect(`https://${session.shop}/admin/apps`);
};
app/auth/callback.js
NOTE: I am new to Shopify and I am not sure what I am doing wrong.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024