commit 6cb1d01b0caa0fc65dabfbb3c8a7ee8898cb6591 Author: metatroncubeswdev Date: Fri Jun 27 18:48:53 2025 -0400 Inital commit diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..78e1a23 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,3 @@ +.cache +build +node_modules diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c9fe4a7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# editorconfig.org +root = true + +[*] +charset = utf-8 +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +# Markdown syntax specifies that trailing whitespaces can be meaningful, +# so let’s not trim those. e.g. 2 trailing spaces = linebreak (
) +# See https://daringfireball.net/projects/markdown/syntax#p +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3796499 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,6 @@ +node_modules +build +public/build +shopify-app-remix +*/*.yml +.shopify diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..a42d975 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,13 @@ +/** @type {import('@types/eslint').Linter.BaseConfig} */ +module.exports = { + root: true, + extends: [ + "@remix-run/eslint-config", + "@remix-run/eslint-config/node", + "@remix-run/eslint-config/jest-testing-library", + "prettier", + ], + globals: { + shopify: "readonly" + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9cc3d68 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +node_modules +.DS_Store + +/.cache +/build +/app/build +/public/build/ +/public/_dev +/app/public/build +/prisma/dev.sqlite +/prisma/dev.sqlite-journal +database.sqlite + +.env +.env.* + + + + + +/extensions/*/dist + +# Ignore shopify files created during app dev +.shopify/* +.shopify.lock \ No newline at end of file diff --git a/.graphqlrc.js b/.graphqlrc.js new file mode 100644 index 0000000..eca7ae8 --- /dev/null +++ b/.graphqlrc.js @@ -0,0 +1,38 @@ +import fs from "fs"; +import { LATEST_API_VERSION } from "@shopify/shopify-api"; +import { shopifyApiProject, ApiType } from "@shopify/api-codegen-preset"; +function getConfig() { + const config = { + projects: { + default: shopifyApiProject({ + apiType: ApiType.Admin, + apiVersion: LATEST_API_VERSION, + documents: [ + "./app/**/*.{js,ts,jsx,tsx}", + "./app/.server/**/*.{js,ts,jsx,tsx}", + ], + outputDir: "./app/types", + }), + }, + }; + let extensions = []; + try { + extensions = fs.readdirSync("./extensions"); + } catch { + // ignore if no extensions + } + for (const entry of extensions) { + const extensionPath = `./extensions/${entry}`; + const schema = `${extensionPath}/schema.graphql`; + if (!fs.existsSync(schema)) { + continue; + } + config.projects[entry] = { + schema, + documents: [`${extensionPath}/**/*.graphql`], + }; + } + return config; +} +const config = getConfig(); +export default config; diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..7343d30 --- /dev/null +++ b/.npmrc @@ -0,0 +1,4 @@ +engine-strict=true +auto-install-peers=true +shamefully-hoist=true +enable-pre-post-scripts=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..82667c5 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,7 @@ +package.json +.shadowenv.d +.vscode +node_modules +prisma +public +.shopify diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..bd453a8 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,6 @@ +{ + "recommendations": [ + "graphql.vscode-graphql", + "shopify.polaris-for-vscode", + ] +} diff --git a/.vscode/mcp.json b/.vscode/mcp.json new file mode 100644 index 0000000..4936c6e --- /dev/null +++ b/.vscode/mcp.json @@ -0,0 +1,8 @@ +{ + "servers": { + "shopify-dev-mcp": { + "command": "npx", + "args": ["-y", "@shopify/dev-mcp@latest"] + } + } +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..735ac1f --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,76 @@ +# @shopify/shopify-app-template-remix + +## 2025.06.12 +- [#1075](https://github.com/Shopify/shopify-app-template-remix/pull/1075) Add Shopify MCP to [VSCode configs](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_enable-mcp-support-in-vs-code) + +## 2025.06.12 +-[#1082](https://github.com/Shopify/shopify-app-template-remix/pull/1082) Remove local Shopify CLI from the template. Developers should use the Shopify CLI [installed globally](https://shopify.dev/docs/api/shopify-cli#installation). +## 2025.03.18 +-[#998](https://github.com/Shopify/shopify-app-template-remix/pull/998) Update to Vite 6 + +## 2025.03.01 +- [#982](https://github.com/Shopify/shopify-app-template-remix/pull/982) Add Shopify Dev Assistant extension to the VSCode extension recommendations + +## 2025.01.31 +- [#952](https://github.com/Shopify/shopify-app-template-remix/pull/952) Update to Shopify App API v2025-01 + +## 2025.01.23 + +- [#923](https://github.com/Shopify/shopify-app-template-remix/pull/923) Update `@shopify/shopify-app-session-storage-prisma` to v6.0.0 + +## 2025.01.8 + +- [#923](https://github.com/Shopify/shopify-app-template-remix/pull/923) Enable GraphQL autocomplete for Javascript + +## 2024.12.19 + +- [#904](https://github.com/Shopify/shopify-app-template-remix/pull/904) bump `@shopify/app-bridge-react` to latest +- +## 2024.12.18 + +- [875](https://github.com/Shopify/shopify-app-template-remix/pull/875) Add Scopes Update Webhook +## 2024.12.05 + +- [#910](https://github.com/Shopify/shopify-app-template-remix/pull/910) Install `openssl` in Docker image to fix Prisma (see [#25817](https://github.com/prisma/prisma/issues/25817#issuecomment-2538544254)) +- [#907](https://github.com/Shopify/shopify-app-template-remix/pull/907) Move `@remix-run/fs-routes` to `dependencies` to fix Docker image build +- [#899](https://github.com/Shopify/shopify-app-template-remix/pull/899) Disable v3_singleFetch flag +- [#898](https://github.com/Shopify/shopify-app-template-remix/pull/898) Enable the `removeRest` future flag so new apps aren't tempted to use the REST Admin API. + +## 2024.12.04 + +- [#891](https://github.com/Shopify/shopify-app-template-remix/pull/891) Enable remix future flags. + +## 2024.11.26 +- [888](https://github.com/Shopify/shopify-app-template-remix/pull/888) Update restResources version to 2024-10 + +## 2024.11.06 + +- [881](https://github.com/Shopify/shopify-app-template-remix/pull/881) Update to the productCreate mutation to use the new ProductCreateInput type + +## 2024.10.29 + +- [876](https://github.com/Shopify/shopify-app-template-remix/pull/876) Update shopify-app-remix to v3.4.0 and shopify-app-session-storage-prisma to v5.1.5 + +## 2024.10.02 + +- [863](https://github.com/Shopify/shopify-app-template-remix/pull/863) Update to Shopify App API v2024-10 and shopify-app-remix v3.3.2 + +## 2024.09.18 + +- [850](https://github.com/Shopify/shopify-app-template-remix/pull/850) Removed "~" import alias + +## 2024.09.17 + +- [842](https://github.com/Shopify/shopify-app-template-remix/pull/842) Move webhook processing to individual routes + +## 2024.08.19 + +Replaced deprecated `productVariantUpdate` with `productVariantsBulkUpdate` + +## v2024.08.06 + +Allow `SHOP_REDACT` webhook to process without admin context + +## v2024.07.16 + +Started tracking changes and releases using calver diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..b52dc40 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,21 @@ +FROM node:18-alpine +RUN apk add --no-cache openssl + +EXPOSE 3002 + +WORKDIR /app + +ENV NODE_ENV=production + +COPY package.json package-lock.json* ./ + +RUN npm ci --omit=dev && npm cache clean --force +# Remove CLI packages since we don't need them in production by default. +# Remove this line if you want to run CLI commands in your container. +RUN npm remove @shopify/cli + +COPY . . + +RUN npm run build + +CMD ["npm", "run", "docker-start"] diff --git a/README.md b/README.md new file mode 100644 index 0000000..1b648fd --- /dev/null +++ b/README.md @@ -0,0 +1,371 @@ +# Shopify App Template - Remix + +This is a template for building a [Shopify app](https://shopify.dev/docs/apps/getting-started) using the [Remix](https://remix.run) framework. + +Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with [these steps](https://shopify.dev/docs/apps/getting-started/create). + +Visit the [`shopify.dev` documentation](https://shopify.dev/docs/api/shopify-app-remix) for more details on the Remix app package. + +## Quick start + +### Prerequisites + +Before you begin, you'll need the following: + +1. **Node.js**: [Download and install](https://nodejs.org/en/download/) it if you haven't already. +2. **Shopify Partner Account**: [Create an account](https://partners.shopify.com/signup) if you don't have one. +3. **Test Store**: Set up either a [development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) or a [Shopify Plus sandbox store](https://help.shopify.com/en/partners/dashboard/managing-stores/plus-sandbox-store) for testing your app. + +### Setup + +If you used the CLI to create the template, you can skip this section. + +Using yarn: + +```shell +yarn install +``` + +Using npm: + +```shell +npm install +``` + +Using pnpm: + +```shell +pnpm install +``` + +### Local Development + +Using yarn: + +```shell +yarn dev +``` + +Using npm: + +```shell +npm run dev +``` + +Using pnpm: + +```shell +pnpm run dev +``` + +Press P to open the URL to your app. Once you click install, you can start development. + +Local development is powered by [the Shopify CLI](https://shopify.dev/docs/apps/tools/cli). It logs into your partners account, connects to an app, provides environment variables, updates remote config, creates a tunnel and provides commands to generate extensions. + +### Authenticating and querying data + +To authenticate and query data you can use the `shopify` const that is exported from `/app/shopify.server.js`: + +```js +export async function loader({ request }) { + const { admin } = await shopify.authenticate.admin(request); + + const response = await admin.graphql(` + { + products(first: 25) { + nodes { + title + description + } + } + }`); + + const { + data: { + products: { nodes }, + }, + } = await response.json(); + + return nodes; +} +``` + +This template comes preconfigured with examples of: + +1. Setting up your Shopify app in [/app/shopify.server.ts](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/shopify.server.ts) +2. Querying data using Graphql. Please see: [/app/routes/app.\_index.tsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/app._index.tsx). +3. Responding to webhooks in individual files such as [/app/routes/webhooks.app.uninstalled.tsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/webhooks.app.uninstalled.tsx) and [/app/routes/webhooks.app.scopes_update.tsx](https://github.com/Shopify/shopify-app-template-remix/blob/main/app/routes/webhooks.app.scopes_update.tsx) + +Please read the [documentation for @shopify/shopify-app-remix](https://www.npmjs.com/package/@shopify/shopify-app-remix#authenticating-admin-requests) to understand what other API's are available. + +## Deployment + +### Application Storage + +This template uses [Prisma](https://www.prisma.io/) to store session data, by default using an [SQLite](https://www.sqlite.org/index.html) database. +The database is defined as a Prisma schema in `prisma/schema.prisma`. + +This use of SQLite works in production if your app runs as a single instance. +The database that works best for you depends on the data your app needs and how it is queried. +You can run your database of choice on a server yourself or host it with a SaaS company. +Here's a short list of databases providers that provide a free tier to get started: + +| Database | Type | Hosters | +| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| MySQL | SQL | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-mysql), [Planet Scale](https://planetscale.com/), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/mysql) | +| PostgreSQL | SQL | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-postgresql), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/postgres) | +| Redis | Key-value | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-redis), [Amazon MemoryDB](https://aws.amazon.com/memorydb/) | +| MongoDB | NoSQL / Document | [Digital Ocean](https://www.digitalocean.com/products/managed-databases-mongodb), [MongoDB Atlas](https://www.mongodb.com/atlas/database) | + +To use one of these, you can use a different [datasource provider](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#datasource) in your `schema.prisma` file, or a different [SessionStorage adapter package](https://github.com/Shopify/shopify-api-js/blob/main/packages/shopify-api/docs/guides/session-storage.md). + +### Build + +Remix handles building the app for you, by running the command below with the package manager of your choice: + +Using yarn: + +```shell +yarn build +``` + +Using npm: + +```shell +npm run build +``` + +Using pnpm: + +```shell +pnpm run build +``` + +## Hosting + +When you're ready to set up your app in production, you can follow [our deployment documentation](https://shopify.dev/docs/apps/deployment/web) to host your app on a cloud provider like [Heroku](https://www.heroku.com/) or [Fly.io](https://fly.io/). + +When you reach the step for [setting up environment variables](https://shopify.dev/docs/apps/deployment/web#set-env-vars), you also need to set the variable `NODE_ENV=production`. + +### Hosting on Vercel + +Using the Vercel Preset is recommended when hosting your Shopify Remix app on Vercel. You'll also want to ensure imports that would normally come from `@remix-run/node` are imported from `@vercel/remix` instead. Learn more about hosting Remix apps on Vercel [here](https://vercel.com/docs/frameworks/remix). + +```diff +// vite.config.ts +import { vitePlugin as remix } from "@remix-run/dev"; +import { defineConfig, type UserConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; ++ import { vercelPreset } from '@vercel/remix/vite'; + +installGlobals(); + +export default defineConfig({ + plugins: [ + remix({ + ignoredRouteFiles: ["**/.*"], ++ presets: [vercelPreset()], + }), + tsconfigPaths(), + ], +}); +``` + +## Troubleshooting + +### Database tables don't exist + +If you get this error: + +``` +The table `main.Session` does not exist in the current database. +``` + +You need to create the database for Prisma. Run the `setup` script in `package.json` using your preferred package manager. + +### Navigating/redirecting breaks an embedded app + +Embedded Shopify apps must maintain the user session, which can be tricky inside an iFrame. To avoid issues: + +1. Use `Link` from `@remix-run/react` or `@shopify/polaris`. Do not use ``. +2. Use the `redirect` helper returned from `authenticate.admin`. Do not use `redirect` from `@remix-run/node` +3. Use `useSubmit` or `

