Build a Shopify app using React Router

After you scaffold an app, you can add your own functionality to pages inside and outside of the Shopify admin.

In this tutorial, you'll scaffold an app that makes QR codes for products. When the QR code is scanned, it takes the user to a checkout that's populated with the product, or to the product page. The app logs every time the QR code is scanned, and exposes scan metrics to the app user.

Follow along with this tutorial to build a sample app, or clone the completed sample app.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to do the following tasks:

Update the Prisma database included in the app template.
Use the @shopify/shopify-app-react-router package to authenticate users and query data.
Use Polaris web components to create a UI that adheres to Shopify's App Design Guidelines.
Use Shopify App Bridge to add interactivity to your app.

Requirements

Scaffold an app

Scaffold an app that uses the React Router template.

Install qrcode

Enables creation of QR codes.

Install @shopify/polaris-icons

Provides placeholder images for the UI.

Install tiny-invariant

Allows loaders to easily throw errors.

Project

Framework:

View on GitHub

Anchor to Add the QR code data model to your databaseAdd the QR code data model to your database

To store your QR codes, you need to add a table to the database included in your template.

Info

The single table in the template's Prisma schema is the Session table. It stores the tokens for each store that installs your app, and is used by the @shopify/shopify-app-session-storage-prisma package to manage sessions.

Anchor to Create the tableCreate the table

Add a QRCode model to your Prisma schema. The model should contain the following fields:

id: The primary key for the table.
title: The app user-specified name for the QR code.
shop: The store that owns the QR code.
productId: The product that this QR code is for.
productHandle: Used to create the destination URL for the QR code.
productVariantId: Used to create the destination URL for the QR code.
destination: The destination for the QR code.
scans: The number times that the QR code been scanned.
createdAt: The date and time when the QR code was created.

The QRCode model contains the key identifiers that the app uses to retrieve Shopify product and variant data. At runtime, additional product and variant properties are retrieved and used to populate the UI.

/prisma/schema.prisma

// This is your Prisma schema file,

// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {

provider = "prisma-client-js"

}

datasource db {

provider = "sqlite"

url = "file:dev.sqlite"

}

model Session {

id String @id

shop String

state String

isOnline Boolean @default(false)

scope String?

expires DateTime?

accessToken String

userId BigInt?

}

model QRCode {

id Int @id @default(autoincrement())

title String

shop String

productId String

productHandle String

productVariantId String

destination String

scans Int @default(0)

createdAt DateTime @default(now())

}

Anchor to Migrate the databaseMigrate the database

After you add your schema, you need to migrate the database to create the table.

Run the following command to create the table in Prisma:

Terminal
npm run prisma migrate dev -- --name add-qrcode-table
yarn prisma migrate dev --name add-qrcode-table
pnpm run prisma migrate dev --name add-qrcode-table
npm run prisma migrate dev -- --name add-qrcode-tableyarn prisma migrate dev --name add-qrcode-tablepnpm run prisma migrate dev --name add-qrcode-table
To confirm that your migration worked, open Prisma Studio:

Terminal
npm run prisma studio
yarn prisma studio
pnpm run prisma studio
npm run prisma studioyarn prisma studiopnpm run prisma studio

Prisma Studio opens in your browser.
In Prisma Studio, click the QRCode tab to view the table.

You should see a table with the columns that you created, and no data.

Anchor to Get QR code and product dataGet QR code and product data

After you create your database, add code to retrieve data from the table.

Supplement the QR code data in the database with product information.

Anchor to Create the modelCreate the model

Create a model to get and validate QR codes.

Create an /app/models folder. In that folder, create a new file called QRCode.server.js.

Anchor to Get QR codesGet QR codes

Create a function to get a single QR code for your QR code form, and a second function to get multiple QR codes for your app's index page. You'll create a QR code form later in this tutorial.

QR codes stored in the database can be retrieved using the Prisma FindFirst and FindMany queries.

/app/models/QRCode.server.js

import qrcode from "qrcode";

import invariant from "tiny-invariant";

import db from "../db.server";

