notify-me-wl 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -29
- package/index.html +1 -1
- package/index.js +23 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,16 +50,22 @@ Add a button to your HTML where you want the widget to appear. The button should
|
|
|
50
50
|
|
|
51
51
|
### API Request Example
|
|
52
52
|
|
|
53
|
+
# For sandbox environment
|
|
54
|
+
```
|
|
55
|
+
https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest
|
|
53
56
|
```
|
|
57
|
+
# For production environment
|
|
58
|
+
```
|
|
54
59
|
https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest
|
|
55
60
|
```
|
|
56
61
|
|
|
62
|
+
|
|
57
63
|
### Full Script
|
|
58
64
|
|
|
59
65
|
```javascript
|
|
60
66
|
// Access token for the API
|
|
61
67
|
const ACCESS_TOKEN = "123"; // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
|
|
62
|
-
const TENANT_ID = "
|
|
68
|
+
const TENANT_ID = "victoria-woods"; // Replace `TENANT_ID` with your actual tenant ID.
|
|
63
69
|
|
|
64
70
|
document.addEventListener("DOMContentLoaded", function () {
|
|
65
71
|
const wrapper = document.getElementById("notification-widget");
|
|
@@ -79,6 +85,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
79
85
|
}
|
|
80
86
|
#popup-body.overlay {
|
|
81
87
|
position: fixed;
|
|
88
|
+
z-index: 9998;
|
|
82
89
|
top: 0;
|
|
83
90
|
bottom: 0;
|
|
84
91
|
left: 0;
|
|
@@ -90,6 +97,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
90
97
|
}
|
|
91
98
|
#popup-wrapper {
|
|
92
99
|
margin: 70px auto;
|
|
100
|
+
z-index: 9999;
|
|
93
101
|
padding: 15px;
|
|
94
102
|
background: #fff;
|
|
95
103
|
border-radius: 5px;
|
|
@@ -232,37 +240,16 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
232
240
|
};
|
|
233
241
|
|
|
234
242
|
// Get product data from Shopify's global variable
|
|
235
|
-
const productData = window
|
|
236
|
-
id: "6786188247105",
|
|
237
|
-
title: "THE ATG SCULPT FLARES TALL",
|
|
238
|
-
product_option_value: {
|
|
239
|
-
name: "BUTTER BLACK",
|
|
240
|
-
},
|
|
241
|
-
variants: [
|
|
242
|
-
{ id: 1, title: "S" },
|
|
243
|
-
{ id: "40216683806854", title: "M" },
|
|
244
|
-
{ id: 3, title: "L" },
|
|
245
|
-
{ id: 4, title: "XL" },
|
|
246
|
-
],
|
|
247
|
-
};
|
|
248
|
-
|
|
249
|
-
// Set the popup title and populate the size dropdown
|
|
250
|
-
popupTitle.innerHTML = productData.title + "<br/>" + productData.product_option_value.name;
|
|
251
|
-
productData.variants.forEach((variant) => {
|
|
252
|
-
const option = document.createElement("option");
|
|
253
|
-
option.value = variant.title;
|
|
254
|
-
option.textContent = variant.title;
|
|
255
|
-
sizeSelect.appendChild(option);
|
|
256
|
-
});
|
|
243
|
+
const productData = window?.currentProduct;
|
|
257
244
|
|
|
258
245
|
// Map for form fields
|
|
259
246
|
popupText.innerText = typeConfig[type].text;
|
|
260
247
|
|
|
261
248
|
const fieldMap = {
|
|
262
249
|
email: `<input name="email" placeholder="Email" type="email" required />`,
|
|
263
|
-
mobile: `<input name="mobile" placeholder="Mobile" type="tel" />`,
|
|
264
|
-
firstName: `<input name="firstName" placeholder="First name" type="text" />`,
|
|
265
|
-
lastName: `<input name="lastName" placeholder="Last name" type="text" />`,
|
|
250
|
+
mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
|
|
251
|
+
firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
|
|
252
|
+
lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
|
|
266
253
|
};
|
|
267
254
|
|
|
268
255
|
// Add fields to the form based on the parsed fields
|
|
@@ -280,6 +267,18 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
280
267
|
|
|
281
268
|
// Show/hide the popup
|
|
282
269
|
function showPopup() {
|
|
270
|
+
if (!productData) {
|
|
271
|
+
alert("Product data not found");
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
// Set the popup title and populate the size dropdown
|
|
275
|
+
popupTitle.innerHTML = productData.title;
|
|
276
|
+
productData.variants.forEach((variant) => {
|
|
277
|
+
const option = document.createElement("option");
|
|
278
|
+
option.value = variant.title;
|
|
279
|
+
option.textContent = variant.title;
|
|
280
|
+
sizeSelect.appendChild(option);
|
|
281
|
+
});
|
|
283
282
|
popupBody.style.visibility = "visible";
|
|
284
283
|
popupBody.style.opacity = 1;
|
|
285
284
|
}
|
|
@@ -309,7 +308,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
309
308
|
|
|
310
309
|
if (type === "coming-soon") {
|
|
311
310
|
formData.comingSoon = true;
|
|
312
|
-
formData.productRef = productData.id;
|
|
311
|
+
// formData.productRef = productData.id;
|
|
313
312
|
} else {
|
|
314
313
|
formData.notifyMe = true;
|
|
315
314
|
}
|
|
@@ -321,10 +320,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
321
320
|
}
|
|
322
321
|
if (fields.includes("mobile")) {
|
|
323
322
|
formData.mobile = form.querySelector("input[name='mobile']").value;
|
|
324
|
-
formData.phone = form.querySelector("input[name='mobile']").value;
|
|
323
|
+
// formData.phone = form.querySelector("input[name='mobile']").value;
|
|
325
324
|
}
|
|
326
325
|
|
|
327
|
-
let url = `https://api.au-
|
|
326
|
+
let url = `https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest`;
|
|
328
327
|
|
|
329
328
|
fetch(url, {
|
|
330
329
|
method: "POST",
|
package/index.html
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
</head>
|
|
15
15
|
<body>
|
|
16
16
|
<div id="notification-widget">
|
|
17
|
-
<button id="popup-open" class="notification-btn" type="button" data-type="notify-me" data-fields='["
|
|
17
|
+
<button id="popup-open" class="notification-btn" type="button" data-type="notify-me" data-fields='["firstName", "lastName"]'>Notify Me - Join Waitlist</button>
|
|
18
18
|
</div>
|
|
19
19
|
</body>
|
|
20
20
|
<script src="/index.js"></script>
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Access token for the API
|
|
2
|
-
const ACCESS_TOKEN = "
|
|
3
|
-
const TENANT_ID = "
|
|
2
|
+
const ACCESS_TOKEN = "Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJRWlJkS3JabXJmMEk3WkhXRUtqNWRLTEhQanFubWJFeV9iNmpSbHdya1drIn0.eyJleHAiOjE3MjMwMzI3NzIsImlhdCI6MTcyMzAyOTE3MiwianRpIjoiNDJiNGYwM2QtMDNiNS00NmZlLTk5YmItZDQ2NTdhNjk5NGNiIiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmF1LWF3cy50aGV3aXNobGlzdC5pby9hdXRoL3JlYWxtcy90d2NNYWluIiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjI2YTIyNTAyLWRhNzQtNDhkMC1iZWFiLTgzY2E0YTlmMDdlOSIsInR5cCI6IkJlYXJlciIsImF6cCI6InR3Yy1wb3MtY2xpZW50Iiwic2Vzc2lvbl9zdGF0ZSI6IjQxYWQwMDc4LWVmYTItNGVjMi1hM2I2LTIzYjBkNDM3YjEzOCIsImFjciI6IjEiLCJhbGxvd2VkLW9yaWdpbnMiOlsiaHR0cHM6Ly9sb2NhbGhvc3QiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbInR3Yy1wb3MtdXNlciIsIm9mZmxpbmVfYWNjZXNzIiwidHdjLXN0b3JlLW93bmVyIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InRlbmFudGlkIHN0b3JlIHByb2ZpbGUgZW1haWwiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsInRlbmFudGlkIjoidmlrdG9yaWEtd29vZHMiLCJuYW1lIjoiTWF0dCBIYW1wc2hpcmUiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJtYXR0QHRoZXdpc2hsaXN0LmlvIiwic3RvcmUiOiIyMDUiLCJnaXZlbl9uYW1lIjoiTWF0dCIsImZhbWlseV9uYW1lIjoiSGFtcHNoaXJlIiwiZW1haWwiOiJtYXR0QHRoZXdpc2hsaXN0LmlvIn0.iZkMgwH74njjXUWvImkJomHYr91Lr8ZGrZGwslEGcV3vbNuoNc5CocvNWW476o-LoSh-LsKf-MLiYN1XvOuPDF3fGoGCEbMh6_M0RJcrhVWogkj81fx4ukvDPCFIjgoDCV9WIuehV9dsSWa7E0irZeE6MUVhLwRIaTzKtxgzUUKrAqBtI_HKpyo8TUGQBiYlrc85QFUyuoKbKg-QaRn_SObRLDB8ooIBJvIlgklXQt1ZYBM2HUOc5L1bAQwfzcrWEvl6eYiQHXCSPqS0rPGoaGC6v5ydBo9VMxtVHGladDHLrO3Gt2BnIGMBoYrKTAmt7j0KABwPyB3CmAIwj_pOBQ"; // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
|
|
3
|
+
const TENANT_ID = "victoria-woods"; // Replace `TENANT_ID` with your actual tenant ID.
|
|
4
4
|
|
|
5
5
|
document.addEventListener("DOMContentLoaded", function () {
|
|
6
6
|
const wrapper = document.getElementById("notification-widget");
|
|
@@ -20,6 +20,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
20
20
|
}
|
|
21
21
|
#popup-body.overlay {
|
|
22
22
|
position: fixed;
|
|
23
|
+
z-index: 9998;
|
|
23
24
|
top: 0;
|
|
24
25
|
bottom: 0;
|
|
25
26
|
left: 0;
|
|
@@ -31,6 +32,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
31
32
|
}
|
|
32
33
|
#popup-wrapper {
|
|
33
34
|
margin: 70px auto;
|
|
35
|
+
z-index: 9999;
|
|
34
36
|
padding: 15px;
|
|
35
37
|
background: #fff;
|
|
36
38
|
border-radius: 5px;
|
|
@@ -173,37 +175,16 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
173
175
|
};
|
|
174
176
|
|
|
175
177
|
// Get product data from Shopify's global variable
|
|
176
|
-
const productData = window
|
|
177
|
-
id: "6786188247105",
|
|
178
|
-
title: "THE ATG SCULPT FLARES TALL",
|
|
179
|
-
product_option_value: {
|
|
180
|
-
name: "BUTTER BLACK",
|
|
181
|
-
},
|
|
182
|
-
variants: [
|
|
183
|
-
{ id: 1, title: "S" },
|
|
184
|
-
{ id: "40216683806854", title: "M" },
|
|
185
|
-
{ id: 3, title: "L" },
|
|
186
|
-
{ id: 4, title: "XL" },
|
|
187
|
-
],
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
// Set the popup title and populate the size dropdown
|
|
191
|
-
popupTitle.innerHTML = productData.title + "<br/>" + productData.product_option_value.name;
|
|
192
|
-
productData.variants.forEach((variant) => {
|
|
193
|
-
const option = document.createElement("option");
|
|
194
|
-
option.value = variant.title;
|
|
195
|
-
option.textContent = variant.title;
|
|
196
|
-
sizeSelect.appendChild(option);
|
|
197
|
-
});
|
|
178
|
+
const productData = window?.currentProduct;
|
|
198
179
|
|
|
199
180
|
// Map for form fields
|
|
200
181
|
popupText.innerText = typeConfig[type].text;
|
|
201
182
|
|
|
202
183
|
const fieldMap = {
|
|
203
184
|
email: `<input name="email" placeholder="Email" type="email" required />`,
|
|
204
|
-
mobile: `<input name="mobile" placeholder="Mobile" type="tel" />`,
|
|
205
|
-
firstName: `<input name="firstName" placeholder="First name" type="text" />`,
|
|
206
|
-
lastName: `<input name="lastName" placeholder="Last name" type="text" />`,
|
|
185
|
+
mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
|
|
186
|
+
firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
|
|
187
|
+
lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
|
|
207
188
|
};
|
|
208
189
|
|
|
209
190
|
// Add fields to the form based on the parsed fields
|
|
@@ -221,6 +202,18 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
221
202
|
|
|
222
203
|
// Show/hide the popup
|
|
223
204
|
function showPopup() {
|
|
205
|
+
if (!productData) {
|
|
206
|
+
alert("Product data not found");
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
// Set the popup title and populate the size dropdown
|
|
210
|
+
popupTitle.innerHTML = productData.title;
|
|
211
|
+
productData.variants.forEach((variant) => {
|
|
212
|
+
const option = document.createElement("option");
|
|
213
|
+
option.value = variant.title;
|
|
214
|
+
option.textContent = variant.title;
|
|
215
|
+
sizeSelect.appendChild(option);
|
|
216
|
+
});
|
|
224
217
|
popupBody.style.visibility = "visible";
|
|
225
218
|
popupBody.style.opacity = 1;
|
|
226
219
|
}
|
|
@@ -250,7 +243,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
250
243
|
|
|
251
244
|
if (type === "coming-soon") {
|
|
252
245
|
formData.comingSoon = true;
|
|
253
|
-
formData.productRef = productData.id;
|
|
246
|
+
// formData.productRef = productData.id;
|
|
254
247
|
} else {
|
|
255
248
|
formData.notifyMe = true;
|
|
256
249
|
}
|
|
@@ -262,10 +255,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
262
255
|
}
|
|
263
256
|
if (fields.includes("mobile")) {
|
|
264
257
|
formData.mobile = form.querySelector("input[name='mobile']").value;
|
|
265
|
-
formData.phone = form.querySelector("input[name='mobile']").value;
|
|
258
|
+
// formData.phone = form.querySelector("input[name='mobile']").value;
|
|
266
259
|
}
|
|
267
260
|
|
|
268
|
-
let url = `https://api.au-
|
|
261
|
+
let url = `https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest`;
|
|
269
262
|
|
|
270
263
|
fetch(url, {
|
|
271
264
|
method: "POST",
|