No brands selected yet.

+ + + )} + + {brands.map((brand) => ( + + + + + +

ID: {brand.id}

+ + + + + + {expandedBrand === brand.id && ( + + + {actionData?.success && ( + +

+ {actionData.results.map((r) => ( + + Product {r.productId} – Variant {r.variant.id} @ ${r.variant.price} (SKU: {r.variant.sku})
+ + ))} +

+ + )} + + + + + + + + + {loadingMap[brand.id] ? ( + + ) : ( +

+ {(itemsMap[brand.id] || []).map((item) => ( + + + + + + + +

Part Number: {item.attributes.part_number}

Category: {item.attributes.category} > {item.attributes.subcategory}

+ + + + + ))} +

+ )} + + + )} + + ))} + +

+ ); +} diff --git a/app/db.server.js b/app/db.server.js new file mode 100644 index 0000000..a6206be --- /dev/null +++ b/app/db.server.js @@ -0,0 +1,11 @@ +import { PrismaClient } from "@prisma/client"; + +if (process.env.NODE_ENV !== "production") { + if (!global.prismaGlobal) { + global.prismaGlobal = new PrismaClient(); + } +} + +const prisma = global.prismaGlobal ?? new PrismaClient(); + +export default prisma; diff --git a/app/entry.server.jsx b/app/entry.server.jsx new file mode 100644 index 0000000..77a0c2a --- /dev/null +++ b/app/entry.server.jsx @@ -0,0 +1,51 @@ +import { PassThrough } from "stream"; +import { renderToPipeableStream } from "react-dom/server"; +import { RemixServer } from "@remix-run/react"; +import { createReadableStreamFromReadable } from "@remix-run/node"; +import { isbot } from "isbot"; +import { addDocumentResponseHeaders } from "./shopify.server"; + +export const streamTimeout = 5000; + +export default async function handleRequest( + request, + responseStatusCode, + responseHeaders, + remixContext, +) { + addDocumentResponseHeaders(request, responseHeaders); + const userAgent = request.headers.get("user-agent"); + const callbackName = isbot(userAgent ?? "") ? "onAllReady" : "onShellReady"; + + return new Promise((resolve, reject) => { + const { pipe, abort } = renderToPipeableStream( + , + { + [callbackName]: () => { + const body = new PassThrough(); + const stream = createReadableStreamFromReadable(body); + + responseHeaders.set("Content-Type", "text/html"); + resolve( + new Response(stream, { + headers: responseHeaders, + status: responseStatusCode, + }), + ); + pipe(body); + }, + onShellError(error) { + reject(error); + }, + onError(error) { + responseStatusCode = 500; + console.error(error); + }, + }, + ); + + // Automatically timeout the React renderer after 6 seconds, which ensures + // React has enough time to flush down the rejected boundary contents + setTimeout(abort, streamTimeout + 1000); + }); +} diff --git a/app/root.jsx b/app/root.jsx new file mode 100644 index 0000000..805f121 --- /dev/null +++ b/app/root.jsx @@ -0,0 +1,30 @@ +import { + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; + +export default function App() { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/app/routes.js b/app/routes.js new file mode 100644 index 0000000..8389284 --- /dev/null +++ b/app/routes.js @@ -0,0 +1,3 @@ +import { flatRoutes } from "@remix-run/fs-routes"; + +export default flatRoutes(); diff --git a/app/routes/_index/route.jsx b/app/routes/_index/route.jsx new file mode 100644 index 0000000..e86793f --- /dev/null +++ b/app/routes/_index/route.jsx @@ -0,0 +1,55 @@ +import { redirect } from "@remix-run/node"; +import { Form, useLoaderData } from "@remix-run/react"; +import { login } from "../../shopify.server"; +import styles from "./styles.module.css"; + +export const loader = async ({ request }) => { + const url = new URL(request.url); + + if (url.searchParams.get("shop")) { + throw redirect(`/app?${url.searchParams.toString()}`); + } + + return { showForm: Boolean(login) }; +}; + +export default function App() { + const { showForm } = useLoaderData(); + + return ( +

A short heading about [your app]

+ A tagline about [your app] that describes your value proposition. +

+ {showForm && ( + + )} +

+ Product feature. Some detail about your feature and + its benefit to your customer. +
+ Product feature. Some detail about your feature and + its benefit to your customer. +
+ Product feature. Some detail about your feature and + its benefit to your customer. +

+ ); +} diff --git a/app/routes/_index/styles.module.css b/app/routes/_index/styles.module.css new file mode 100644 index 0000000..271721f --- /dev/null +++ b/app/routes/_index/styles.module.css @@ -0,0 +1,73 @@ +.index { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; + text-align: center; + padding: 1rem; +} + +.heading, +.text { + padding: 0; + margin: 0; +} + +.text { + font-size: 1.2rem; + padding-bottom: 2rem; +} + +.content { + display: grid; + gap: 2rem; +} + +.form { + display: flex; + align-items: center; + justify-content: flex-start; + margin: 0 auto; + gap: 1rem; +} + +.label { + display: grid; + gap: 0.2rem; + max-width: 20rem; + text-align: left; + font-size: 1rem; +} + +.input { + padding: 0.4rem; +} + +.button { + padding: 0.4rem; +} + +.list { + list-style: none; + padding: 0; + padding-top: 3rem; + margin: 0; + display: flex; + gap: 2rem; +} + +.list > li { + max-width: 20rem; + text-align: left; +} + +@media only screen and (max-width: 50rem) { + .list { + display: block; + } + + .list > li { + padding-bottom: 1rem; + } +} diff --git a/app/routes/api/turn14/items.jsx b/app/routes/api/turn14/items.jsx new file mode 100644 index 0000000..d552ca9 --- /dev/null +++ b/app/routes/api/turn14/items.jsx @@ -0,0 +1,24 @@ +import { json } from "@remix-run/node"; +import { getTurn14AccessTokenFromMetafield } from "../../../utils/turn14Token.server"; + +export const loader = async ({ request }) => { + const url = new URL(request.url); + const brand = url.searchParams.get("brand"); + const page = url.searchParams.get("page") || "1"; + + // Get the Turn14 token (server‐only) + const token = await getTurn14AccessTokenFromMetafield(request); + + // Fetch Turn14 items + const res = await fetch( + `https://turn14.data4autos.com/v1/items/brand/${brand}?page=${page}`, + { + headers: { Authorization: `Bearer ${token}` }, + } + ); + if (!res.ok) { + return json({ error: "Failed to fetch Turn14 items" }, { status: res.status }); + } + const data = await res.json(); + return json(data); +}; diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx new file mode 100644 index 0000000..7b6d932 --- /dev/null +++ b/app/routes/app._index.jsx @@ -0,0 +1,334 @@ +import { useEffect } from "react"; +import { useFetcher } from "@remix-run/react"; +import { + Page, + Layout, + Text, + Card, + Button, + BlockStack, + Box, + List, + Link, + InlineStack, +} from "@shopify/polaris"; +import { TitleBar, useAppBridge } from "@shopify/app-bridge-react"; +import { authenticate } from "../shopify.server"; + +export const loader = async ({ request }) => { + await authenticate.admin(request); + + return null; +}; + +export const action = async ({ request }) => { + const { admin } = await authenticate.admin(request); + const color = ["Red", "Orange", "Yellow", "Green"][ + Math.floor(Math.random() * 4) + ]; + const response = await admin.graphql( + `#graphql + mutation populateProduct($product: ProductCreateInput!) { + productCreate(product: $product) { + product { + id + title + handle + status + variants(first: 10) { + edges { + node { + id + price + barcode + createdAt + } + } + } + } + } + }`, + { + variables: { + product: { + title: `${color} Snowboard`, + }, + }, + }, + ); + const responseJson = await response.json(); + const product = responseJson.data.productCreate.product; + const variantId = product.variants.edges[0].node.id; + const variantResponse = await admin.graphql( + `#graphql + mutation shopifyRemixTemplateUpdateVariant($productId: ID!, $variants: [ProductVariantsBulkInput!]!) { + productVariantsBulkUpdate(productId: $productId, variants: $variants) { + productVariants { + id + price + barcode + createdAt + } + } + }`, + { + variables: { + productId: product.id, + variants: [{ id: variantId, price: "100.00" }], + }, + }, + ); + const variantResponseJson = await variantResponse.json(); + + return { + product: responseJson.data.productCreate.product, + variant: variantResponseJson.data.productVariantsBulkUpdate.productVariants, + }; +}; + +export default function Index() { + const fetcher = useFetcher(); + const shopify = useAppBridge(); + const isLoading = + ["loading", "submitting"].includes(fetcher.state) && + fetcher.formMethod === "POST"; + const productId = fetcher.data?.product?.id.replace( + "gid://shopify/Product/", + "", + ); + + useEffect(() => { + if (productId) { + shopify.toast.show("Product created"); + } + }, [productId, shopify]); + const generateProduct = () => fetcher.submit({}, { method: "POST" }); + + return ( + + + + + + + + + + + + + + Go to Settings Page + + + + Congrats on creating a new Shopify app 🎉 + + + This embedded app template uses{" "} + + App Bridge + {" "} + interface examples like an{" "} + + additional page in the app nav + + , as well as an{" "} + + Admin GraphQL + {" "} + mutation demo, to provide a starting point for app + development. + + + + + Get started with products + + + Generate a product with GraphQL and get the JSON output for + that product. Learn more about the{" "} + + productCreate + {" "} + mutation in our API references. + + + + + {fetcher.data?.product && ( + + )} + + {fetcher.data?.product && ( + <> + + {" "} + productCreate mutation + + +

+                        
+                          {JSON.stringify(fetcher.data.product, null, 2)}
+                        
+

+ + + {" "} + productVariantsBulkUpdate mutation + + +

+                        
+                          {JSON.stringify(fetcher.data.variant, null, 2)}
+                        
+

+ + + )} + + + + + + + + + App template specs + + + + + Framework + + + Remix + + + + + Database + + + Prisma + + + + + Interface + + + + Polaris + + {", "} + + App Bridge + + + + + + API + + + GraphQL API + + + + + + + + + Next steps + + + + Build an{" "} + + {" "} + example app + {" "} + to get started + + + Explore Shopify’s API with{" "} + + GraphiQL + + + + + + + + + + + ); +} diff --git a/app/routes/app.add.jsx b/app/routes/app.add.jsx new file mode 100644 index 0000000..1954f8d --- /dev/null +++ b/app/routes/app.add.jsx @@ -0,0 +1,173 @@ +// app/routes/test-add-sample-product.jsx + +import { json } from "@remix-run/node"; +import { useLoaderData, useActionData, Form } from "@remix-run/react"; +import { + Page, + Layout, + Card, + Banner, + Button, + InlineError, +} from "@shopify/polaris"; +import { authenticate } from "../shopify.server"; + +export const loader = async ({ request }) => { + const { admin } = await authenticate.admin(request); + + // Fetch the first manual collection in the store + const resp = await admin.graphql(` + { + collections(first: 1, query: "collection_type:manual") { + nodes { + id + title + } + } + } + `); + const result = await resp.json(); + const collection = result.data.collections.nodes[0] || null; + + return json({ collection }); +}; + +export const action = async ({ request }) => { + const formData = await request.formData(); + const collectionId = formData.get("collectionId"); + const { admin } = await authenticate.admin(request); + + // 1️⃣ Create a dummy product + const createRes = await admin.graphql( + `#graphql + mutation CreateDummyProduct($product: ProductCreateInput!) { + productCreate(product: $product) { + product { + id + title + } + userErrors { + field + message + } + } + } + `, + { + variables: { + product: { + title: "Dummy Test Product", + descriptionHtml: "

