Come Integrare Mailchimp in un Form con WordPress, Stimulus e WP-AJAX

L’integrazione di Mailchimp in un form di WordPress utilizzando Stimulus e WP-AJAX consente di gestire le iscrizioni alla tua newsletter in modo efficiente e senza ricaricare la pagina. In questo tutorial, vedremo passo dopo passo come implementare questa soluzione.

Prerequisiti

• Un sito WordPress attivo
• Un account Mailchimp
• Familiarità con JavaScript e WordPress

Aggiungere Stimulus e WP-AJAX al Tema WordPress

Aggiungere Stimulus

1. Scarica Stimulus da GitHub o installalo tramite npm.
2. Aggiungi il file JavaScript di Stimulus al tuo tema. Puoi farlo aggiungendo il file alla cartella del tema e includendolo nel tuo functions.php.

</p>
<p>function enqueue_custom_scripts() {<br />
wp_enqueue_script( 'stimulus', get_template_directory_uri() . '/js/stimulus.js', array(), null, true );<br />
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('stimulus', 'jquery'), null, true );</p>
<p>// Passa l'url admin-ajax.php a JavaScript<br />
wp_localize_script( 'custom-js', 'ajax_object', array( 'ajax_url' =&gt; admin_url( 'admin-ajax.php' ) ) );<br />
}<br />
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );</p>
<p>

Nella cartella controllers, crea un file SubscriptionController.js:

</p>
<p>import { Controller } from "stimulus";<br />
export default class MailChimpController extends Controller {<br />
statictargets= ["form", "submitButton", "privacyCheckbox"];<br />
connect() {<br />
this.formTarget.addEventListener("submit", (event) =&gt; {<br />
event.preventDefault();<br />
this.subscribe();<br />
});<br />
// Ascolto cambiamento della checkbox privacy<br />
if (this.hasPrivacyCheckboxTarget &amp;&amp;this.hasSubmitButtonTarget) {<br />
this.privacyCheckboxTarget.addEventListener(<br />
"change",<br />
this.toggleSubmitButton<br />
);<br />
// Imposta lo stato iniziale del pulsante di invio<br />
this.toggleSubmitButton();<br />
}<br />
}<br />
subscribe() {<br />
constformData=newFormData(this.formTarget);<br />
constemail=formData.get("email");<br />
constnome=formData.get("nome");<br />
constcognome=formData.get("cognome");</p>
<p>fetch(ajax_call.ajax_url, {<br />
method:"POST",<br />
headers: {<br />
"Content-Type":"application/x-www-form-urlencoded",<br />
},<br />
body:newURLSearchParams({<br />
action:"mailchimp_subscribe",<br />
email:email,<br />
nome:nome,<br />
cognome:cognome,<br />
stato:stato,<br />
}),<br />
})<br />
.then((response) =&gt; response.json())<br />
.then((data) =&gt; {<br />
if (data.success) {<br />
alert("Iscrizione avvenuta con successo!");<br />
} else {<br />
leterrorMessage="Errore nell'iscrizione: "+data.data.detail;<br />
if (data.data.errors &amp;&amp;data.data.errors.length &gt;0) {<br />
errorMessage+="\nDettagli degli errori:\n";<br />
data.data.errors.forEach((error) =&gt; {<br />
errorMessage+=`- ${error.field}: ${error.message}\n`;<br />
});<br />
}<br />
alert(errorMessage);<br />
}<br />
});<br />
}<br />
toggleSubmitButton= () =&gt; {<br />
if (this.privacyCheckboxTarget.checked) {<br />
this.submitButtonTarget.removeAttribute("disabled");<br />
} else {<br />
this.submitButtonTarget.setAttribute("disabled", "disabled");<br />
}<br />
};<br />
}</p>
<p>

Passo 5: Creare l’Handler per WP-AJAX

Nel file functions.php del tuo tema, aggiungi il seguente codice per gestire la richiesta AJAX:

