npm package: @owlnestcommerce/never-miss-widget
Description: Widget script for Never Miss Shopify app
Latest version: 1.0.17

# 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

```bash
npm install
```

### Development

```bash
npm run dev
```

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

### Building for Production

```bash
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:

```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:
```javascript
{
  "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:**
   ```bash
   git tag v1.0.0
   git push origin v1.0.0
   ```

2. **Workflow automatically triggers and creates the release**

### CDN URLs (After Release)

```html
<!-- 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/never-miss-widget-script@v1.0.0/widget.js"></script>
```

### NPM Publishing (Recommended Alternative)

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

1. **First time setup:**
   ```bash
   # Login to NPM
   npm login

   # Increment version in package.json as needed
   # Then publish
   npm run npm-publish
   ```

2. **Your CDN URLs:**
   ```html
   <!-- Latest version -->
   <script src="https://unpkg.com/@owlnestcommerce/never-miss-widget@latest/dist/widget.js"></script>

   <!-- Specific version -->
   <script src="https://unpkg.com/@owlnestcommerce/never-miss-widget@1.0.0/dist/widget.js"></script>
   ```

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

3. **Update process:**
   ```bash
   # 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:**
   ```bash
   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