Admin list

Let’s now list all the downloads in the Shopify admin. For this, we use Gadget’s <AutoTable /> component.

Backend code update

See commit "Persist downloads to DB + list in admin"

New and updated Gadget models

The changes include adding a new download model with its associated permissions, schema and actions files. This new download model requires Shopify products and customers information, hence the addition of the shopifyProduct and shopifyCustomer models.

The new and updated models files are:

accessControl/filters/shopify/shopifyCustomer.gelly
accessControl/filters/shopify/shopifyProduct.gelly
accessControl/permissions.gadget.ts
api/models/download/actions/create.ts
api/models/download/actions/delete.ts
api/models/download/actions/update.ts
api/models/download/schema.gadget.ts
api/models/shopifyCustomer/actions/create.ts
api/models/shopifyCustomer/actions/delete.ts
api/models/shopifyCustomer/actions/update.ts
api/models/shopifyCustomer/schema.gadget.ts
api/models/shopifyProduct/actions/create.ts
api/models/shopifyProduct/actions/delete.ts
api/models/shopifyProduct/actions/update.ts
api/models/shopifyProduct/schema.gadget.ts
api/models/shopifyShop/schema.gadget.ts

Download route update

The file: api/routes/brush/product-download/GET-[id].ts now saves all download requests from the Shopify frontend as a new entry in the download model.

The Shopify admin page

• First, we add the Polaris web components to the admin. See changes in web/root.tsx.
• We also add a new entry to the Shopify’s navigation menu as done in web/components/NavMenu.tsx.
• This new menu entry targets the new page listing all downloads. See web/routes/_app.downloads.tsx which, among other things, uses the <AutoTable /> component.

Protected customer data access

As we need to use some customer-related data, we must comply to Shopify’s “Protected customer data access” process. So please make sure to update those on your Shopify app.

See how to Work with protected customer data.

Gadget sync

Please also make sure to sync your Gadget install so that all webhooks and data are synchronized.