Formularz, który będzie zbierał adresy e-mail użytkowników, którzy zapisali się do powiadomienia o dostępności, to bardzo ważny element przy wdrożeniu tego scenariusza. Przygotowanie takiego formularza oraz jego wdrożenie na strony produktowe leży po Twojej stronie.
Poniżej znajdziesz przykładowy skrypt takiego formularza, choć może on być zupełnie inny, dopasowany do Twoich preferencji, oczekiwań.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
}
.container {
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.form_container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
}
.form_container input,
button {
font-family: inherit;
margin: 5px 0px;
}
</style>
</head>
<body>
<div class="container">
<h1>Wishlist form</h1>
<div class="form_container">
<input type="email" name="email" id="input-email" placeholder="Email" />
<input type="text" name="app_id" id="app_id" placeholder="App_id" />
<input type="text" id="prod-id" placeholder="Product ID" />
<input type="text" name="url" id="product-url" placeholder="URL" />
<input
type="text"
name="title"
id="product-title"
placeholder="Product Title"
/>
<input
type="text"
name="image"
id="product-image"
placeholder="Product Image"
/>
<input
type="text"
name="cat-id"
id="cat-id"
placeholder="Category Id"
/>
<input
type="text"
name="cat-name"
id="cat-name"
placeholder="Category Name"
/>
</div>
<div class="form_buttons">
<button id="topic_observe">TOPIC OBSERVE</button>
<button id="topic_publish">TOPIC PUBLISH</button>
</div>
</div>
<script>
// example - "MK641992022"
document.querySelector("#topic_observe").addEventListener("click", () => {
var productId = document.querySelector("#prod-id").value;
var appId = document.querySelector("#app_id").value;
var email = document.querySelector("#input-email").value; // get this value from email input
$.post("https://api.edrone.me/topic_observe", {
app_id: appId,
email: email,
topic_id: productId, //unique per topic
topic_campaign_id: 0, // 0 - default email design
}).done(function (data) {
alert("Topic Observe sent check Mission Control");
});
});
document.querySelector("#topic_publish").addEventListener("click", () => {
var productId = document.querySelector("#prod-id").value;
var appId = document.querySelector("#app_id").value;
var url = document.querySelector("#product-url").value;
var title = document.querySelector("#product-title").value;
var img = document.querySelector("#product-image").value;
var catID = document.querySelector("#cat-id").value;
var catTitle = document.querySelector("#cat-name").value;
$.post("https://api.edrone.me/topic_publish", {
app_id: appId,
topic_id: productId,
product_urls: url,
product_skus: productId,
product_titles: title,
product_images: img,
product_category_ids: catID,
product_category_names: catTitle,
}).done(function (data) {
// handle this part based on your needs
alert("Topic Publish sent check Mission Control");
});
});
</script>
</body>
</html>
Potrzebujesz dodatkowej pomocy?
Jeśli masz jakiekolwiek dodatkowe pytania dotyczące scenariusza Wishlist w edrone, skontaktuj się z nami na hello@edrone.me