Never Miss Widget Script

Widget script for Never Miss Shopify app

Setup

This project is set up with ES modules that compile to browser-compatible JavaScript.

Prerequisites

• Node.js (v16 or higher)
• npm

Installation

npm install

Development

npm run dev

This will watch for file changes and automatically rebuild the bundle.

Building for Production

npm run build

The compiled widget will be available in dist/widget.js and can be embedded directly in web pages.

Usage

Include the generated dist/widget.js script in your HTML:

<script src="path/to/widget.js"></script>

The widget will automatically initialize when the DOM is ready.

Shopfiy Public JSON API Integration

Your widget now uses Shopify's public JSON endpoints for accurate inventory checking - no authentication required since we're running on Shopify websites!

Shopify JSON Benefits

• 🎯 100% Accurate Inventory - Direct access to Shopify's data
• 🔑 Zero Configuration - No API keys or setup needed
• ⚡ Real-time Data - Always reflects current Shopify inventory
• 🛡️ Theme Independent - Works with any Shopify theme
• 🌐 Server-side Reliable - Not dependent on DOM structure

How It Works

The widget automatically:

1. Extracts product handle from the URL (/products/product-handle)
2. Fetches product data from /products/{handle}.js
3. Checks selected variant's available flag and inventory_quantity
4. Falls back to DOM scraping if JSON endpoint fails

Example JSON Response from Shopify:

{
  "id": 123456789,
  "title": "Awesome Product",
  "available": true,
  "variants": [
    {
      "id": 987654321,
      "available": true,
      "inventory_quantity": 5,
      "title": "Small"
    }
  ]
}

Automated CDN Deployment (Privacy-Friendly)

This project supports fully automated CDN deployment while keeping your source code private using GitHub Actions + Releases + JSDelivr.

Why This Approach?

• ✅ Fully automated - One-click releases with GitHub Actions
• ✅ Source code stays private - Repository can remain private
• ✅ Built scripts are public - Only the compiled JavaScript is exposed
• ✅ Free CDN hosting - Powered by JSDelivr global network
• ✅ Automatic versioning - Each release is versioned and documented

⚠️ Important: Repository must be public for JSDelivr to access files. If your repo is private, make it public for CDN access, or see alternatives below.

Automated Release Process

Option 1: Manual Trigger (Recommended)

1. Go to GitHub Actions:

   • Navigate to your repository → Actions tab
   • Click "Release to CDN" workflow
   • Click "Run workflow"
   • Enter version (e.g., v1.0.0) and select if it's a prerelease
   • Click "Run workflow"

2. Workflow automatically:

   • Builds your widget
   • Creates a GitHub release
   • Uploads widget.js and widget.js.map
   • Provides CDN URLs in release notes

Option 2: Tag-Based Release

1. Create and push a tag:

   git tag v1.0.0
   git push origin v1.0.0

2. Workflow automatically triggers and creates the release

CDN URLs (After Release)

<!-- Always latest version -->
<script src="https://cdn.jsdelivr.net/gh/owlnestcommerce/never-miss-widget-script@latest/widget.js"></script>

<!-- Pinned to specific version -->
<script src="https://cdn.jsdelivr.net/gh/owlnestcommerce/[email protected]/widget.js"></script>

NPM Publishing (Recommended Alternative)

Since you want to keep source code private, NPM + Unpkg is better:

1. First time setup:

   # Login to NPM
   npm login
   
   # Increment version in package.json as needed
   # Then publish
   npm run npm-publish

2. Your CDN URLs:

   <!-- Latest version -->
   <script src="https://unpkg.com/@owlnestcommerce/never-miss-widget@latest/dist/widget.js"></script>
   
   <!-- Specific version -->
   <script src="https://unpkg.com/@owlnestcommerce/[email protected]/dist/widget.js"></script>

⚠️ Important: NPM publishing now only includes compiled dist/ files - no source code is published!

3. Update process:

   # Change version in package.json
   # Then publish new version
   npm run npm-publish

✅ Benefits:

• Repository stays private
• Source code completely hidden
• Global CDN (Unpkg)
• Version control automatic
• No manual file uploads

Manual Release (If Needed)

If you prefer to do it manually:

1. Prepare files:

   npm run release

2. Create release manually through GitHub UI and upload the files.

Other Alternatives

Vercel/Netlify (Free Tiers):

• Deploy from private repo
• Get custom domain CDN

Separate Public Repository:

• Keep source private in main repo
• Auto-push built files to public CDN repo

Project Structure

• src/index.js - Main entry point
• rollup.config.js - Build configuration
• dist/widget.js - Compiled output for local use
• package.json - Release preparation scripts