save-n-subscribe

Summary

Frontend JavaScript widget for Shopify product pages that fetches subscription plans, injects a “Subscribe & Save” button, shows a plan-selection modal, and initiates checkout by calling a Shiprocket checkout handler with encoded subscription metadata. Built and bundled with esbuild and deployed as static assets to Cloudflare Pages.

Responsibilities

• Detect Shopify product/variant context from page globals and DOM, and compute selected quantity
• Fetch subscription plan data for a product + seller domain from a reporting/dashboard API using a stored user token
• Inject and manage a Subscribe & Save CTA with variant-aware visibility and messaging
• Render a modal UI to select variant and subscription interval/discount, then proceed to checkout
• Initiate checkout via Shiprocket checkout handler by attaching base64-encoded subscription metadata as cart attributes
• Build and publish bundled static assets (JS/CSS) to Cloudflare Pages

Dependencies

• Shopify storefront environment (window.Shopify, window.ShopifyAnalytics)
• Shiprocket checkout integration (window.shiprocketCheckoutDirectHandler)
• Reporting/Dashboard subscription plan API (SNS_APP_REPORTING_URL: /api/ve1/dashboard-service/subscription/plan)
• Browser Web APIs (fetch, localStorage, DOM APIs)
• dotenv (build-time env injection)
• esbuild (bundling/minification)
• Cloudflare Pages (hosting) and Wrangler (deployment)

Architecture Diagram

Mermaid Source

flowchart LR
  U[Shopper Browser] --> P[Shopify Product Page]
  P --> W[save-n-subscribe Widget JS]
  W --> API[Subscription Plan API]
  W --> SR[Shiprocket Checkout Handler]
  W --> LS[Browser localStorage]
  CF[Cloudflare Pages] --> P

DFD Diagram

Mermaid Source

flowchart TB
  E1[External Entity: Shopper Browser] --> P1[Process: Widget Init & UI]
  E2[External Entity: Shopify Storefront] --> P1
  D1[Data Store: Browser localStorage] --> P2[Process: Fetch Subscription Plans]
  P1 --> P2
  P2 --> E3[External Entity: Subscription Plan API]
  E3 --> P2
  P2 --> P3[Process: Render Button & Modal]
  P3 --> P4[Process: Initiate Checkout]
  P4 --> E4[External Entity: Shiprocket Checkout]
  P3 --> E1