notify-me-wl 1.0.1 → 1.2.0

package/README.md

@@ -1,16 +1,15 @@
-## Notify Me Widget
+### Coming Soon/Notify Me Widget
 
-This widget allows users to sign up for notifications when a specific product variant is back in stock. The widget can be integrated into a Shopify store or any other e-commerce platform. Users can provide their email, mobile number, and name to register their interest.
+This JavaScript widget allows users to register their interest in a product that is either "coming soon" or "out of stock". Depending on the `data-type` attribute provided, the widget will display appropriate messages and functionality.
 
-### Features
-
-- Dynamic form fields based on data attributes
-- Customizable styling
-- Integration with an external Wishlist API to handle form submissions
+#### Features:
+- Dynamically display a form to collect user information (email, mobile, first name, last name).
+- Adjust form and button text based on the widget type (`notify-me` or `coming-soon`).
+- Submit user data to a specified API endpoint with email or mobile as a path parameter and appropriate query parameters.
 
 ### Installation
 
-Include the widget script in your HTML file:
+Add the following script to your HTML to include the widget:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/notify-me-wl/index.js"></script>
@@ -18,73 +17,60 @@ Include the widget script in your HTML file:
 
 ### Usage
 
-1. Add a button to your HTML where the widget will be initialized. The button should have an ID of `popup-open` and a `data-fields` attribute that specifies the fields to be included in the form:
+Add a button to your HTML where you want the widget to appear. The button should have an `id` of `popup-open`, a `data-fields` attribute with the fields you want to include in the form (as a JSON string), and a `data-type` attribute to specify the widget type (`notify-me` or `coming-soon`).
 
 ```html
-<div id="notify-me">
-    <button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile", "firstName", "lastName"]'>NOTIFY ME - JOIN WAITLIST</button>
-</div>
+<div id="notification-widget"></div>
+<button id="popup-open" data-fields='["email", "mobile", "firstName", "lastName"]' data-type="notify-me">Open Popup</button>
 ```
 
-2. The script will automatically create a popup form with the specified fields when the button is clicked.
-
-### Customization
-
-#### Fields
-
-The `data-fields` attribute on the button determines which fields will be included in the form. Possible values include:
+### Configuration
 
-- `email`
-- `mobile`
-- `firstName`
-- `lastName`
+- `data-fields`: A JSON array specifying the fields to include in the form. Possible values are `"email"`, `"mobile"`, `"firstName"`, and `"lastName"`.
+- `data-type`: Specifies the type of the widget. Possible values are `"notify-me"` and `"coming-soon"`.
 
-Example:
+### Example
 
 ```html
-<button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile"]'>NOTIFY ME - JOIN WAITLIST</button>
-```
+<div id="notification-widget"></div>
+<button id="popup-open" data-fields='["email", "mobile"]' data-type="notify-me">Open Popup</button>
 
-#### Styles
+<script>
+  // The script provided will be included here
+</script>
+```
 
-The widget includes default styles for the button and popup form. You can customize these styles by modifying the `styles` variable in the JavaScript file or by overriding the styles in your own CSS.
+### How It Works
 
-### API Integration
+1. **Initialization**: The script listens for the `DOMContentLoaded` event to initialize the widget.
+2. **Styles Injection**: It injects necessary styles for the modal and form elements.
+3. **Modal Creation**: Creates the modal structure and appends it to the `notification-widget` div.
+4. **Dynamic Content**: Based on the `data-type`, it sets the appropriate messages and button text.
+5. **Form Submission**: Collects form data and submits it to the API with the email or mobile number as a path parameter. If a mobile number is provided, it also appends `isMobile=true` to the query string.
 
-The widget sends the form data to the specified API endpoint:
+### API Request Example
 
-```plaintext
-https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest
+For email:
+```
+https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest/{email}
 ```
 
-#### Example Payload
-
-```json
-{
-  "productRef": 6786188247105,
-  "variantRef": 1,
-  "email": "example@example.com",
-  "mobile": "1234567890",
-  "firstName": "John",
-  "lastName": "Doe",
-  "isMobile": true
-}
+For mobile:
+```
+https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest/{mobile}?isMobile=true
 ```
 
-### Complete HTML Example
+### Full Script
 
-Here is a complete example of an HTML file that includes the Notify Me Widget:
+```javascript
+const ACCESS_TOKEN = "123"; // // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
 
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Notify Me Widget</title>
-    <style>
-        /* Custom styles for the button and popup form */
-        .notify-me-btn {
+document.addEventListener("DOMContentLoaded", function () {
+    const wrapper = document.getElementById("notification-widget");
+    if (!wrapper) return;
+
+    const styles = `
+        .notification-btn {
             background-color: #fff;
             border: 1px solid black;
             color: black;
@@ -196,15 +182,170 @@ Here is a complete example of an HTML file that includes the Notify Me Widget:
             border-top: var(--size) solid black;
             top: 55%;
         }
-    </style>
-</head>
-<body>
-    <div id="notify-me">
-        <button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile", "first-name", "last-name"]'>NOTIFY ME - JOIN WAITLIST</button>
-    </div>
+    `;
+
+    const styleSheet = document.createElement("style");
+    styleSheet.type = "text/css";
+    styleSheet.innerText = styles;
+    document.head.appendChild(styleSheet);
+
+    const overlay = document.createElement("div");
+    overlay.innerHTML = `
+        <div id="popup-body" class="overlay">
+            <div id="popup-wrapper">
+                <h3 id="popup-title"></h3>
+                <span id="popup-close">&times;</span>
+                <div id="popup-text"></div>
+                <form id="popup-form">
+                    <div class="custom-select">
+                        <select name="select-size" required>
+                        </select>
+                    </div>
+                </form>
+            </div>
+        </div>
+    `;
+
+    wrapper.appendChild(overlay);
+
+    const popupBody = document.getElementById("popup-body");
+    const popupClose = document.getElementById("popup-close");
+    const popupOpenButton = document.getElementById("popup-open");
+    const popupTitle = document.getElementById("popup-title");
+    const popupText = document.getElementById("popup-text");
+    const sizeSelect = document.querySelector("select[name='select-size']");
+    const form = overlay.querySelector("#popup-form");
+
+    if (!popupBody || !popupClose || !popupOpenButton || !popupTitle || !sizeSelect) return;
+
+    const fields = JSON.parse(popupOpenButton.getAttribute("data-fields") || '["email"]');
+    const type = popupOpenButton.getAttribute("data-type") || "notify-me";
+
+    const typeConfig = {
+        "notify-me": {
+            text: "Register to receive a notification as soon as this item is back in stock",
+            buttonText: "Notify me",
+        },
+        "coming-soon": {
+            text: "Register your interest to hear more about this item",
+            buttonText: "Register Interest",
+        },
+    };
+
+    // Get product data from Shopify's global variable
+    const productData = window.Shopify?.product || {
+        id: 6786188247105,
+        title: "THE ATG SCULPT FLARES TALL",
+        product_option_value: {
+            name: "BUTTER BLACK",
+        },
+        variants: [
+            { id: 1, title: "S" },
+            { id: 2, title: "M" },
+            { id: 3, title: "L" },
+            { id: 4, title: "XL" },
+        ],
+    };
+
+    popupTitle.innerHTML = productData.title + "<br/>" + productData.product_option_value.name;
+    popupText.innerText = typeConfig[type].text;
+    productData.variants.forEach((variant) => {
+        const option = document.createElement("option");
+        option.value = variant.title;
+        option.textContent = variant.title;
+        sizeSelect.appendChild(option);
+    });
+
+    const fieldMap = {
+        email: `<input name="email" placeholder="Email" type="email" required />`,
+        mobile: `<input name="mobile" placeholder="Mobile"
+
+ type="tel" required />`,
+        firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
+        lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
+    };
+
+    fields.forEach((field) => {
+        if (fieldMap[field]) {
+            form.insertAdjacentHTML("beforeend", fieldMap[field]);
+        }
+    });
+    form.insertAdjacentHTML("beforeend", `<button type="submit">${typeConfig[type].buttonText}</button>`);
+
+    function showPopup() {
+        popupBody.style.visibility = "visible";
+        popupBody.style.opacity = 1;
+    }
+
+    function hidePopup() {
+        popupBody.style.visibility = "hidden";
+        popupBody.style.opacity = 0;
+    }
+
+    popupOpenButton.addEventListener("click", showPopup);
+    popupClose.addEventListener("click", hidePopup);
+
+    if (form) {
+        form.addEventListener("submit", function (event) {
+            event.preventDefault();
+
+            const selectedSize = sizeSelect.value;
+            const selectedVariant = productData.variants.find((variant) => variant.title === selectedSize);
+
+            if (selectedVariant) {
+                const formData = {
+                    productRef: productData.id,
+                    variantRef: selectedVariant.id,
+                };
+
+                let contactInfo = "";
+                if (fields.includes("email")) {
+                    formData.email = form.querySelector("input[name='email']").value;
+                    contactInfo = formData.email;
+                }
+                if (fields.includes("firstName")) {
+                    formData.firstName = form.querySelector("input[name='firstName']").value;
+                }
+                if (fields.includes("lastName")) {
+                    formData.lastName = form.querySelector("input[name='lastName']").value;
+                }
+                if (fields.includes("mobile")) {
+                    formData.mobile = form.querySelector("input[name='mobile']").value;
+                    formData.isMobile = true;
+                    contactInfo = formData.mobile;
+                }
+
+                let url = `https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest/${contactInfo}?notifyMe=true`;
+                if (formData.isMobile) {
+                    url += "&isMobile=true";
+                }
 
-    <script src="https://cdn.jsdelivr.net/npm/notify-me-wl/index.js"></script>
-</body>
-</html>
+                fetch(url, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: ACCESS_TOKEN,
+                    },
+                    body: JSON.stringify(formData),
+                })
+                    .then((response) => {
+                        if (response.ok) {
+                            alert("Form submitted");
+                            hidePopup();
+                        } else {
+                            alert("Form submission failed");
+                        }
+                    })
+                    .catch((error) => {
+                        console.error("Error submitting form:", error);
+                        alert("Form submission failed");
+                    });
+            } else {
+                alert("Selected variant not found");
+            }
+        });
+    }
+});
 ```
 
+Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.

package/index.html

@@ -13,9 +13,9 @@
       </style>
    </head>
    <body>
-      <div id="notify-me">
-         <button id="popup-open" class="notify-me-btn" data-fields='["email", "mobile"]' type="button">NOTIFY ME - JOIN WAITLIST</button>
-      </div>
+      <div id="notification-widget">
+         <button id="popup-open" class="notification-btn" type="button" data-type="notify-me" data-fields='["email", "mobile", "firstName", "lastName"]'>Notify Me - Join Waitlist</button>
+     </div>
    </body>
    <script src="/index.js"></script>
 </html>

package/index.js

@@ -1,13 +1,13 @@
 // Access token for the API
-const ACCESS_TOKEN = "123";
+const ACCESS_TOKEN = "123"; // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
 
 document.addEventListener("DOMContentLoaded", function () {
-   const wrapper = document.getElementById("notify-me");
+   const wrapper = document.getElementById("notification-widget");
    if (!wrapper) return;
 
    // Define and apply styles for the popup and button
    const styles = `