export async function getQRCode(id, graphql) {

const qrCode = await db.qRCode.findFirst({ where: { id } });

if (!qrCode) {

return null;

}

return supplementQRCode(qrCode, graphql);

}

export async function getQRCodes(shop, graphql) {

const qrCodes = await db.qRCode.findMany({

where: { shop },

orderBy: { id: "desc" },

});

if (qrCodes.length === 0) return [];

return Promise.all(

qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))

);

}

export function getQRCodeImage(id) {

const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);

return qrcode.toDataURL(url.href);

}

export function getDestinationUrl(qrCode) {

if (qrCode.destination === "product") {

return `https://${qrCode.shop}/products/${qrCode.productHandle}`;

}

const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);

invariant(match, "Unrecognized product variant ID");

return `https://${qrCode.shop}/cart/${match[1]}:1`;

}

async function supplementQRCode(qrCode, graphql) {

const qrCodeImagePromise = getQRCodeImage(qrCode.id);

const response = await graphql(

query supplementQRCode($id: ID!) {

product(id: $id) {

title

media(first: 1) {

nodes {

preview {

image {

altText

url

}

{

variables: {

id: qrCode.productId,

}

);

const {

data: { product },

} = await response.json();

return {

...qrCode,

productDeleted: !product?.title,

productTitle: product?.title,

productImage: product?.media?.nodes[0]?.preview?.image?.url,

productAlt: product?.media?.nodes[0]?.preview?.image?.altText,

destinationUrl: getDestinationUrl(qrCode),

image: await qrCodeImagePromise,

};

}

export function validateQRCode(data) {

const errors = {};

if (!data.title) {

errors.title = "Title is required";

}

if (!data.productId) {

errors.productId = "Product is required";

}

if (!data.destination) {

errors.destination = "Destination is required";

}

if (Object.keys(errors).length) {

return errors;

}

Anchor to Get the QR code imageGet the QR code image

A QR code takes the user to /qrcodes/$id/scan, where $id is the ID of the QR code. Create a function to construct this URL, and then use the qrcode package to return a base 64-encoded QR code image src.

/app/models/QRCode.server.js

import qrcode from "qrcode";

import invariant from "tiny-invariant";

import db from "../db.server";

export async function getQRCode(id, graphql) {

const qrCode = await db.qRCode.findFirst({ where: { id } });

if (!qrCode) {

return null;

}

return supplementQRCode(qrCode, graphql);

}

export async function getQRCodes(shop, graphql) {

const qrCodes = await db.qRCode.findMany({

where: { shop },

orderBy: { id: "desc" },

});

if (qrCodes.length === 0) return [];

return Promise.all(

qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))

);

}

export function getQRCodeImage(id) {

const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);

return qrcode.toDataURL(url.href);

}

export function getDestinationUrl(qrCode) {

if (qrCode.destination === "product") {

return `https://${qrCode.shop}/products/${qrCode.productHandle}`;

}

const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);

invariant(match, "Unrecognized product variant ID");

return `https://${qrCode.shop}/cart/${match[1]}:1`;

}

async function supplementQRCode(qrCode, graphql) {

const qrCodeImagePromise = getQRCodeImage(qrCode.id);

const response = await graphql(

query supplementQRCode($id: ID!) {

product(id: $id) {

title

media(first: 1) {

nodes {

preview {

image {

altText

url

}

{

variables: {

id: qrCode.productId,

}

);

const {

data: { product },

} = await response.json();

return {

...qrCode,

productDeleted: !product?.title,

productTitle: product?.title,

productImage: product?.media?.nodes[0]?.preview?.image?.url,

productAlt: product?.media?.nodes[0]?.preview?.image?.altText,

destinationUrl: getDestinationUrl(qrCode),

image: await qrCodeImagePromise,

};

}

export function validateQRCode(data) {

const errors = {};

if (!data.title) {

errors.title = "Title is required";

}

if (!data.productId) {

errors.productId = "Product is required";

}

if (!data.destination) {

errors.destination = "Destination is required";

}

if (Object.keys(errors).length) {

return errors;

}

Anchor to Get the destination URLGet the destination URL

Scanning a QR code takes the user to one of two places:

The product details page
A checkout with the product in the cart

Create a function to conditionally construct this URL depending on the destination that the merchant selects.

/app/models/QRCode.server.js

import qrcode from "qrcode";

import invariant from "tiny-invariant";

import db from "../db.server";

export async function getQRCode(id, graphql) {

const qrCode = await db.qRCode.findFirst({ where: { id } });

if (!qrCode) {

return null;

}

return supplementQRCode(qrCode, graphql);

}

export async function getQRCodes(shop, graphql) {

const qrCodes = await db.qRCode.findMany({

where: { shop },

orderBy: { id: "desc" },

});

if (qrCodes.length === 0) return [];

return Promise.all(

qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))

);

}

export function getQRCodeImage(id) {

const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);

return qrcode.toDataURL(url.href);

}

export function getDestinationUrl(qrCode) {

if (qrCode.destination === "product") {

return `https://${qrCode.shop}/products/${qrCode.productHandle}`;

}

  const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);

invariant(match, "Unrecognized product variant ID");

return `https://${qrCode.shop}/cart/${match[1]}:1`;

}

async function supplementQRCode(qrCode, graphql) {

const qrCodeImagePromise = getQRCodeImage(qrCode.id);

const response = await graphql(

query supplementQRCode($id: ID!) {

product(id: $id) {

title

media(first: 1) {

nodes {

preview {

image {

altText

url

}

{

variables: {

id: qrCode.productId,

}

);

const {

data: { product },

} = await response.json();

return {

...qrCode,

productDeleted: !product?.title,

productTitle: product?.title,

productImage: product?.media?.nodes[0]?.preview?.image?.url,

productAlt: product?.media?.nodes[0]?.preview?.image?.altText,

destinationUrl: getDestinationUrl(qrCode),

image: await qrCodeImagePromise,

};

}

export function validateQRCode(data) {

const errors = {};

if (!data.title) {

errors.title = "Title is required";

}

if (!data.productId) {

errors.productId = "Product is required";

}

if (!data.destination) {

errors.destination = "Destination is required";

}

if (Object.keys(errors).length) {

return errors;

}

Anchor to Retrieve additional product and variant dataRetrieve additional product and variant data

The QR code from Prisma needs to be supplemented with product data. It also needs the QR code image and destination URL.

Create a function that queries the GraphQL Admin API for the product title, and the first featured product image's URL and alt text. It should also return an object with the QR code data and product data, and use the getDestinationUrl and getQRCodeImage functions that you created to get the destination URL's QR code image.

GraphQL Admin API

/app/models/QRCode.server.js

import qrcode from "qrcode";

import invariant from "tiny-invariant";

import db from "../db.server";

export async function getQRCode(id, graphql) {

const qrCode = await db.qRCode.findFirst({ where: { id } });

if (!qrCode) {

return null;

}

return supplementQRCode(qrCode, graphql);

}

export async function getQRCodes(shop, graphql) {

const qrCodes = await db.qRCode.findMany({

where: { shop },

orderBy: { id: "desc" },

});

if (qrCodes.length === 0) return [];

return Promise.all(

qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))

);

}

export function getQRCodeImage(id) {

const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);

return qrcode.toDataURL(url.href);

}

export function getDestinationUrl(qrCode) {

if (qrCode.destination === "product") {

return `https://${qrCode.shop}/products/${qrCode.productHandle}`;

}

const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);

invariant(match, "Unrecognized product variant ID");

return `https://${qrCode.shop}/cart/${match[1]}:1`;

}

async function supplementQRCode(qrCode, graphql) {

const qrCodeImagePromise = getQRCodeImage(qrCode.id);

const response = await graphql(

query supplementQRCode($id: ID!) {

product(id: $id) {

title

media(first: 1) {

nodes {

preview {

image {

altText

url

}

{

variables: {

id: qrCode.productId,

}

);

const {

data: { product },

} = await response.json();

return {

...qrCode,

productDeleted: !product?.title,

productTitle: product?.title,

productImage: product?.media?.nodes[0]?.preview?.image?.url,

productAlt: product?.media?.nodes[0]?.preview?.image?.altText,

destinationUrl: getDestinationUrl(qrCode),

image: await qrCodeImagePromise,

};

}

export function validateQRCode(data) {

const errors = {};

if (!data.title) {

errors.title = "Title is required";

}

if (!data.productId) {

errors.productId = "Product is required";

}

if (!data.destination) {

errors.destination = "Destination is required";

}

if (Object.keys(errors).length) {

return errors;

}

Anchor to Validate QR codesValidate QR codes

To create a valid QR code, the app user needs to provide a title, and select a product and destination. Add a function to ensure that, when the user submits the form to create a QR code, values exist for all of the required fields.

The action for the QR code form will return errors from this function.

/app/models/QRCode.server.js

import qrcode from "qrcode";

import invariant from "tiny-invariant";

import db from "../db.server";

export async function getQRCode(id, graphql) {

const qrCode = await db.qRCode.findFirst({ where: { id } });

if (!qrCode) {

return null;

}

return supplementQRCode(qrCode, graphql);

}

export async function getQRCodes(shop, graphql) {

const qrCodes = await db.qRCode.findMany({

where: { shop },

orderBy: { id: "desc" },

});

if (qrCodes.length === 0) return [];

return Promise.all(

qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))

);

}

export function getQRCodeImage(id) {

const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);

return qrcode.toDataURL(url.href);

}

export function getDestinationUrl(qrCode) {

if (qrCode.destination === "product") {

return `https://${qrCode.shop}/products/${qrCode.productHandle}`;

}

const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);

invariant(match, "Unrecognized product variant ID");

return `https://${qrCode.shop}/cart/${match[1]}:1`;

}

async function supplementQRCode(qrCode, graphql) {

const qrCodeImagePromise = getQRCodeImage(qrCode.id);

const response = await graphql(

query supplementQRCode($id: ID!) {

product(id: $id) {

title

media(first: 1) {

nodes {

preview {

image {

altText

url

}

{

variables: {

id: qrCode.productId,

}

);

const {

data: { product },

} = await response.json();

return {

...qrCode,

productDeleted: !product?.title,

productTitle: product?.title,

productImage: product?.media?.nodes[0]?.preview?.image?.url,

productAlt: product?.media?.nodes[0]?.preview?.image?.altText,

destinationUrl: getDestinationUrl(qrCode),

image: await qrCodeImagePromise,

};

}

export function validateQRCode(data) {

const errors = {};

if (!data.title) {

errors.title = "Title is required";

}

if (!data.productId) {

errors.productId = "Product is required";

}

if (!data.destination) {

errors.destination = "Destination is required";

}

if (Object.keys(errors).length) {

return errors;

}

Anchor to Create a QR code formCreate a QR code form

Create a form that allows the app user to manage QR codes.

To create this form, you'll use a Route module, Polaris web components and App Bridge.

Anchor to Set up the form routeSet up the form route

Create a form that can create, update or delete a QR code.

In the app > routes folder, create a new file called app.qrcodes.$id.jsx.

Anchor to Dynamic segmentsDynamic segments

This route uses a dynamic segment route to match the URL for creating a new QR code and editing an existing one.

If the user is creating a QR code, the URL is /app/qrcodes/new. If the user is updating a QR code, the URL is /app/qrcodes/1, where 1 is the ID of the QR code that the user is updating.

Anchor to React Router layoutsReact Router layouts

The React Router template includes a layout at app/routes/app.jsx. This layout should be used for authenticated routes that render inside the Shopify admin. It's responsible for configuring App Bridge and Polaris web components, and authenticating the user using shopify-app-react-router.

App Bridge Polaris web components

Anchor to Authenticate the userAuthenticate the user

Authenticate the route using shopify-app-react-router.

If the user isn't authenticated, authenticate.admin handles the necessary redirects. If the user is authenticated, then the method returns an admin object.

You can use the authenticate.admin method for the following purposes:

Getting information from the session, such as the shop
Accessing the GraphQL Admin API
Within methods to require and request billing

Authenticating admin requests

GraphQL Admin API

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Return a JSON ResponseReturn a JSON Response

Return JSON data that can be used to populate the QR code form.

If the id parameter is new, return JSON with an empty title, and product for the destination. If the id parameter isn't new, then return the JSON from getQRCode to populate the QR code state.

GraphQL Admin API

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Manage the form stateManage the form state

Maintain the state of the QR code form state using the following variables:

initialFormState: The initial state of the form. This only changes when the user submits the form. This state is copied from useLoaderData into React state.
formState: When the user changes the title, selects a product, or changes the destination, this state is updated. This state is copied from useLoaderData into React state.
errors: If the app user doesn't fill all of the QR code form fields, then the action returns errors to display. This is the return value of validateQRCode, which is accessed through the useActionData hook.
isSaving: Keeps track of the network state using useNavigation. This state is used to disable buttons and show loading states.
isDirty: Determines if the form has changed. This is used to enable save buttons when the app user has changed the form contents, or disable them when the form contents haven't changed.

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add a product selectorAdd a product selector

Using the App Bridge ResourcePicker action, add a modal that allows the user to select a product. Save the selection to form state.

Screenshot showing a App Bridge modal for selecting products

ResourcePicker

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to SubmitSubmit

Use useSubmit to add the ability to save and delete a QR Code.

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Lay out the formLay out the form

Using Polaris web components, build the layout for the form. Use s-page, s-section, and s-box with slot="aside" to structure the page. The page should have two columns.

Polaris is the design system for the Shopify admin. Using Polaris web components ensures that your UI is accessible, responsive, and displays consistently with the Shopify Admin.

Polaris web components s-page s-section s-box

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add breadcrumbsAdd breadcrumbs

Use an App Bridge s-page component to display a title that indicates to the user whether they're creating or editing a QR code. Include a breadcrumb link to go back to the QR code list.

Title Bar

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add a title fieldAdd a title field

Use s-text-field for updating the title. It should setFormState, have some details and show title errors from useActionData.

s-text-field

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add a way to select the productAdd a way to select the product

If the user hasn't selected a product, then display a s-button with an onClick for selectProduct.

If the user has selected a product, use s-image to display the product image. Use s-clickable, s-box, s-image and s-icon to display the product image. Use s-box and s-stack to layout the UI.

s-button s-image s-clickable s-image s-icon s-box s-stack

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add destination optionsAdd destination options

Use s-select to render different destinations. It should setFormState when onChange occurs.

If the user is editing a QR code, use a s-link to link to the destination URL in a new tab.

s-select s-link

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Display a preview of the QR codeDisplay a preview of the QR code

After saving a QR code, or when editing an existing QR code, provide ways to preview the QR code that the app user created.

Use s-box with slot="aside" to position the preview as an aside.

If a QR code is available, then use s-image to render the QR code. If no QR code is available, then use s-text with color="subdued".

Add buttons to preview the public URL, and to download the QR code

s-box s-image s-text s-button

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Add save barAdd save bar

Use shopify.saveBar and ui-save-bar to render Save and Discard buttons.

Use the useSubmit hook to save the form data.

Copy the data that Prisma needs from formState and set the cleanFormState to the current formState.

App Bridge save bar

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to Create, update, or delete a QR codeCreate, update, or delete a QR code

Create an action to create, update, or delete a QR code.

The action should use the store from the session. This ensures that the app user can only create, update, or delete QR codes for their own store.

The action should return errors for incomplete data using your validateQRCode function.

If the action deletes a QR code, redirect the app user to the index page. If the action creates a QR code, redirect to app/qrcodes/$id, where $id is the ID of the newly created QR code.

/app/routes/app.qrcodes.$id.jsx

import { useState, useEffect } from "react";

import {

useActionData,

useLoaderData,

useSubmit,

useNavigation,

useNavigate,

useParams,

Link,

} from "react-router";

import { authenticate } from "../shopify.server";

import { boundary } from "@shopify/shopify-app-react-router/server";

import db from "../db.server";

import { getQRCode, validateQRCode } from "../models/QRCode.server";

export async function loader({ request, params }) {

const { admin } = await authenticate.admin(request);

if (params.id === "new") {

return {

destination: "product",

title: "",

};

}

return await getQRCode(Number(params.id), admin.graphql);

}

export async function action({ request, params }) {

const { session, redirect } = await authenticate.admin(request);

const { shop } = session;

/** @type {any} */

const data = {

...Object.fromEntries(await request.formData()),

Anchor to List QR codesList QR codes

To allow app users to navigate to QR codes, list the QR codes in the app home.

Anchor to Load QR codesLoad QR codes

In the app's index route, load the QR codes using a loader.

The loader should load QR codes using the qrcodes function from app/models/QRCode.server.js, and return them.

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Create an empty stateCreate an empty state

If there are no QR codes, construct an empty state display using s-section, s-grid, s-box, s-heading and s-paragraph. Use s-button to link to the QR code form for creating a new QR Code.

s-section s-grid s-box s-heading s-paragraph s-button

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

          src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Create an index tableCreate an index table

If there are QR codes present, then use a s-table to list them.

The table should have columns for the QR code title, product, the date the QR code was created, and the number of times the QR code was scanned. The title s-table-header should use listSlot="primary".

s-table

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Create index table rowsCreate index table rows

Map over each QR code and render a s-table-row. Make sure each row has an s-table-cell for the QR code title, product, the date the QR code was created, and the number of times the QR code was scanned.

s-table-row s-table-cell s-image s-text s-link

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Warn if a product is deletedWarn if a product is deleted

A merchant can delete a product after creating a QR code for it. The data returned from supplementQRCode includes an isDeleted property. isDeleted is true if the product title returned from the GraphQL Admin API is an empty string.

Use s-badge to render a warning to the user if a product is deleted.

s-badge

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Lay out the pageLay out the page

After you create your empty state and index table, adjust the layout of the index page to return the markup that you created.

Create a layout using Polaris components. Render the empty state and table inside a Polaris Card.

Use the Polaris s-page component to render the title bar with a title. Add a primary button to navigate to the QR code creation form.

s-page s-button Title Bar

/app/routes/app._index.jsx

import { useLoaderData, Link } from "react-router";

import { boundary } from "@shopify/shopify-app-react-router/server";

import { authenticate } from "../shopify.server";

import { getQRCodes } from "../models/QRCode.server";

export async function loader({ request }) {

const { admin, session } = await authenticate.admin(request);

const qrCodes = await getQRCodes(session.shop, admin.graphql);

return {

qrCodes,

};

}

const EmptyQRCodeState = () => (

<s-section accessibilityLabel="Empty state section">

<s-grid gap="base" justifyItems="center" paddingBlock="large-400">

<s-box maxInlineSize="200px" maxBlockSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

alt="A stylized graphic of a document"

</s-box>

<s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">

<s-heading>Create unique QR codes for your products</s-heading>

<s-paragraph>

Allow customers to scan codes and buy products using their phones.

</s-paragraph>

<s-stack

gap="small-200"

justifyContent="center"

padding="base"

paddingBlockEnd="none"

direction="inline"

<s-button href="/app/qrcodes/new" variant="primary">

Create QR code

</s-button>

</s-stack>

</s-grid>

</s-section>

);

function truncate(str, { length = 25 } = {}) {

if (!str) return "";

if (str.length <= length) return str;

return str.slice(0, length) + "…";

}

const QRTable = ({ qrCodes }) => (

<s-section padding="none" accessibilityLabel="QRCode table">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Title</s-table-header>

<s-table-header>Product</s-table-header>

<s-table-header>Date created</s-table-header>

<s-table-header>Scans</s-table-header>

</s-table-header-row>

<s-table-body>

{qrCodes.map((qrCode) => (

))}

</s-table-body>

</s-table>

</s-section>

);

const QRTableRow = ({ qrCode }) => (

<s-table-row id={qrCode.id} position={qrCode.id}>

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-clickable

href={`/app/qrcodes/${qrCode.id}`}

accessibilityLabel={`Go to the product page for ${qrCode.productTitle}`}

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="20px"

blockSize="20px"

{qrCode.productImage ? (

<s-image objectFit="cover" src={qrCode.productImage}></s-image>

) : (

<s-icon size="large" type="image" />

)}

</s-clickable>

<s-link href={`/app/qrcodes/${qrCode.id}`}>

{truncate(qrCode.title)}

</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>

{qrCode.productDeleted ? (

<s-badge icon="alert-diamond" tone="critical">

Product has been deleted

</s-badge>

) : (

truncate(qrCode.productTitle)

)}

</s-table-cell>

<s-table-cell>{new Date(qrCode.createdAt).toDateString()}</s-table-cell>

<s-table-cell>{qrCode.scans}</s-table-cell>

</s-table-row>

);

export default function Index() {

const { qrCodes } = useLoaderData();

return (

<s-page heading="QR codes">

<s-link slot="secondary-actions" href="/app/qrcodes/new">

Create QR code

</s-link>

{qrCodes.length === 0 ? (

) : (

)}

</s-page>

);

}

export const headers = (headersArgs) => {

return boundary.headers(headersArgs);

};

Anchor to Add a public QR code routeAdd a public QR code route

Make QR codes scannable by customers by exposing them using a public URL. When a customer scans a QR code, the scan count should increment, and the customer should be redirected to the destination URL.

Anchor to Create a public QR code routeCreate a public QR code route

Create a public page to render a QR code.

In the app > routes folder, create a new file called qrcodes.$id.jsx.

Because the qrcodes.$id.jsx doesn't require authentication or need to be rendered inside of the Shopify admin, it doesn't use the app layout.

Anchor to Load the QR codeLoad the QR code

Create a loader to load the QR code on the external route.

In the function, check that there's an ID in the URL. If there isn't, throw an error using tiny-invariant.

If there's an ID in the URL, load the QR code with that ID using Prisma:

If there is no matching QR code ID in the table, throw an error using tiny-invariant.
If there is a matching ID, return the QR code.

/app/routes/qrcodes.$id.jsx

import invariant from "tiny-invariant";

import { useLoaderData } from "react-router";

import db from "../db.server";

import { getQRCodeImage } from "../models/QRCode.server";

export const loader = async ({ params }) => {

invariant(params.id, "Could not find QR code destination");

const id = Number(params.id);

const qrCode = await db.qRCode.findFirst({ where: { id } });

invariant(qrCode, "Could not find QR code destination");

return {

title: qrCode.title,

image: await getQRCodeImage(id),

};

export default function QRCode() {

const { image, title } = useLoaderData();

return (

<h1>{title}</h1>

</>

);

}

Anchor to Render a public QR code imageRender a public QR code image

In the route's default export, render an img tag for the QR code image. Scanning this image takes the user to the destination URL. This is the next route to implement.

/app/routes/qrcodes.$id.jsx

import invariant from "tiny-invariant";

import { useLoaderData } from "react-router";

import db from "../db.server";

import { getQRCodeImage } from "../models/QRCode.server";

export const loader = async ({ params }) => {

invariant(params.id, "Could not find QR code destination");

const id = Number(params.id);

const qrCode = await db.qRCode.findFirst({ where: { id } });

invariant(qrCode, "Could not find QR code destination");

return {

title: qrCode.title,

image: await getQRCodeImage(id),

};

export default function QRCode() {

const { image, title } = useLoaderData();

return (

<h1>{title}</h1>

</>

);

}

Anchor to Redirect the customer to the destination URLRedirect the customer to the destination URL

When a QR code is scanned, redirect the customer to the destination URL. You can also increment the QR code scan count to reflect the number of times the QR code has been used.

Anchor to Create the scan routeCreate the scan route

Create a public route that handles QR code scans.

In the app > routes folder, create a new file called qrcodes.$id.scan.jsx.

Anchor to Validate the QR code IDValidate the QR code ID

Create a loader function to load the QR code from the database.

In this function, check there is an ID in the URL. If the ID isn't present, then throw an error using tiny-invariant.

Load the QR code from the Prisma database. If a QR code with the specified ID doesn't exist, then throw an error using tiny-invariant.

Anchor to Increment the scan countIncrement the scan count

If the loader returns a QR code, then increment the scan count in the database.

Redirect to the destination URL for the QR code using getDestinationUrl and the redirect utility.

Anchor to RedirectRedirect

The loader should return the destination URL for the QR code it incremented. Use getDestinationUrl from appmodels/QRCode.server.js to get that URL. Use redirect to redirect the user to that URL.

Anchor to Preview and test your appPreview and test your app

Use the CLI to preview your app. If you make changes, you'll see those changes hot reload in the browser.

Anchor to Start your serverStart your server

Run the Shopify CLI dev command to build your app and preview it on your development store.

In a terminal, navigate to your app directory.
Either start or restart your server to build and preview your app:

Terminal
shopify app dev
Press p to open the developer console. In the developer console page, click on the preview link for your app home.
If you're prompted to install the app, then click Install.

Anchor to Test the QR code index and formTest the QR code index and form

Follow these steps to test the routes that are exposed to the app user in the Shopify admin. These routes include the app index and the QR code form.

In the index page for your app home, click Create QR code to go to the QR code form.

The QR code form opens at /app/qrcode/new. The title of the page is Create QR code.
Try to submit the QR code form with an empty title, or without selecting a product.

An error is returned.
Create a few QR codes for different products and destinations.
Click the QR codes breadcrumb to return to the index page.

The QR code list is populated with the QR codes that you created:
Select a QR code from the list.

The QR code form opens at /app/qrcode/<id>. The title of the page is Edit QR code:
On the Edit QR code page, click Delete.

You're taken back to the index page, and the deleted QR code is removed from the list.

Anchor to Test QR code scanning functionalityTest QR code scanning functionality

Scan the QR code that you created in the previous step.

From the app index page, click an existing QR code or create a new one.
On the QR code form, click Go to public URL.

A new tab opens for the public URL for the QR code.
Scan the QR code with your phone.

You're taken the destination URL.
Return to your app index page.

The scan count for the QR code that just scanned is incremented.

/prisma/schema.prisma

// This is your Prisma schema file,

// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {

provider = "prisma-client-js"

}

datasource db {

provider = "sqlite"

url = "file:dev.sqlite"

}

model Session {

id String @id

shop String

state String

isOnline Boolean @default(false)

scope String?

expires DateTime?

accessToken String

userId BigInt?

}

model QRCode {

id Int @id @default(autoincrement())

title String

shop String

productId String

productHandle String

productVariantId String

destination String

scans Int @default(0)

createdAt DateTime @default(now())

}

Anchor to Tutorial complete!Tutorial complete!

Congratulations! You built a QR code app using React Router, Polaris web components, App Bridge and Prisma. Keep the momentum going with these related tutorials and resources.

Anchor to Next stepsNext steps

Use webhooks

You can use webhooks to stay in sync with Shopify, or execute code after a specific event occurs in the store.

For example, if a merchant updates a product's handle, you can use the products/update webhook to trigger an update to the handle in your database.

Explore the GraphQL Admin API

The GraphQL Admin API lets you read and write Shopify data, including products, customers, orders, inventory, fulfillment, and more.

Explore the GraphQL Admin API to learn about the available types and operations.

Learn more about extending Shopify

Learn about the most common places where apps can add functionality to the Shopify platform, and the related APIs and tools available for building.

Select an app distribution method

Decide how you want to share your app with users. For example, you might make your app available in the Shopify App Store, and bill customers for usage.

Deploy your app

Follow our guide to deploy your React Router app to a testing or production environment.

Was this page helpful?