Ir para conteúdo principal
Todas as coleçõesCENÁRIOS DE AUTOMAÇÃO PRONTOS PARA USOLista de desejos
Como preparar um formulário para coletar inscrições para a lista de desejos?
Como preparar um formulário para coletar inscrições para a lista de desejos?

Aprenda como inserir um campo de coleta de email na pagina de produto para usar na lista de desejo

Ana Zaroni avatar
Escrito por Ana Zaroni
Atualizado há mais de um ano

Um campo que coletará os endereços de email dos usuários que se inscreverem para receberem posteriormente uma notificação sobre a disponibilidade do produto desejado, é um elemento muito importante ao implementar esse cenário de automação. A preparação desse campo e sua implementação nas páginas do produto são de sua responsabilidade.

Abaixo você encontrará um exemplo de script para tal formulário, embora possa ser completamente diferente, adaptado às suas preferências e 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>


Precisa de mais ajuda?

Se você tiver mais alguma dúvida sobre o cenário da lista de desejos , não hesite em nos contatar em hello@edrone.me

Isto respondeu à sua pergunta?