coming-soon-wl

v1.0.0

Published

2 months ago

This widget allows users to sign up for notifications when a specific product variant is available soon. 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

Downloads

0High
0Medium
0Low

visosensey

Coming Soon Widget

Features

Dynamic form fields based on data attributes
Customizable styling
Integration with an external Wishlist API to handle form submissions

Installation

Include the widget script in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/coming-soon-wl/index.js"></script>

Usage

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:

<div id="coming-soon">
    <button id="popup-open" class="coming-soon-btn" type="button" data-fields='["email", "mobile", "firstName", "lastName"]'>NOTIFY ME - JOIN WAITLIST</button>
</div>

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:

email
mobile
firstName
lastName

Example:

<button id="popup-open" class="coming-soon-btn" type="button" data-fields='["email", "mobile"]'>COMING SOON - JOIN WAITLIST</button>

Styles

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.

API Integration

The widget sends the form data to the specified API endpoint:

https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest/{email}

Example Payload

{
  "productRef": 6786188247105,
  "variantRef": 1,
  "email": "[email protected]",
  "mobile": "1234567890",
  "firstName": "John",
  "lastName": "Doe",
  "isMobile": true
}

Complete HTML Example

Here is a complete example of an HTML file that includes the Notify Me Widget:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming Soon Widget</title>
    <style>
        /* Custom styles for the button and popup form */
        .coming-soon-btn {
            background-color: #fff;
            border: 1px solid black;
            color: black;
            padding: 12px 24px;
            text-align: center;
            width: 100%;
            cursor: pointer;
            text-transform: uppercase;
        }
        #popup-body.overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 200ms;
            visibility: hidden;
            opacity: 0;
        }
        #popup-wrapper {
            margin: 70px auto;
            padding: 15px;
            background: #fff;
            border-radius: 5px;
            max-width: 360px;
            position: relative;
        }
        #popup-close {
            position: absolute;
            top: 5px;
            right: 15px;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }
        #popup-close:hover {
            color: #d80606;
        }
        #popup-title {
            margin: 0;
            font-size: 20px;
            max-width: 350px;
            text-transform: uppercase;
        }
        #popup-text {
            margin: 10px 0;
            font-size: 14px;
        }
        #popup-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        #popup-form input {
            padding: 0.475em 1em;
            border: 1px solid #caced1;
            border-radius: 0.25rem;
            font-size: 1.15rem;
            max-width: 100%;
        }
        #popup-form input::placeholder {
            font-size: 1rem;
        }
        #popup-form button {
            font-size: 0.85rem;
            padding: 0.975em 1em;
            font-weight: 600;
            border: none;
            text-transform: uppercase;
            background: #aca475;
            color: #fff;
            cursor: pointer;
        }
        .custom-select {
            position: relative;
        }
        .custom-select select {
            appearance: none;
            width: 100%;
            font-size: 1.15rem;
            padding: 0.475em 1em;
            background-color: #fff;
            border: 1px solid #caced1;
            border-radius: 0.25rem;
            color: #000;
            cursor: pointer;
        }
        .custom-select::before,
        .custom-select::after {
            --size: 0.3rem;
            content: "";
            position: absolute;
            right: 1rem;
            pointer-events: none;
        }
        .custom-select::before {
            border-left: var(--size) solid transparent;
            border-right: var(--size) solid transparent;
            border-bottom: var(--size) solid black;
            top: 40%;
        }
        .custom-select::after {
            border-left: var(--size) solid transparent;
            border-right: var(--size) solid transparent;
            border-top: var(--size) solid black;
            top: 55%;
        }
    </style>
</head>
<body>
    <div id="coming-soon">
        <button id="popup-open" class="coming-soon-btn" type="button" data-fields='["email", "mobile", "first-name", "last-name"]'>COMING SOON - JOIN WAITLIST</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/coming-soon-wl/index.js"></script>
</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme