notify-me-wl 1.0.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/index.html +21 -0
- package/index.js +268 -0
- package/package.json +11 -0
package/index.html
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Notify me</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
height: 100vh;
|
|
10
|
+
margin: 100px auto;
|
|
11
|
+
width: 300px;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<div id="notify-me">
|
|
17
|
+
<button id="popup-open" class="notify-me-btn" data-fields='["email", "mobile"]' type="button">NOTIFY ME - JOIN WAITLIST</button>
|
|
18
|
+
</div>
|
|
19
|
+
</body>
|
|
20
|
+
<script src="/index.js"></script>
|
|
21
|
+
</html>
|
package/index.js
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
// Access token for the API
|
|
2
|
+
const ACCESS_TOKEN = "123";
|
|
3
|
+
|
|
4
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
5
|
+
const wrapper = document.getElementById("notify-me");
|
|
6
|
+
if (!wrapper) return;
|
|
7
|
+
|
|
8
|
+
// Define and apply styles for the popup and button
|
|
9
|
+
const styles = `
|
|
10
|
+
.notify-me-btn {
|
|
11
|
+
background-color: #fff;
|
|
12
|
+
border: 1px solid black;
|
|
13
|
+
color: black;
|
|
14
|
+
padding: 12px 24px;
|
|
15
|
+
text-align: center;
|
|
16
|
+
width: 100%;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
}
|
|
20
|
+
#popup-body.overlay {
|
|
21
|
+
position: fixed;
|
|
22
|
+
top: 0;
|
|
23
|
+
bottom: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
background: rgba(0, 0, 0, 0.7);
|
|
27
|
+
transition: opacity 200ms;
|
|
28
|
+
visibility: hidden;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
}
|
|
31
|
+
#popup-wrapper {
|
|
32
|
+
margin: 70px auto;
|
|
33
|
+
padding: 15px;
|
|
34
|
+
background: #fff;
|
|
35
|
+
border-radius: 5px;
|
|
36
|
+
max-width: 360px;
|
|
37
|
+
position: relative;
|
|
38
|
+
}
|
|
39
|
+
#popup-close {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 5px;
|
|
42
|
+
right: 15px;
|
|
43
|
+
transition: all 200ms;
|
|
44
|
+
font-size: 30px;
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
color: #333;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
#popup-close:hover {
|
|
51
|
+
color: #d80606;
|
|
52
|
+
}
|
|
53
|
+
#popup-title {
|
|
54
|
+
margin: 0;
|
|
55
|
+
font-size: 20px;
|
|
56
|
+
max-width: 350px;
|
|
57
|
+
text-transform: uppercase;
|
|
58
|
+
}
|
|
59
|
+
#popup-text {
|
|
60
|
+
margin: 10px 0;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
}
|
|
63
|
+
#popup-form {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 10px;
|
|
67
|
+
}
|
|
68
|
+
#popup-form input {
|
|
69
|
+
padding: 0.475em 1em;
|
|
70
|
+
border: 1px solid #caced1;
|
|
71
|
+
border-radius: 0.25rem;
|
|
72
|
+
font-size: 1.15rem;
|
|
73
|
+
max-width: 100%;
|
|
74
|
+
}
|
|
75
|
+
#popup-form input::placeholder {
|
|
76
|
+
font-size: 1rem;
|
|
77
|
+
}
|
|
78
|
+
#popup-form button {
|
|
79
|
+
font-size: 0.85rem;
|
|
80
|
+
padding: 0.975em 1em;
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
border: none;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
background: #aca475;
|
|
85
|
+
color: #fff;
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
}
|
|
88
|
+
.custom-select {
|
|
89
|
+
position: relative;
|
|
90
|
+
}
|
|
91
|
+
.custom-select select {
|
|
92
|
+
appearance: none;
|
|
93
|
+
width: 100%;
|
|
94
|
+
font-size: 1.15rem;
|
|
95
|
+
padding: 0.475em 1em;
|
|
96
|
+
background-color: #fff;
|
|
97
|
+
border: 1px solid #caced1;
|
|
98
|
+
border-radius: 0.25rem;
|
|
99
|
+
color: #000;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
}
|
|
102
|
+
.custom-select::before,
|
|
103
|
+
.custom-select::after {
|
|
104
|
+
--size: 0.3rem;
|
|
105
|
+
content: "";
|
|
106
|
+
position: absolute;
|
|
107
|
+
right: 1rem;
|
|
108
|
+
pointer-events: none;
|
|
109
|
+
}
|
|
110
|
+
.custom-select::before {
|
|
111
|
+
border-left: var(--size) solid transparent;
|
|
112
|
+
border-right: var(--size) solid transparent;
|
|
113
|
+
border-bottom: var(--size) solid black;
|
|
114
|
+
top: 40%;
|
|
115
|
+
}
|
|
116
|
+
.custom-select::after {
|
|
117
|
+
border-left: var(--size) solid transparent;
|
|
118
|
+
border-right: var(--size) solid transparent;
|
|
119
|
+
border-top: var(--size) solid black;
|
|
120
|
+
top: 55%;
|
|
121
|
+
}
|
|
122
|
+
`;
|
|
123
|
+
|
|
124
|
+
const styleSheet = document.createElement("style");
|
|
125
|
+
styleSheet.type = "text/css";
|
|
126
|
+
styleSheet.innerText = styles;
|
|
127
|
+
document.head.appendChild(styleSheet);
|
|
128
|
+
|
|
129
|
+
// Create and append the overlay for the popup
|
|
130
|
+
const overlay = document.createElement("div");
|
|
131
|
+
overlay.innerHTML = `
|
|
132
|
+
<div id="popup-body" class="overlay">
|
|
133
|
+
<div id="popup-wrapper">
|
|
134
|
+
<h3 id="popup-title"></h3>
|
|
135
|
+
<span id="popup-close">×</span>
|
|
136
|
+
<div id="popup-text">Register to receive a notification as soon as this item is back in stock</div>
|
|
137
|
+
<form id="popup-form">
|
|
138
|
+
<div class="custom-select">
|
|
139
|
+
<select name="select-size" required>
|
|
140
|
+
</select>
|
|
141
|
+
</div>
|
|
142
|
+
</form>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
`;
|
|
146
|
+
|
|
147
|
+
wrapper.appendChild(overlay);
|
|
148
|
+
|
|
149
|
+
const popupBody = document.getElementById("popup-body");
|
|
150
|
+
const popupClose = document.getElementById("popup-close");
|
|
151
|
+
const popupOpenButton = document.getElementById("popup-open");
|
|
152
|
+
const popupTitle = document.getElementById("popup-title");
|
|
153
|
+
const sizeSelect = document.querySelector("select[name='select-size']");
|
|
154
|
+
const form = overlay.querySelector("#popup-form");
|
|
155
|
+
|
|
156
|
+
if (!popupBody || !popupClose || !popupOpenButton || !popupTitle || !sizeSelect) return;
|
|
157
|
+
|
|
158
|
+
// Parse fields to be included in the form from data attribute
|
|
159
|
+
const fields = JSON.parse(popupOpenButton.getAttribute("data-fields") || '["email"]');
|
|
160
|
+
|
|
161
|
+
// Get product data from Shopify's global variable
|
|
162
|
+
const productData = window.Shopify?.product || {
|
|
163
|
+
id: 6786188247105,
|
|
164
|
+
title: "THE ATG SCULPT FLARES TALL",
|
|
165
|
+
product_option_value: {
|
|
166
|
+
name: "BUTTER BLACK",
|
|
167
|
+
},
|
|
168
|
+
variants: [
|
|
169
|
+
{ id: 1, title: "S" },
|
|
170
|
+
{ id: 2, title: "M" },
|
|
171
|
+
{ id: 3, title: "L" },
|
|
172
|
+
{ id: 4, title: "XL" },
|
|
173
|
+
],
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
// Set the popup title and populate the size dropdown
|
|
177
|
+
popupTitle.innerHTML = productData.title + "<br/>" + productData.product_option_value.name;
|
|
178
|
+
productData.variants.forEach((variant) => {
|
|
179
|
+
const option = document.createElement("option");
|
|
180
|
+
option.value = variant.title;
|
|
181
|
+
option.textContent = variant.title;
|
|
182
|
+
sizeSelect.appendChild(option);
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
// Map for form fields
|
|
186
|
+
const fieldMap = {
|
|
187
|
+
email: `<input name="email" placeholder="Email" type="email" required />`,
|
|
188
|
+
mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
|
|
189
|
+
firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
|
|
190
|
+
lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
// Add fields to the form based on the parsed fields
|
|
194
|
+
fields.forEach((field) => {
|
|
195
|
+
if (fieldMap[field]) {
|
|
196
|
+
form.insertAdjacentHTML("beforeend", fieldMap[field]);
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
form.insertAdjacentHTML("beforeend", `<button type="submit">Notify me</button>`);
|
|
200
|
+
|
|
201
|
+
// Show/hide the popup
|
|
202
|
+
function showPopup() {
|
|
203
|
+
popupBody.style.visibility = "visible";
|
|
204
|
+
popupBody.style.opacity = 1;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
function hidePopup() {
|
|
208
|
+
popupBody.style.visibility = "hidden";
|
|
209
|
+
popupBody.style.opacity = 0;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
popupOpenButton.addEventListener("click", showPopup);
|
|
213
|
+
popupClose.addEventListener("click", hidePopup);
|
|
214
|
+
|
|
215
|
+
// Form submission handler
|
|
216
|
+
if (form) {
|
|
217
|
+
form.addEventListener("submit", function (event) {
|
|
218
|
+
event.preventDefault();
|
|
219
|
+
|
|
220
|
+
const selectedSize = sizeSelect.value;
|
|
221
|
+
const selectedVariant = productData.variants.find((variant) => variant.title === selectedSize);
|
|
222
|
+
|
|
223
|
+
if (selectedVariant) {
|
|
224
|
+
const formData = {
|
|
225
|
+
productRef: productData.id,
|
|
226
|
+
variantRef: selectedVariant.id,
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
if (fields.includes("email")) {
|
|
230
|
+
formData.email = form.querySelector("input[type='email']").value;
|
|
231
|
+
}
|
|
232
|
+
if (fields.includes("firstName")) {
|
|
233
|
+
formData.firstName = form.querySelector("input[placeholder='First name']").value;
|
|
234
|
+
}
|
|
235
|
+
if (fields.includes("lastName")) {
|
|
236
|
+
formData.lastName = form.querySelector("input[placeholder='Last name']").value;
|
|
237
|
+
}
|
|
238
|
+
if (fields.includes("mobile")) {
|
|
239
|
+
formData.mobile = form.querySelector("input[type='tel']").value;
|
|
240
|
+
formData.isMobile = true;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
fetch("https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest", {
|
|
244
|
+
method: "POST",
|
|
245
|
+
headers: {
|
|
246
|
+
"Content-Type": "application/json",
|
|
247
|
+
Authorization: ACCESS_TOKEN,
|
|
248
|
+
},
|
|
249
|
+
body: JSON.stringify(formData),
|
|
250
|
+
})
|
|
251
|
+
.then((response) => {
|
|
252
|
+
if (response.ok) {
|
|
253
|
+
alert("Form submitted");
|
|
254
|
+
hidePopup();
|
|
255
|
+
} else {
|
|
256
|
+
alert("Form submission failed");
|
|
257
|
+
}
|
|
258
|
+
})
|
|
259
|
+
.catch((error) => {
|
|
260
|
+
console.error("Error submitting form:", error);
|
|
261
|
+
alert("Form submission failed");
|
|
262
|
+
});
|
|
263
|
+
} else {
|
|
264
|
+
alert("Selected variant not found");
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
});
|