shopmate-sdk 1.1.0 → 1.1.2

package/README.md

@@ -2,13 +2,11 @@
 
 Lightweight checkout/cart SDK for browser storefronts.
 
-It supports:
+Use it to:
 
-- **ES module import** (`import`)
-- **CommonJS require** (`require`)
-- **Plain script tag usage** (no module system)
-
----
+- add products to a local cart from any storefront button
+- open the ShopMate checkout in a full-screen iframe
+- support both code-based and HTML attribute-based integrations
 
 ## Installation
 
@@ -16,25 +14,22 @@ It supports:
 npm install shopmate-sdk
 ```
 
----
-
-## Usage
+## Quick start
 
-### 1) ES Module (import)
+### 1) Import in a JavaScript or TypeScript app
 
 ```js
 import ShopMate from 'shopmate-sdk';
 
 const sdk = new ShopMate({
 	orgId: 2,
-	baseUrl: 'https://shopmate.hoshonto.com',
-	cartPosition: 'right-bottom'
+	cartPosition: 'right-bottom'  // required: where to show the floating cart
 });
 
 sdk.extract();
 ```
 
-### 2) CommonJS (require)
+### 2) Use CommonJS
 
 ```js
 const ShopMate = require('shopmate-sdk').default;
@@ -43,38 +38,88 @@ const sdk = new ShopMate({ orgId: 2 });
 sdk.extract();
 ```
 
-### 3) Plain browser script (non-module)
+### 3) Use a plain script tag
+
+```html
+<script
+	src="https://cdn.jsdelivr.net/npm/shopmate-sdk@latest/shopmate-sdk.min.js"
+	data-org-id="2"
+	data-cart-position="right-bottom"
+></script>
+```
+
+When loaded via `<script src="...">`, the SDK auto-initializes `window.ShopMateInstance` and wires supported selectors once the page finishes loading.
+
+## Copy-paste storefront example
+
+Use this if you want the smallest possible integration:
 
 ```html
-<script 
-	src="/path/to/shopmate-sdk.min.js"
+<button data-shopmate-product-id="101" data-shopmate-quantity="1">
+	Add to cart
+</button>
+
+<button data-shopmate-checkout="true">
+	Checkout
+</button>
+
+<script
+	src="https://cdn.jsdelivr.net/npm/shopmate-sdk@latest/shopmate-sdk.min.js"
 	data-org-id="2"
-	data-base-url="https://shopmate.hoshonto.com"
 	data-cart-position="right-bottom"
 ></script>
-<script>
-	// Available globally
-	const sdk = new window.ShopMate({ orgId: 2 });
-	sdk.extract();
-</script>
 ```
 
-When loaded directly via `<script src="...">`, the SDK auto-initializes a global `window.ShopMateInstance` using data attributes on the script tag.
+If you use the browser bundle directly, the SDK will scan the page automatically after load. If you import it in your app, call `sdk.extract()` after rendering the markup.
 
-**Data attributes (used for auto-init):**
-- `data-org-id`: Organization ID (required for auto-init)
-- `data-base-url`: Custom base URL (optional)
-- `data-cart-position`: Cart position on screen (optional)
+## How to use
 
----
+Create an instance, then call `extract()` on the container you want ShopMate to scan:
+
+```js
+const sdk = new ShopMate({ orgId: 2 });
+sdk.extract();
+```
+
+The SDK watches for these triggers:
+
+- `[data-shopmate-product-id]` — adds the item to the cart
+- `[data-shopmate-checkout="true"]` — opens checkout with a loading state
+- `a[href^=".../api/v1/pub/checkout?"]` — opens checkout from a URL-based trigger
+
+## Example markup
+
+### Add to cart button
+
+```html
+<button data-shopmate-product-id="101" data-shopmate-quantity="1">
+  Add to cart
+</button>
+```
+
+### Checkout button
+
+```html
+<button data-shopmate-checkout="true">
+  Checkout
+</button>
+```
+
+### URL-based checkout link
+
+```html
+<a href="https://shopmate.example.com/api/v1/pub/checkout?pid=101,102">
+  Checkout now
+</a>
+```
 
 ## Configuration
 
 `new ShopMate(config)` accepts:
 
-- `orgId` **(number, required)**: Organization ID.
-- `baseUrl` *(string, optional)*: Backend base URL. Default: `https://shopmate.hoshonto.com`.
-- `cartPosition` *(optional)*: Floating cart position.
+- `orgId` **(number, required)** — organization ID
+- `cartPosition` **(string, required)** — floating cart position on screen. **Without this, the cart button will not be visible.**
+- `baseUrl` *(string, optional)* — backend base URL. Default: `https://shopmate.hoshonto.com`. Rarely needed unless you're using a custom backend.
 
 Allowed `cartPosition` values:
 