-       .notify-me-btn {
+       .notification-btn {
            background-color: #fff;
            border: 1px solid black;
            color: black;
@@ -133,7 +133,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     <div id="popup-wrapper">
                         <h3 id="popup-title"></h3>
                         <span id="popup-close">&times;</span>
-                        <div id="popup-text">Register to receive a notification as soon as this item is back in stock</div>
+                        <div id="popup-text"></div>
                         <form id="popup-form">
                             <div class="custom-select">
                                 <select name="select-size" required>
@@ -150,13 +150,25 @@ document.addEventListener("DOMContentLoaded", function () {
    const popupClose = document.getElementById("popup-close");
    const popupOpenButton = document.getElementById("popup-open");
    const popupTitle = document.getElementById("popup-title");
+   const popupText = document.getElementById("popup-text");
    const sizeSelect = document.querySelector("select[name='select-size']");
    const form = overlay.querySelector("#popup-form");
 
    if (!popupBody || !popupClose || !popupOpenButton || !popupTitle || !sizeSelect) return;
 
-   // Parse fields to be included in the form from data attribute
+   // Parse fields and type to be included in the form from data attribute
    const fields = JSON.parse(popupOpenButton.getAttribute("data-fields") || '["email"]');
+   const type = popupOpenButton.getAttribute("data-type") || "notify-me";
+   const typeConfig = {
+      "notify-me": {
+         text: "Register to receive a notification as soon as this item is back in stock",
+         buttonText: "Notify me",
+      },
+      "coming-soon": {
+         text: "Register your interest to hear more about this item",
+         buttonText: "Register Interest",
+      },
+   };
 
    // Get product data from Shopify's global variable
    const productData = window.Shopify?.product || {
@@ -183,6 +195,15 @@ document.addEventListener("DOMContentLoaded", function () {
    });
 
    // Map for form fields
+   popupTitle.innerHTML = productData.title + "<br/>" + productData.product_option_value.name;
+   popupText.innerText = typeConfig[type].text;
+   productData.variants.forEach((variant) => {
+      const option = document.createElement("option");
+      option.value = variant.title;
+      option.textContent = variant.title;
+      sizeSelect.appendChild(option);
+   });
+
    const fieldMap = {
       email: `<input name="email" placeholder="Email" type="email" required />`,
       mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
@@ -196,7 +217,7 @@ document.addEventListener("DOMContentLoaded", function () {
          form.insertAdjacentHTML("beforeend", fieldMap[field]);
       }
    });
-   form.insertAdjacentHTML("beforeend", `<button type="submit">Notify me</button>`);
+   form.insertAdjacentHTML("beforeend", `<button type="submit">${typeConfig[type].buttonText}</button>`);
 
    // Show/hide the popup
    function showPopup() {
@@ -224,23 +245,31 @@ document.addEventListener("DOMContentLoaded", function () {
             const formData = {
                productRef: productData.id,
                variantRef: selectedVariant.id,
-            };
+           };
 
-            if (fields.includes("email")) {
-               formData.email = form.querySelector("input[type='email']").value;
-            }
-            if (fields.includes("firstName")) {
-               formData.firstName = form.querySelector("input[placeholder='First name']").value;
-            }
-            if (fields.includes("lastName")) {
-               formData.lastName = form.querySelector("input[placeholder='Last name']").value;
-            }
-            if (fields.includes("mobile")) {
-               formData.mobile = form.querySelector("input[type='tel']").value;
+           let contactInfo = "";
+           if (fields.includes("email")) {
+               formData.email = form.querySelector("input[name='email']").value;
+               contactInfo = formData.email;
+           }
+           if (fields.includes("firstName")) {
+               formData.firstName = form.querySelector("input[name='firstName']").value;
+           }
+           if (fields.includes("lastName")) {
+               formData.lastName = form.querySelector("input[name='lastName']").value;
+           }
+           if (fields.includes("mobile")) {
+               formData.mobile = form.querySelector("input[name='mobile']").value;
                formData.isMobile = true;
-            }
+               contactInfo = formData.mobile;
+           }
+
+           let url = `https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest/${contactInfo}`;
+           if (formData.isMobile) {
+               url += "?isMobile=true";
+           }
 
-            fetch("https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest", {
+            fetch(url, {
                method: "POST",
                headers: {
                   "Content-Type": "application/json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notify-me-wl",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"