Un formulario que recopile las direcciones de correo electrónico de los usuarios que se han inscrito para recibir notificaciones de disponibilidad es un elemento muy importante al implementar este escenario. La preparación de dicho formulario y su implementación en las páginas de producto queda de su lado.
A continuación encontrará un script de ejemplo para este formulario, aunque puede ser completamente diferente, adaptado a sus preferencias y expectativas.
<!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>
¿Necesitas más ayuda?
Si tienes más preguntas sobre el escenario de Wishlist, no dudes en ponerte en contacto con nosotros en hello@edrone.me