@@ -82,83 +127,101 @@ Allowed `cartPosition` values:
 - `left-center`, `center`, `right-center`
 - `left-bottom`, `bottom`, `right-bottom`
 
----
-
 ## Public API
 
 ### `extract(rootElement?: HTMLElement)`
 
-Scans DOM and wires click handlers:
-
-- `[data-shopmate-product-id]` → add/update cart items
-- `[data-shopmate-checkout="true"]` → open checkout popup
+Scans the DOM and wires click handlers for supported product and checkout elements.
 
 ### `addToCart(itemId: number, quantity: number, element?: HTMLElement)`
 
-Adds/updates an item in the local cart and updates floating badge.
+Adds or updates a cart item and refreshes the floating badge.
 
 ### `openCheckout(buttonElement?: HTMLElement)`
 
-Opens full-screen checkout iframe.
+Opens the checkout iframe and shows a loading state on the clicked trigger.
 
 ### `closeCheckout()`
 
-Closes checkout iframe and restores page scroll.
+Closes the checkout iframe and restores page scroll.
 
 ### `createCheckoutIframe()`
 
-Creates and returns the iframe element used for checkout.
-
----
-
-## Data attributes supported
-
-### Product triggers
-
-```html
-<button data-shopmate-product-id="101" data-shopmate-quantity="1">Add</button>
-```
-
-### Checkout trigger
-
-```html
-<button data-shopmate-checkout="true">Checkout</button>
-```
-
----
+Creates the iframe used for checkout.
 
 ## Build outputs
 
 `npm run build` generates:
 
-- `shopmate-sdk.js` (IIFE global bundle)
-- `shopmate-sdk.min.js` (IIFE global minified bundle)
-- `dist/index.mjs` (ESM)
-- `dist/index.min.mjs` (ESM minified)
-- `dist/index.cjs` (CJS)
-- `dist/index.min.cjs` (CJS minified)
-- `dist/index.d.ts` (TypeScript declarations)
-
----
+- `shopmate-sdk.js` — browser-friendly global bundle
+- `shopmate-sdk.min.js` — minified browser bundle
+- `dist/index.mjs` — ESM build
+- `dist/index.min.mjs` — minified ESM build
+- `dist/index.cjs` — CommonJS build
+- `dist/index.min.cjs` — minified CommonJS build
+- `dist/index.d.ts` — TypeScript declarations
 
 ## NPM scripts
 
 - `npm run build` — build all artifacts
 - `npm run watch` — watch mode build
-- `npm run typecheck` — TS type-check only
+- `npm run typecheck` — TypeScript type-check only
 - `npm test` — build + verify ESM/CJS/browser bundle loading
 
----
-
 ## Package export map
 
 - `shopmate-sdk` → default export (`ShopMate` class)
 - `shopmate-sdk/min` → minified module build
 - `shopmate-sdk/browser` → browser bundle path
 
----
-
 ## Local demo
 
-Use `examples/storefront-demo.html` after building.
-# shopmate-sdk
+Open `examples/storefront-demo.html` after building to see the SDK in action.
+
+## Publishing to npm
+
+### Prerequisites
+
+- Ensure you have an npm account with publish rights to the `shopmate-sdk` package
+- Be authenticated: `npm login`
+
+### Steps
+
+1. **Update the version** in `package.json`:
+   ```bash
+   npm version patch    # for bug fixes (1.0.0 → 1.0.1)
+   npm version minor    # for new features (1.0.0 → 1.1.0)
+   npm version major    # for breaking changes (1.0.0 → 2.0.0)
+   ```
+
+2. **Build the package**:
+   ```bash
+   npm run build
+   ```
+
+3. **Verify the build** by checking the `dist/` and browser bundle files are present.
+
+4. **Publish to npm**:
+   ```bash
+   npm publish
+   ```
+
+5. **Verify the publication**:
+   ```bash
+   npm view shopmate-sdk
+   ```
+
+The package will be available on jsDelivr immediately at:
+- `https://cdn.jsdelivr.net/npm/shopmate-sdk@latest/shopmate-sdk.min.js`
+- `https://cdn.jsdelivr.net/npm/shopmate-sdk@<version>/shopmate-sdk.min.js`
+
+### Publishing checklist
+
+- [ ] Version number updated and committed
+- [ ] All tests pass (`npm test`)
+- [ ] Build succeeds without warnings (`npm run build`)
+- [ ] README and documentation are up to date
+- [ ] Changelog entry added (if applicable)
+- [ ] Authentication verified (`npm whoami`)
+- [ ] Package published (`npm publish`)
+- [ ] jsDelivr cache updated (automatic after ~10 minutes)

