Modifier le thème Shopify
- Accéder au thème Shopify
- Trouver le fichier d’une page produit
- Ajouter le code pour collecter le numéro
<input
class=""
type="text"
id="phone-number"
name="phone-number"
placeholder="Numéro de téléphone"
>
<button
type="button"
id="whatsapp-button"
style="display:block;width:100%;font-size:16px;font-weight:700;margin-top:10px;line-height:21px;"
class="bttn"
disabled
>
Recevoir une alerte sur WhatsApp
</button>
4. Puis ajouter le code qui transmet cette information à Simio
<!-- SIMIO BACK IN STOCK -->
<script>
const phoneNumberInput = document.getElementById('phone-number');
const whatsappButton = document.getElementById('whatsapp-button');
function handleWhatsAppAlert() {
whatsappButton.disabled = true;
whatsappButton.textContent = 'Inscription en cours...';
const phoneNumber = phoneNumberInput.value.trim();
const customerId = "{{à demander au support}}";
if (phoneNumber.length > 8) {
whatsappButton.disabled = true;
whatsappButton.textContent = 'Inscription en cours...';
fetch('https://app.getsimio.com/backinstock/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
phoneNumber: phoneNumber,
customerId: customerId,
variantId: {{ product.selected_or_first_available_variant.id }},
})
})
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Erreur lors de la requête.');
})
.then(data => {
whatsappButton.textContent = "C'est noté, on vous préviendra dès son retour !";
})
.catch(error => {
console.error(error);
whatsappButton.textContent = "Une erreur s'est produite";
});
}
}
phoneNumberInput.addEventListener('input', function() {
if (phoneNumberInput.value.trim().length > 8) {
whatsappButton.textContent = "Recevoir une alerte sur WhatsApp";
whatsappButton.removeAttribute('disabled');
} else {
whatsappButton.setAttribute('disabled', 'true');
}
});
whatsappButton.addEventListener('click', handleWhatsAppAlert);
</script>
<!-- --------- -->
5. Ajuster le style à votre site