</p>
<p><!--?php function mailchimp_subscribe() { if (!isset($_POST&#91;'email'&#93;) ||!isset($_POST&#91;'nome'&#93;) ||!isset($_POST&#91;'cognome'&#93;) ||!isset($_POST&#91;'stato'&#93;) ) { wp_send_json_error(array('detail'=&gt;'Dati mancanti nella richiesta.'));&lt;br ?--> wp_die();<br />
}<br />
$email = sanitize_email($_POST['email']);<br />
$nome = sanitize_text_field($_POST['nome']);<br />
$cognome = sanitize_text_field($_POST['cognome']);<br />
$stato = sanitize_text_field($_POST['stato']);<br />
$api_key = 'la_tua_api_key; // Informazioni sulle chiavi API: https://eepurl.com/hYsN2L<br />
$list_id = 'la_tua_lista_id'; //  Trova l’ID del tuo pubblico: https://eepurl.com/hYsTSv<br />
$data_center = substr($api_key, strpos($api_key, '-') + 1);<br />
$url = 'https://' . $data_center . '.api.mailchimp.com/3.0/lists/' . $list_id . '/members';<br />
$body = json_encode([<br />
'email_address'=&gt;$email,<br />
'status'=&gt;'subscribed',<br />
'merge_fields'=&gt;[<br />
'FNAME'=&gt;$nome,<br />
'LNAME'=&gt;$cognome,<br />
]);<br />
$response = wp_remote_post($url, [<br />
'headers'=&gt;[<br />
'Authorization'=&gt;'Basic '.base64_encode('user:'.$api_key),<br />
'Content-Type'=&gt;'application/json',<br />
],<br />
'body'=&gt;$body,<br />
]);<br />
if (is_wp_error($response)) {<br />
wp_send_json_error(array('detail'=&gt;'Errore durante la comunicazione con MailChimp.'));<br />
wp_die();<br />
}<br />
$response_body = json_decode(wp_remote_retrieve_body($response));<br />
if (isset($response_body-&gt;status) &amp;&amp; $response_body-&gt;status ==='subscribed') {<br />
wp_send_json_success(array('status'=&gt;'subscribed'));<br />
} else {<br />
$error_detail = isset($response_body-&gt;detail) ? $response_body-&gt;detail : 'Errore sconosciuto';<br />
$errors = isset($response_body-&gt;errors) ? $response_body-&gt;errors : [];<br />
wp_send_json_error(array('detail'=&gt;$error_detail,'errors'=&gt;$errors));<br />
}</p>
<p>wp_die();}<br />
add_action('wp_ajax_mailchimp_subscribe', 'mailchimp_subscribe');<br />
add_action('wp_ajax_nopriv_mailchimp_subscribe', 'mailchimp_subscribe');</p>
<p>

Passo 6: Integrare il Form e Stimulus nel Template

Nel template del tuo tema (ad esempio page.php o single.php), aggiungi il form di iscrizione e collega Stimulus:

</p>
<form class="form" data-mailchimp-target="form">
<div class="row">
<div class="col-3"><input name="nome" required="" type="text" placeholder="Nome*" /></div>
<div class="col-3"><input name="cognome" required="" type="text" placeholder="Cognome*" /></div>
<div class="col-3"><input name="email" required="" type="email" placeholder="Email*" /></div>
</div>
<div class="row">
<div class="col-9">
<div class="input-checkbox"><input name="privacy" required="" type="checkbox" data-mailchimp-target="privacyCheckbox" /><br />
<label for="privacy">Utilizzando questo form acconsenti all’utilizzo e alla conservazione dei<br />
tuoi dati<br />
da parte di questo sito web in accordo con la nostra normativa sulla privacy.<br />
* Campi obbligatori</label></div>
</div>
<div class="col-3"><button class="btn" disabled="disabled" type="submit" data-mailchimp-target="submitButton">Iscriviti</button></div>
</div>
</form>
<p>

Passo 7: Testare il Form

1. Vai alla pagina in cui hai inserito il form.
2. Inserisci un’email e clicca su “Subscribe”.
3. Verifica che l’email venga inviata correttamente a Mailchimp e che il feedback appropriato venga mostrato.

Conclusione

In questo tutorial, abbiamo visto come integrare Mailchimp in un form su WordPress utilizzando Stimulus e WP-AJAX. Questa configurazione ti permette di gestire le iscrizioni alla tua newsletter in modo asincrono, migliorando l’esperienza utente e ottimizzando la tua strategia di email marketing.