This is a dummy product for testing.

", + }, + }, + } + ); + const createJson = await createRes.json(); + const createErrors = createJson.data.productCreate.userErrors; + if (createErrors.length) { + return json( + { errors: createErrors.map((e) => e.message) }, + { status: 400 } + ); + } + const newProduct = createJson.data.productCreate.product; + + // 2️⃣ Add the new product to the selected collection + const addRes = await admin.graphql( + `#graphql + mutation AddToCollection($id: ID!, $productIds: [ID!]!) { + collectionAddProducts(id: $id, productIds: $productIds) { + collection { + id + title + } + userErrors { + field + message + } + } + } + `, + { + variables: { + id: collectionId, + productIds: [newProduct.id], + }, + } + ); + const addJson = await addRes.json(); + const addErrors = addJson.data.collectionAddProducts.userErrors; + if (addErrors.length) { + return json( + { errors: addErrors.map((e) => e.message) }, + { status: 400 } + ); + } + const updatedCollection = addJson.data.collectionAddProducts.collection; + + return json({ + success: true, + product: newProduct, + collection: updatedCollection, + }); +}; + +export default function TestAddSampleProduct() { + const { collection } = useLoaderData(); + const actionData = useActionData(); + + return ( + + + + + {!collection && ( + +

+ Please create at least one manual (non-smart) collection in + your store first. +

