Merge pull request #149 from gadget-inc/devaoc/new-wishlist

Updating wishlist template

Author: DevAOC

.github/workflows/wishlist-template.yaml renamed to .github/workflows/wishlist-public-remix-ssr.yaml

@@ -3,7 +3,7 @@ name: Wishlist Deployment
 on:
   push:
     paths:
-      - "shopify/wishlist-template/**"
+      - "shopify/wishlist-public-remix-ssr/**"
     branches:
       - main
   workflow_dispatch:
@@ -15,7 +15,7 @@ jobs:
       - name: Checkout the current repository
         uses: actions/checkout@v4
       - name: Push to development environment
-        run: npx ggt push --app=wishlist-template --env=development --force --allow-unknown-directory
-        working-directory: shopify/wishlist-template/
+        run: npx ggt push --app=wishlist-public-remix-ssr --env=development --force --allow-unknown-directory
+        working-directory: shopify/wishlist-public-remix-ssr/
         env:
-          GGT_TOKEN: ${{ secrets.WISHLIST_DEPLOY_TOKEN }}
+          GGT_TOKEN: ${{ secrets.WISHLIST_PUBLIC_REMIX_SSR_DEPLOY_TOKEN }}

shopify/wishlist-template/.github/README.md renamed to shopify/wishlist-public-remix-ssr/.github/README.md

@@ -2,7 +2,7 @@
 
 This app template helps Shopify merchants manage customer wishlists and send automated emails to keep customers informed about their wishlist items.
 
