notify-me-wl 1.0.0 → 1.0.1
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 +210 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
## Notify Me Widget
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- Dynamic form fields based on data attributes
|
|
8
|
+
- Customizable styling
|
|
9
|
+
- Integration with an external Wishlist API to handle form submissions
|
|
10
|
+
|
|
11
|
+
### Installation
|
|
12
|
+
|
|
13
|
+
Include the widget script in your HTML file:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/notify-me-wl/index.js"></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Usage
|
|
20
|
+
|
|
21
|
+
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:
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<div id="notify-me">
|
|
25
|
+
<button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile", "firstName", "lastName"]'>NOTIFY ME - JOIN WAITLIST</button>
|
|
26
|
+
</div>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
2. The script will automatically create a popup form with the specified fields when the button is clicked.
|
|
30
|
+
|
|
31
|
+
### Customization
|
|
32
|
+
|
|
33
|
+
#### Fields
|
|
34
|
+
|
|
35
|
+
The `data-fields` attribute on the button determines which fields will be included in the form. Possible values include:
|
|
36
|
+
|
|
37
|
+
- `email`
|
|
38
|
+
- `mobile`
|
|
39
|
+
- `firstName`
|
|
40
|
+
- `lastName`
|
|
41
|
+
|
|
42
|
+
Example:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile"]'>NOTIFY ME - JOIN WAITLIST</button>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
#### Styles
|
|
49
|
+
|
|
50
|
+
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.
|
|
51
|
+
|
|
52
|
+
### API Integration
|
|
53
|
+
|
|
54
|
+
The widget sends the form data to the specified API endpoint:
|
|
55
|
+
|
|
56
|
+
```plaintext
|
|
57
|
+
https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Example Payload
|
|
61
|
+
|
|
62
|
+
```json
|
|
63
|
+
{
|
|
64
|
+
"productRef": 6786188247105,
|
|
65
|
+
"variantRef": 1,
|
|
66
|
+
"email": "example@example.com",
|
|
67
|
+
"mobile": "1234567890",
|
|
68
|
+
"firstName": "John",
|
|
69
|
+
"lastName": "Doe",
|
|
70
|
+
"isMobile": true
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Complete HTML Example
|
|
75
|
+
|
|
76
|
+
Here is a complete example of an HTML file that includes the Notify Me Widget:
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!DOCTYPE html>
|
|
80
|
+
<html lang="en">
|
|
81
|
+
<head>
|
|
82
|
+
<meta charset="UTF-8">
|
|
83
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
84
|
+
<title>Notify Me Widget</title>
|
|
85
|
+
<style>
|
|
86
|
+
/* Custom styles for the button and popup form */
|
|
87
|
+
.notify-me-btn {
|
|
88
|
+
background-color: #fff;
|
|
89
|
+
border: 1px solid black;
|
|
90
|
+
color: black;
|
|
91
|
+
padding: 12px 24px;
|
|
92
|
+
text-align: center;
|
|
93
|
+
width: 100%;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
text-transform: uppercase;
|
|
96
|
+
}
|
|
97
|
+
#popup-body.overlay {
|
|
98
|
+
position: fixed;
|
|
99
|
+
top: 0;
|
|
100
|
+
bottom: 0;
|
|
101
|
+
left: 0;
|
|
102
|
+
right: 0;
|
|
103
|
+
background: rgba(0, 0, 0, 0.7);
|
|
104
|
+
transition: opacity 200ms;
|
|
105
|
+
visibility: hidden;
|
|
106
|
+
opacity: 0;
|
|
107
|
+
}
|
|
108
|
+
#popup-wrapper {
|
|
109
|
+
margin: 70px auto;
|
|
110
|
+
padding: 15px;
|
|
111
|
+
background: #fff;
|
|
112
|
+
border-radius: 5px;
|
|
113
|
+
max-width: 360px;
|
|
114
|
+
position: relative;
|
|
115
|
+
}
|
|
116
|
+
#popup-close {
|
|
117
|
+
position: absolute;
|
|
118
|
+
top: 5px;
|
|
119
|
+
right: 15px;
|
|
120
|
+
transition: all 200ms;
|
|
121
|
+
font-size: 30px;
|
|
122
|
+
font-weight: bold;
|
|
123
|
+
text-decoration: none;
|
|
124
|
+
color: #333;
|
|
125
|
+
cursor: pointer;
|
|
126
|
+
}
|
|
127
|
+
#popup-close:hover {
|
|
128
|
+
color: #d80606;
|
|
129
|
+
}
|
|
130
|
+
#popup-title {
|
|
131
|
+
margin: 0;
|
|
132
|
+
font-size: 20px;
|
|
133
|
+
max-width: 350px;
|
|
134
|
+
text-transform: uppercase;
|
|
135
|
+
}
|
|
136
|
+
#popup-text {
|
|
137
|
+
margin: 10px 0;
|
|
138
|
+
font-size: 14px;
|
|
139
|
+
}
|
|
140
|
+
#popup-form {
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
gap: 10px;
|
|
144
|
+
}
|
|
145
|
+
#popup-form input {
|
|
146
|
+
padding: 0.475em 1em;
|
|
147
|
+
border: 1px solid #caced1;
|
|
148
|
+
border-radius: 0.25rem;
|
|
149
|
+
font-size: 1.15rem;
|
|
150
|
+
max-width: 100%;
|
|
151
|
+
}
|
|
152
|
+
#popup-form input::placeholder {
|
|
153
|
+
font-size: 1rem;
|
|
154
|
+
}
|
|
155
|
+
#popup-form button {
|
|
156
|
+
font-size: 0.85rem;
|
|
157
|
+
padding: 0.975em 1em;
|
|
158
|
+
font-weight: 600;
|
|
159
|
+
border: none;
|
|
160
|
+
text-transform: uppercase;
|
|
161
|
+
background: #aca475;
|
|
162
|
+
color: #fff;
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
}
|
|
165
|
+
.custom-select {
|
|
166
|
+
position: relative;
|
|
167
|
+
}
|
|
168
|
+
.custom-select select {
|
|
169
|
+
appearance: none;
|
|
170
|
+
width: 100%;
|
|
171
|
+
font-size: 1.15rem;
|
|
172
|
+
padding: 0.475em 1em;
|
|
173
|
+
background-color: #fff;
|
|
174
|
+
border: 1px solid #caced1;
|
|
175
|
+
border-radius: 0.25rem;
|
|
176
|
+
color: #000;
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
}
|
|
179
|
+
.custom-select::before,
|
|
180
|
+
.custom-select::after {
|
|
181
|
+
--size: 0.3rem;
|
|
182
|
+
content: "";
|
|
183
|
+
position: absolute;
|
|
184
|
+
right: 1rem;
|
|
185
|
+
pointer-events: none;
|
|
186
|
+
}
|
|
187
|
+
.custom-select::before {
|
|
188
|
+
border-left: var(--size) solid transparent;
|
|
189
|
+
border-right: var(--size) solid transparent;
|
|
190
|
+
border-bottom: var(--size) solid black;
|
|
191
|
+
top: 40%;
|
|
192
|
+
}
|
|
193
|
+
.custom-select::after {
|
|
194
|
+
border-left: var(--size) solid transparent;
|
|
195
|
+
border-right: var(--size) solid transparent;
|
|
196
|
+
border-top: var(--size) solid black;
|
|
197
|
+
top: 55%;
|
|
198
|
+
}
|
|
199
|
+
</style>
|
|
200
|
+
</head>
|
|
201
|
+
<body>
|
|
202
|
+
<div id="notify-me">
|
|
203
|
+
<button id="popup-open" class="notify-me-btn" type="button" data-fields='["email", "mobile", "first-name", "last-name"]'>NOTIFY ME - JOIN WAITLIST</button>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<script src="https://cdn.jsdelivr.net/npm/notify-me-wl/index.js"></script>
|
|
207
|
+
</body>
|
|
208
|
+
</html>
|
|
209
|
+
```
|
|
210
|
+
|