package/dist/index.cjs

@@ -1 +1,360 @@
-"use strict";var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(i,t)=>{for(var e in t)s(i,e,{get:t[e],enumerable:!0})},p=(i,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of h(t))!f.call(i,n)&&n!==e&&s(i,n,{get:()=>t[n],enumerable:!(o=d(t,n))||o.enumerable});return i};var u=i=>p(s({},"__esModule",{value:!0}),i);var b={};m(b,{default:()=>g});module.exports=u(b);var r=class{constructor(t){this.baseUrl="https://shopmate.hoshonto.com";this.cartPosition="right-bottom";this.iframeShown=!1;this.cart={i:[]};this.orgId=t.orgId,t.baseUrl&&(this.baseUrl=t.baseUrl.replace(/\/$/,"")),t.cartPosition&&(this.cartPosition=t.cartPosition),this.checkoutUrl=`${this.baseUrl}/api/v1/pub/checkout`,this.s()}t(){return document.body||document.documentElement}r(t){if(document.body){t();return}let e=()=>{document.removeEventListener("DOMContentLoaded",e),t()};document.addEventListener("DOMContentLoaded",e)}e(t){let e=t?"hidden":"",o=t?"none":"";document.body&&(document.body.style.overflow=e,document.body.style.touchAction=o),document.documentElement.style.overflow=e,document.documentElement.style.touchAction=o}o(t,e){t&&(t.style.pointerEvents=e?"none":"",t.style.opacity=e?"0.6":"")}n(t,e=1.15,o=260){!t||typeof t.animate!="function"||t.animate([{transform:"scale(1)"},{transform:`scale(${e})`},{transform:"scale(1)"}],{duration:o,easing:"ease-in-out"})}l(){let t="20px",e={position:"fixed",top:"auto",right:"auto",bottom:"auto",left:"auto",transform:"none"},o=this.cartPosition,n=o.indexOf("top")!==-1,a=o.indexOf("bottom")!==-1,l=o.indexOf("left")!==-1,c=o.indexOf("right")!==-1;return n?e.top=t:a?e.bottom=t:(e.top="50%",e.transform="translateY(-50%)"),l?e.left=t:c?e.right=t:(e.left="50%",e.transform=e.transform==="none"?"translateX(-50%)":"translate(-50%, -50%)"),e}d(t){if(this.floatingCartButton)return;let e=t||this.t();if(!e)return;let o=document.createElement("button");o.type="button";let n={width:"60px",height:"60px",borderRadius:"50%",border:"none",background:"#1d4ed8",color:"#ffffff",fontSize:"24px",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 10px 25px rgba(0,0,0,0.2)",cursor:"pointer",zIndex:"2147483646",transition:"transform 0.2s ease, opacity 0.2s ease"};Object.assign(o.style,n,this.l()),o.textContent="🛒";let a=document.createElement("span");Object.assign(a.style,{position:"absolute",top:"0",right:"0",minWidth:"20px",height:"20px",borderRadius:"10px",background:"#ef4444",color:"white",fontSize:"11px",fontWeight:"bold",display:"none",alignItems:"center",justifyContent:"center",border:"2px solid #ffffff",padding:"0 4px"}),o.appendChild(a),o.addEventListener("click",()=>this.openCheckout(o)),e.appendChild(o),this.floatingCartButton=o,this.floatingCartBadge=a}a(){if(!this.floatingCartBadge)return;let t=this.cart.i.reduce((e,o)=>e+o.q,0);this.floatingCartBadge.style.display=t>0?"flex":"none",this.floatingCartBadge.textContent=t>99?"99+":String(t)}s(){window.addEventListener("message",t=>{var e,o;try{if(console.log("Received message from iframe:",t.data),t.origin!==new URL(this.baseUrl).origin)return;console.log("Message origin verified:",t.origin),(((e=t.data)==null?void 0:e.type)==="closeCheckout"||((o=t.data)==null?void 0:o.type)==="shopmate:close")&&(console.log("Received closeCheckout message from iframe"),this.closeCheckout())}catch(n){}})}addToCart(t,e,o){let n=this.cart.i.find(a=>a.i===t);n?n.q=e:this.cart.i.push({i:t,q:e}),o&&(this.n(o,1.15,300),this.h(o)),this.a()}h(t){if(!this.floatingCartButton)return;let e=t.getBoundingClientRect(),o=this.floatingCartButton.getBoundingClientRect(),n=document.createElement("div");Object.assign(n.style,{position:"fixed",left:`${e.left+e.width/2}px`,top:`${e.top+e.height/2}px`,width:"12px",height:"12px",borderRadius:"50%",background:"#1d4ed8",zIndex:"2147483645",pointerEvents:"none",transition:"all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)"}),this.t().appendChild(n),requestAnimationFrame(()=>{n.style.transform=`translate(${o.left-e.left}px, ${o.top-e.top}px) scale(0.5)`,n.style.opacity="0"}),setTimeout(()=>{n.remove(),this.n(this.floatingCartButton,1.2,300)},600)}openCheckout(t){this.o(t,!0),this.iframeElement||(this.iframeElement=this.createCheckoutIframe(),this.t().appendChild(this.iframeElement));let e=new URLSearchParams({orgId:this.orgId.toString(),c:JSON.stringify(this.cart),next:window.location.href});this.iframeElement.src=`${this.checkoutUrl}?${e.toString()}`,this.iframeElement.onload=()=>{this.iframeElement&&(this.iframeElement.style.display="block",this.iframeShown=!0,this.e(!0),this.o(t,!1))}}createCheckoutIframe(){let t=document.createElement("iframe");return t.setAttribute("sandbox","allow-scripts allow-same-origin allow-popups allow-forms"),t.setAttribute("allow","payment *; fullscreen *;"),Object.assign(t.style,{width:"100vw",height:"100dvh",position:"fixed",top:"0",left:"0",right:"0",bottom:"0",border:"0",zIndex:"2147483647",background:"#ffffff",display:"none"}),t}closeCheckout(){this.iframeElement&&(this.iframeElement.style.display="none",this.iframeShown=!1,this.e(!1))}extract(t=document.body){t.querySelectorAll("[data-shopmate-product-id]").forEach(e=>{let o=e,n=parseInt(o.getAttribute("data-shopmate-product-id")||"",10);isNaN(n)||o.addEventListener("click",a=>{a.preventDefault(),this.addToCart(n,parseInt(o.getAttribute("data-shopmate-quantity")||"1",10),o)})}),t.querySelectorAll('[data-shopmate-checkout="true"]').forEach(e=>{e.addEventListener("click",o=>{o.preventDefault(),this.openCheckout(e)})}),this.r(()=>{this.d(t),this.a()})}};try{Object.defineProperty(r,"name",{value:"ShopMate"})}catch(i){}if(typeof window!="undefined"&&typeof document!="undefined"){window.ShopMate=r;let i=document.currentScript;if(i instanceof HTMLScriptElement&&i.src){let t=new r({orgId:parseInt(i.dataset.orgId||"2",10),baseUrl:i.dataset.baseUrl||void 0,cartPosition:i.dataset.cartPosition||void 0});window.addEventListener("load",()=>{window.ShopMateInstance=t,t.extract()})}}var g=r;
+/* Shopmate SDK */
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var ShopMate = class {
+  constructor(config) {
+    this.baseUrl = "https://shopmate.hoshonto.com";
+    this.cartPosition = "right-bottom";
+    this.iframeShown = false;
+    this.cart = { i: [] };
+    this.orgId = config.orgId;
+    if (config.baseUrl) this.baseUrl = config.baseUrl.replace(/\/$/, "");
+    if (config.cartPosition) this.cartPosition = config.cartPosition;
+    this.checkoutUrl = `${this.baseUrl}/api/v1/pub/checkout`;
+    this._injectGlobalStyles();
+    this._setupMessageListener();
+  }
+  _getMountRoot() {
+    return document.body || document.documentElement;
+  }
+  _runWhenBodyReady(fn) {
+    if (document.body) {
+      fn();
+      return;
+    }
+    const onReady = () => {
+      document.removeEventListener("DOMContentLoaded", onReady);
+      fn();
+    };
+    document.addEventListener("DOMContentLoaded", onReady);
+  }
+  _injectGlobalStyles() {
+    if (document.getElementById("shopmate-global-styles")) return;
+    const style = document.createElement("style");
+    style.id = "shopmate-global-styles";
+    style.innerHTML = `@keyframes sm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes sm-soft-pulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}.sm-loading-spinner{display:none;width:24px;height:24px;border:3px solid rgba(255,255,255,.28);border-radius:50%;border-top-color:#fff;animation:.8s linear infinite sm-spin}.sm-loading-shell{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:24px;color:#fff;font-weight:600;line-height:1}.sm-loading-text{font-size:13px;letter-spacing:.01em;white-space:nowrap}.sm-btn-loading{position:relative!important;overflow:hidden!important}.sm-btn-loading::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06));animation:1.2s ease-in-out infinite sm-soft-pulse;pointer-events:none}.sm-btn-loading .sm-loading-spinner{display:inline-block}.sm-btn-loading .sm-cart-icon{display:none}.sm-btn-loading .sm-badge{display:none!important}.sm-no-scroll{overflow:hidden!important;touch-action:none;-ms-touch-action:none}`;
+    document.head.appendChild(style);
+  }
+  _setScrollLocked(locked) {
+    const action = locked ? "add" : "remove";
+    document.body.classList[action]("sm-no-scroll");
+    document.documentElement.classList[action]("sm-no-scroll");
+  }
+  _toggleLoading(button, isLoading) {
+    if (!button) return;
+    if (isLoading) {
+      if (!button.dataset.smOriginalHtml) {
+        button.dataset.smOriginalHtml = button.innerHTML;
+      }
+      const shouldShowText = button.clientWidth >= 100 && button.clientHeight >= 44;
+      button.innerHTML = `
+                <span class="sm-loading-shell" aria-hidden="true">
+                    <span class="sm-loading-spinner"></span>
+                    ${shouldShowText ? '<span class="sm-loading-text">Opening…</span>' : ""}
+                </span>
+            `;
+    } else if (button.dataset.smOriginalHtml !== void 0) {
+      button.innerHTML = button.dataset.smOriginalHtml;
+      delete button.dataset.smOriginalHtml;
+    }
+    button.style.pointerEvents = isLoading ? "none" : "";
+    button.setAttribute("aria-busy", isLoading ? "true" : "false");
+    if (isLoading) button.classList.add("sm-btn-loading");
+    else button.classList.remove("sm-btn-loading");
+  }
+  _pop(el, scale = 1.15, duration = 260) {
+    if (!el || typeof el.animate !== "function") return;
+    el.animate(
+      [{ transform: "scale(1)" }, { transform: `scale(${scale})` }, { transform: "scale(1)" }],
+      { duration, easing: "ease-in-out" }
+    );
+  }
+  _getPositionStyles() {
+    const spacing = "20px";
+    const styles = {
+      position: "fixed",
+      top: "auto",
+      right: "auto",
+      bottom: "auto",
+      left: "auto",
+      transform: "none"
+    };
+    const pos = this.cartPosition;
+    if (pos.includes("top")) styles.top = spacing;
+    else if (pos.includes("bottom")) styles.bottom = spacing;
+    else {
+      styles.top = "50%";
+      styles.transform = "translateY(-50%)";
+    }
+    if (pos.includes("left")) styles.left = spacing;
+    else if (pos.includes("right")) styles.right = spacing;
+    else {
+      styles.left = "50%";
+      const currentY = styles.transform !== "none" ? "translateY(-50%)" : "";
+      styles.transform = `translateX(-50%) ${currentY}`.trim();
+    }
+    return styles;
+  }
+  _ensureFloatingCart(rootElement) {
+    if (this.floatingCartButton) return;
+    const mountRoot = rootElement || this._getMountRoot();
+    const button = document.createElement("button");
+    button.type = "button";
+    Object.assign(button.style, {
+      width: "60px",
+      height: "60px",
+      borderRadius: "50%",
+      border: "none",
+      background: "#1d4ed8",
+      color: "#ffffff",
+      fontSize: "24px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
+      cursor: "pointer",
+      zIndex: "2147483646",
+      transition: "transform 0.2s ease"
+    }, this._getPositionStyles());
+    button.innerHTML = `
+            <span class="sm-cart-icon">🛒</span>
+            <div class="sm-loading-spinner"></div>
+        `;
+    const badge = document.createElement("span");
+    badge.className = "sm-badge";
+    Object.assign(badge.style, {
+      position: "absolute",
+      top: "0",
+      right: "0",
+      minWidth: "20px",
+      height: "20px",
+      borderRadius: "10px",
+      background: "#ef4444",
+      color: "white",
+      fontSize: "11px",
+      fontWeight: "bold",
+      display: "none",
+      alignItems: "center",
+      justifyContent: "center",
+      border: "2px solid #ffffff",
+      padding: "0 4px"
+    });
+    button.appendChild(badge);
+    button.addEventListener("click", () => this.openCheckout(button));
+    mountRoot.appendChild(button);
+    this.floatingCartButton = button;
+    this.floatingCartBadge = badge;
+  }
+  _updateFloatingCartBadge() {
+    if (!this.floatingCartBadge) return;
+    const count = this.cart.i.reduce((sum, item) => sum + item.q, 0);
+    this.floatingCartBadge.style.display = count > 0 ? "flex" : "none";
+    this.floatingCartBadge.textContent = count > 99 ? "99+" : String(count);
+  }
+  _setupMessageListener() {
+    window.addEventListener("message", (event) => {
+      var _a, _b;
+      try {
+        const expectedOrigin = new URL(this.baseUrl).origin;
+        if (event.origin !== expectedOrigin) return;
+        if (((_a = event.data) == null ? void 0 : _a.type) === "closeCheckout" || ((_b = event.data) == null ? void 0 : _b.type) === "shopmate:close") {
+          this.closeCheckout();
+        }
+      } catch (e) {
+      }
+    });
+  }
+  addToCart(itemId, quantity, element) {
+    const item = this.cart.i.find((i) => i.i === itemId);
+    if (item) item.q = quantity;
+    else this.cart.i.push({ i: itemId, q: quantity });
+    if (element) {
+      this._pop(element, 1.15, 300);
+      this._animateFlyToCart(element);
+    }
+    this._updateFloatingCartBadge();
+  }
+  _animateFlyToCart(sourceElement) {
+    if (!this.floatingCartButton) return;
+    const sourceRect = sourceElement.getBoundingClientRect();
+    const cartRect = this.floatingCartButton.getBoundingClientRect();
+    const dot = document.createElement("div");
+    const sourceStyles = getComputedStyle(sourceElement);
+    const backgroundColor = sourceStyles.backgroundColor || "#1d4ed8";
+    const dotSize = Math.max(10, Math.min(sourceRect.width, sourceRect.height) / 2);
+    Object.assign(dot.style, {
+      position: "fixed",
+      left: `${sourceRect.left + sourceRect.width / 2}px`,
+      top: `${sourceRect.top + sourceRect.height / 2}px`,
+      width: `${dotSize}px`,
+      height: `${dotSize}px`,
+      borderRadius: "50%",
+      background: backgroundColor,
+      zIndex: "2147483645",
+      pointerEvents: "none"
+    });
+    this._getMountRoot().appendChild(dot);
+    const duration = 1150;
+    dot.animate([
+      { transform: "translate(0, 0) scale(1)", opacity: "1" },
+      { transform: `translate(${cartRect.left - sourceRect.left}px, ${cartRect.top - sourceRect.top}px) scale(0.5)`, opacity: "0" }
+    ], {
+      duration,
+      easing: "ease-out",
+      fill: "forwards"
+    });
+    setTimeout(() => {
+      dot.remove();
+      this._pop(this.floatingCartButton, 1.2, 300);
+    }, duration);
+  }
+  openCheckout(buttonElement) {
+    this._toggleLoading(buttonElement, true);
+    if (!this.iframeElement) {
+      this.iframeElement = this.createCheckoutIframe();
+      this._getMountRoot().appendChild(this.iframeElement);
+    }
+    const params = new URLSearchParams({
+      orgId: this.orgId.toString(),
+      c: JSON.stringify(this.cart),
+      next: window.location.href
+    });
+    this.iframeElement.src = `${this.checkoutUrl}?${params.toString()}`;
+    this.iframeElement.onload = () => {
+      if (this.iframeElement && this.iframeElement.hasAttribute("src")) {
+        this.iframeElement.style.display = "block";
+        this.iframeShown = true;
+        this._setScrollLocked(true);
+        this._toggleLoading(buttonElement, false);
+      }
+    };
+    this.iframeElement.onerror = () => {
+      this._toggleLoading(buttonElement, false);
+    };
+  }
+  createCheckoutIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups allow-forms");
+    iframe.setAttribute("allow", "payment *; fullscreen *;");
+    Object.assign(iframe.style, {
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0",
+      border: "0",
+      zIndex: "2147483647",
+      background: "#ffffff",
+      display: "none"
+    });
+    return iframe;
+  }
+  closeCheckout() {
+    if (this.iframeElement) {
+      this.iframeElement.style.display = "none";
+      this.iframeShown = false;
+      this.iframeElement.removeAttribute("src");
+      this._setScrollLocked(false);
+    }
+  }
+  extract(rootElement = document.body) {
+    rootElement.querySelectorAll("[data-shopmate-product-id]").forEach((el) => {
+      const htmlEl = el;
+      const productId = parseInt(htmlEl.getAttribute("data-shopmate-product-id") || "", 10);
+      if (!isNaN(productId)) {
+        htmlEl.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.addToCart(productId, parseInt(htmlEl.getAttribute("data-shopmate-quantity") || "1", 10), htmlEl);
+        });
+      }
+    });
+    const urlPrefix = this.checkoutUrl + "?";
+    const targetElementsWithUrlTrigger = rootElement.querySelectorAll(`a[href^="${urlPrefix}"]`);
+    targetElementsWithUrlTrigger.forEach((el) => {
+      const anchor = el;
+      const href = anchor.getAttribute("href") || "";
+      if (href.startsWith(urlPrefix)) {
+        const url = new URL(href, window.location.origin);
+        const productIdsRaw = url.searchParams.get("pid");
+        let productIds = [];
+        const cartRaw = url.searchParams.get("c");
+        let cart = null;
+        if (productIdsRaw) {
+          productIds = productIdsRaw.split(",").map((id) => parseInt(id, 10)).filter((id) => !isNaN(id));
+        } else if (cartRaw) {
+          try {
+            cart = JSON.parse(cartRaw);
+            if (cart && typeof cart === "object" && Array.isArray(cart.i)) {
+              cart.i = cart.i.filter((item) => typeof item.i === "number" && typeof item.q === "number");
+            } else {
+              cart = null;
+            }
+          } catch (e) {
+            console.warn("Invalid cart data in URL:", e);
+            cart = null;
+          }
+        }
+        anchor.addEventListener("click", (e) => {
+          e.preventDefault();
+          if (productIds.length > 0) {
+            productIds.forEach((pid) => this.addToCart(pid, 1, anchor));
+          } else if (cart) {
+            cart.i.forEach((item) => this.addToCart(item.i, item.q, anchor));
+          }
+          this.openCheckout(anchor);
+        });
+      }
+    });
+    rootElement.querySelectorAll('[data-shopmate-checkout="true"]').forEach((el) => {
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.openCheckout(el);
+      });
+    });
+    this._runWhenBodyReady(() => {
+      this._ensureFloatingCart(rootElement);
+      this._updateFloatingCartBadge();
+    });
+  }
+};
+if (typeof window !== "undefined") {
+  window.ShopMate = ShopMate;
+  const script = document.currentScript;
+  if (script && script.src) {
+    const instance = new ShopMate({
+      orgId: parseInt(script.dataset.orgId || "2", 10),
+      baseUrl: script.dataset.baseUrl || void 0,
+      cartPosition: script.dataset.cartPosition || void 0
+    });
+    window.addEventListener("load", () => {
+      window.ShopMateInstance = instance;
+      instance.extract();
+    });
+  }
+}
+var index_default = ShopMate;

package/dist/index.d.ts

@@ -24,8 +24,9 @@ declare class ShopMate {
     private _getMountRoot;
     private _runWhenBodyReady;
     constructor(config: ShopMateConfig);
+    private _injectGlobalStyles;
     private _setScrollLocked;
-    private _pulseButton;
+    private _toggleLoading;
     private _pop;
     private _getPositionStyles;
     private _ensureFloatingCart;