-[![Fork template](https://img.shields.io/badge/Fork%20template-%233A0CFF?style=for-the-badge)](https://app.gadget.dev/auth/fork?domain=wishlist-template.gadget.app)
+[![Fork template](https://img.shields.io/badge/Fork%20template-%233A0CFF?style=for-the-badge)](https://app.gadget.dev/auth/fork?domain=wishlist-public-remix-ssr.gadget.app)
 
 ## Key Features
 

shopify/wishlist-public-remix-ssr/.gitignore

@@ -0,0 +1,11 @@
+.gadget/
+node_modules/
+**/.DS_Store
+.react-router/
+
+# Shopify
+extensions/**/dist
+extensions/**/node_modules
+extensions/**/generated
+shopify.app.*.toml
+.env.*

shopify/wishlist-public-remix-ssr/.template/config.json

@@ -0,0 +1,123 @@
+{
+  "version": "v1",
+  "setup": "./setup.md",
+  "webflow": {
+    "title": "Product Wishlists",
+    "description": "A complete wishlist solution for Shopify. Allows customers to create and manage multiple wishlists, and integrates seamlessly into the storefront and customer accounts.",
+    "content": "webflow/content.md",
+    "mainImage": "webflow/wishlist.png",
+    "features": {
+      "shopify": true,
+      "frontend": true,
+      "models": true,
+      "actions": true
+    }
+  },
+  "featuredModels": {
+    "wishlist": {
+      "description": "Stores a named wishlist and associates it with a specific customer and shop.",
+      "featuredFields": ["name", "customer", "shop"]
+    },
+    "wishlistItem": {
+      "description": "Acts as a join table, linking a specific product variant to a wishlist.",
+      "featuredFields": ["variant", "wishlist", "customer"]
+    },
+    "shopifyCustomer": {
+      "description": "Extends the standard shopifyCustomer model to include relationships to all wishlists and wishlist items created by that customer.",
+      "featuredFields": ["wishlists", "wishlistItems"]
+    }
+  },
+  "featuredActions": {
+    "wishlist": {
+      "create": {
+        "description": "Allows a storefront customer to create a new, named wishlist for their account.",
+        "tags": ["added"]
+      },
+      "delete": {
+        "description": "Allows a storefront customer to delete one of their existing wishlists.",
+        "tags": ["added"]
+      }
+    },
+    "wishlistItem": {
+      "create": {
+        "description": "Adds a specific product variant to one of the customer's wishlists.",
+        "tags": ["added"]
+      }
+    }
+  },
+  "featuredRoutes": {
+    "api/routes/proxy/wishlist/item/POST-create.ts": {
+      "description": "This route creates a new wishlist item, linking it to a wishlist, product variant, shop, and customer.",
+      "tags": ["added"]
+    },
+    "api/routes/proxy/wishlist/item/POST-remove.ts": {
+      "description": "This route removes a specific item from a customer's wishlist.",
+      "tags": ["added"]
+    },
+    "api/routes/proxy/wishlist/POST-create.ts": {
+      "description": "This route creates a new wishlist with a given name and automatically adds the first product variant to it.",
+      "tags": ["added"]
+    }
+  },
+  "featuredGlobalActions": {
+    "enqueueSendWishlistEmail": {
+      "description": "This action enqueues sendWishlistEmail actions in batches for a given list of customers.",
+      "tags": ["added"]
+    },
+    "sendInStockEmail": {
+      "description": "This action sends an email to a list of customers notifying them that a specific product variant is back in stock.",
+      "tags": ["added"]
+    },
+    "sendWishlistEmail": {
+      "description": "This action sends a summary email to a customer about their wishlist, highlighting items that are now on sale or have been removed, and schedules the next update email.",
+      "tags": ["added"]
+    },
+    "startCustomerUpdates": {
+      "description": "This scheduled action fetches all customers due for a wishlist email update and enqueues another action to send the emails in batches.",
+      "tags": ["added"]
+    }
+  },
+  "featuredAccessControls": {
+    "shopify-storefront-customers": {
+      "wishlist": {
+        "description": "Grants permissions to logged-in storefront customers to fully manage their own wishlists (read, create, update, delete)."
+      }
+    }
+  },
+  "featuredFrontends": {
+    "web/routes/_app._index.tsx": {
+      "description": "This file is the main admin page for the Shopify app that displays a form for updating the default newsletter notification frequency for the shop.",
+      "tags": ["edited"]
+    },
+    "extensions/wishlists-storefront/blocks/addToWishlist.liquid": {
+      "description": "A Shopify theme extension block that adds an 'Add to Wishlist' button and functionality to product pages.",
+      "tags": ["added"]
+    },
+    "extensions/wishlists/src/App.tsx": {
+      "description": "The main React component for the customer account UI. It renders the interface where customers can view and manage all their wishlists and the items within them.",
+      "tags": ["added"]
+    }
+  },
+  "featuredFiles": {
+    "api/utils/email/InStockEmail.tsx": {
+      "description": "This file is a React component that renders an email template to notify customers that a product variant is back in stock.",
+      "tags": ["added"]
+    },
+    "api/utils/email/renderEmail.tsx": {
+      "description": "This file is a utility that renders different email templates based on the provided payload, supporting both 'wishlist' and 'inStock' email types.",
+      "tags": ["added"]
+    },
+    "api/utils/email/WishlistEmail.tsx": {
+      "description": "This file is a React component that renders an email to a customer with updates on their wishlist, including items on sale and items that are no longer available.",
+      "tags": ["added"]
+    },
+    "api/utils/types.ts": {
+      "description": "This file defines TypeScript types for email payloads, product variant data, and wishlist changes used throughout the wishlist email functionality.",
+      "tags": ["added"]
+    },
+    "api/utils/updateWishlistMetafield.ts": {
+      "description": "This file is a utility function that aggregates all wishlists and their items for a specific customer and stores them as a JSON metafield on the customer's Shopify record.",
+      "tags": ["added"]
+    }
+  }
+}

shopify/wishlist-public-remix-ssr/.template/docs/introduction.md

@@ -0,0 +1,10 @@
+# Product wishlists
+
+Core Purpose: This application provides a comprehensive wishlist feature for Shopify stores. It allows shoppers to create multiple wishlists, add product variants to them, and manage their selections through their customer account. This enhances the shopping experience by enabling customers to save products for future purchase, increasing engagement and potential sales.
+
+Key Functionality:
+
+- Multi-Wishlist Management: Customers can create, name, and manage several distinct wishlists (e.g., "Birthday List," "Holiday Gift Ideas") directly within their customer account page.
+- Theme app extension: An "Add to Wishlist" button is available on product pages, allowing shoppers to easily add items to their chosen wishlist without leaving the product page.
+- Customer account UI extension: A dedicated UI within the Shopify Customer Account page allows logged-in users to view all their wishlists, the items in each, and remove items as needed.
+- Email notifications: The app is equipped to send emails related to wishlists, such as sharing a wishlist or notifying a customer when a desired out-of-stock item becomes available again.

shopify/wishlist-template/.template/docs/setup.md renamed to shopify/wishlist-public-remix-ssr/.template/setup.md

@@ -1,27 +1,28 @@
-## Getting started
+# Getting started
 
 A pre-requisite for this application is to install the [Shopify CLI](https://shopify.dev/docs/api/shopify-cli#installation) locally. A list of steps that you should follow:
 
 1. [Connect to Shopify](https://docs.gadget.dev/guides/tutorials/connecting-to-shopify#connecting-to-shopify) using our built-in Shopify plugin. Make sure that you fill out the Protected Customer Data Access form in the Shopify Partner dashboard.
 
-2. Sync your application's files locally using the [Gadget CLI](https://docs.gadget.dev/guides/development-tools/cli). An example command can be found at the top left of the application's Gadget editor.
+2. Create a shopify app proxy that has proxy URL matching `https://<application-slug>--<env-slug>.gadget.app/proxy`. Note the subpath used in the theme app extension's JS file. Take a look at these docs if you're unsure how to do so:
 
-3. Add an empty `shopify.app.toml` file to the root of your application. This will be used to run the Shopify CLI.
+- [Shopify docs](https://shopify.dev/docs/apps/build/online-store/display-dynamic-data)
+- [Gadget docs](https://docs.gadget.dev/guides/plugins/shopify/advanced-topics/extensions#authenticated-requests-with-shopify-app-proxies)
 
-4. Modify the CDN URL on `line 2` of `extensions/wishlists-storefront/blocks/addToWishlist.liquid` to point to the correct application and environment. Modify the application and environment on `line 2` and `5` of `extensions/wishlists/src/api.js`.
+3. Sync your application's files locally using the [Gadget CLI](https://docs.gadget.dev/guides/development-tools/cli). An example command can be found at the top left of the application's Gadget editor.
 
-5. Run `yarn dev` to run the Shopify CLI (locally) and connect to the Shopify app created in step 1.
+4. Run `yarn shopify:dev` to run the Shopify CLI (locally) and connect to the Shopify app created in step 1.
 
-6. Install the application on a development store and create a customer account on the online store. Once this is done, you can step through the application and test the functionality.
+5. Install the application on a development store and create a customer account on the online store. Once this is done, you can step through the application and test the functionality.
 
-### Customer account UI extension
+## Customer account UI extension
 
-To test the functionality of the customer account UI extension, make sure that you select a preview store on which your application is installed. Run `yarn dev` locally and type `p` once the Shopify development environment has spun up. Open the link to the customer account UI extension and test the functionality.
+To test the functionality of the customer account UI extension, make sure that you select a preview store on which your application is installed. Run `yarn shopify:dev` locally and type `p` once the Shopify development environment has spun up. Open the link to the customer account UI extension and test the functionality.
 
 Make sure change the application and environment on `line 2` and `5` of `extensions/wishlists/src/api.js`.
 
-### Theme app extension
+## Theme app extension
 
 To test your theme app extension on a storefront, navigate to your installed development store. From there, go to the online store's admin page and click on the `Customize` button next to the theme selector. Here's navigate to a product page and add the section and save.
 
-Make sure to change the value of the minified JS CDN on `line 2` of `extensions/wishlists-storefront/blocks/addToWishlist.liquid` to your application (and environment's) CDN URL.
+Make sure to change the value of the proxy subpaths in `extensions/wishlists-storefront/blocks/addToWishlist.js` to your application's (and environment's) URL.

shopify/wishlist-public-remix-ssr/.template/webflow/content.md

@@ -0,0 +1,5 @@
+- Allow customers to add any product to their personal wishlists directly from your product pages.
+- Empower shoppers to create and manage multiple wishlists for different occasions, like birthdays or holidays.
+- Seamlessly integrates with the Shopify Customer Account page for a native and intuitive user experience.
+- Tenancy enforced: Wishlist data is unique to the store it's installed on, and each customer's wishlists are kept private.
+- Ready-to-Use: Comes pre-built with a Shopify connection, data models, backend logic, a storefront "Add to Wishlist" button, and a complete customer account UI for wishlist management.