+ + )} + + {actionData?.success && ( + +

+ Product “{actionData.product.title}” ( + {actionData.product.id}) was created and added to “ + {actionData.collection.title}” ( + {actionData.collection.id}). +

+ + )} + + {actionData?.errors && ( + +

+ + )} + + {collection && !actionData?.success && ( + + )} + + + + + ); +} diff --git a/app/routes/app.add1.jsx b/app/routes/app.add1.jsx new file mode 100644 index 0000000..616d8e5 --- /dev/null +++ b/app/routes/app.add1.jsx @@ -0,0 +1,313 @@ +// app/routes/add-full-product.jsx + +import { json } from "@remix-run/node"; +import { useLoaderData, useActionData, Form } from "@remix-run/react"; +import { + Page, + Layout, + Card, + TextField, + Select, + Button, + Banner, + InlineError, + Text, +} from "@shopify/polaris"; +import { useState, useEffect } from "react"; +import { authenticate } from "../shopify.server"; + +export const loader = async ({ request }) => { + const { admin } = await authenticate.admin(request); + const resp = await admin.graphql(` + { + collections(first: 10, query: "collection_type:manual") { + nodes { id title } + } + } + `); + const { data } = await resp.json(); + return json({ collections: data.collections.nodes }); +}; + +export const action = async ({ request }) => { + const form = await request.formData(); + const { + title, + descriptionHtml, + vendor, + productType, + handle, + tags, + price, + sku, + costPerItem, // new + collectionId, + imageUrl, + } = Object.fromEntries(form); + + const { admin } = await authenticate.admin(request); + + // 1️⃣ Create product + attach image + join collection + const createRes = await admin.graphql( + `#graphql + mutation CreateFullProduct($product: ProductCreateInput!, $media: [CreateMediaInput!]) { + productCreate(product: $product, media: $media) { + product { + id + variants(first: 1) { + nodes { + id + inventoryItem { id } + } + } + } + userErrors { field message } + } + }`, + { + variables: { + product: { + title, + descriptionHtml, + vendor, + productType, + handle, + tags: tags.split(",").map((t) => t.trim()), + collectionsToJoin: [collectionId], + status: "ACTIVE", + }, + media: [ + { + originalSource: imageUrl, + mediaContentType: "IMAGE", + alt: `${title} image`, + }, + ], + }, + } + ); + const createJson = await createRes.json(); + if (createJson.data.productCreate.userErrors.length) { + return json( + { errors: createJson.data.productCreate.userErrors.map((e) => e.message) }, + { status: 400 } + ); + } + const newProduct = createJson.data.productCreate.product; + const variantNode = newProduct.variants.nodes[0]; + const variantId = variantNode.id; + const inventoryItemId = variantNode.inventoryItem.id; + + // 2️⃣ Set price via bulk update + const priceRes = await admin.graphql( + `#graphql + mutation UpdatePrice($productId: ID!, $variants: [ProductVariantsBulkInput!]!) { + productVariantsBulkUpdate(productId: $productId, variants: $variants) { + productVariants { id price } + userErrors { field message } + } + }`, + { + variables: { + productId: newProduct.id, + variants: [{ id: variantId, price: parseFloat(price) }], + }, + } + ); + const priceJson = await priceRes.json(); + if (priceJson.data.productVariantsBulkUpdate.userErrors.length) { + return json( + { errors: priceJson.data.productVariantsBulkUpdate.userErrors.map((e) => e.message) }, + { status: 400 } + ); + } + const updatedVariant = priceJson.data.productVariantsBulkUpdate.productVariants[0]; + + // 3️⃣ Update inventory item: set SKU + cost per item + const skuCostRes = await admin.graphql( + `#graphql + mutation SetSKUAndCost($id: ID!, $input: InventoryItemInput!) { + inventoryItemUpdate(id: $id, input: $input) { + inventoryItem { id sku } + userErrors { field message } + } + }`, + { + variables: { + id: inventoryItemId, + input: { + sku, + cost: parseFloat(costPerItem), // unit cost in shop’s default currency :contentReference[oaicite:1]{index=1} + }, + }, + } + ); + const skuCostJson = await skuCostRes.json(); + if (skuCostJson.data.inventoryItemUpdate.userErrors.length) { + return json( + { errors: skuCostJson.data.inventoryItemUpdate.userErrors.map((e) => e.message) }, + { status: 400 } + ); + } + const finalSKU = skuCostJson.data.inventoryItemUpdate.inventoryItem.sku; + + return json({ + success: true, + product: newProduct, + variant: { + id: updatedVariant.id, + price: updatedVariant.price, + sku: finalSKU, + }, + }); +}; + +export default function AddFullProductPage() { + const { collections } = useLoaderData(); + const actionData = useActionData(); + + // Controlled inputs + const [title, setTitle] = useState("Dummy Test Product"); + const [descriptionHtml, setDescriptionHtml] = useState( + "

This is a dummy product for testing.

" + ); + const [vendor, setVendor] = useState("Test Vendor"); + const [productType, setProductType] = useState("Test Type"); + const [handle, setHandle] = useState("dummy-test-product"); + const [tags, setTags] = useState("test, dummy, sample"); + const [price, setPrice] = useState("9.99"); + const [costPerItem, setCostPerItem] = useState("5.00"); // new default + const [sku, setSku] = useState("DUMMY-9"); + const [imageUrl, setImageUrl] = useState( + "https://via.placeholder.com/300x300.png?text=Dummy+Image" + ); + const [collectionId, setCollectionId] = useState( + collections[0]?.id || "" + ); + + useEffect(() => { + if (!collectionId && collections.length) { + setCollectionId(collections[0].id); + } + }, [collections, collectionId]); + + return ( + + + + + {actionData?.success && ( + +

+ {actionData.product.id} – Variant {actionData.variant.id} @ $ + {actionData.variant.price} (SKU: {actionData.variant.sku}) +

+ + )} + {actionData?.errors && ( + +

+ + )} + +