Integrazione del modulo di iscrizione AJAX Mailchimp

C’è un modo per integrare mailchimp semplice (un solo input di posta elettronica) con AJAX, quindi non c’è alcun aggiornamento della pagina e nessun reindirizzamento alla pagina predefinita di mailchimp.

Questa soluzione non funziona jQuery Ajax POST non funziona con MailChimp

Grazie

Non hai bisogno di una chiave API, tutto quello che devi fare è plopare il modulo generato da mailchimp standard nel tuo codice (personalizzare l’aspetto secondo necessità) e nelle forms “action” cambiare attributo post?u= to post-json?u= e poi alla fine dell’azione di moduli append &c=? per aggirare qualsiasi problema interdominio. Inoltre, è importante notare che quando si invia il modulo è necessario utilizzare GET anziché POST.

Il tuo tag form avrà un aspetto simile a questo di default:

 

cambialo per assomigliare a questo

 

Mail Chimp restituirà un object json contenente 2 valori: ‘result’ – questo indicherà se la richiesta ha avuto successo o meno (ho sempre visto solo 2 valori, “error” e “success”) e “msg” – un messaggio descrivendo il risultato.

Invio i miei moduli con questo bit di jQuery:

 $(document).ready( function () { // I only have one form on the page but you can be more specific if need be. var $form = $('form'); if ( $form.length > 0 ) { $('form input[type="submit"]').bind('click', function ( event ) { if ( event ) event.preventDefault(); // validate_input() is a validation function I wrote, you'll have to substitute this with your own. if ( validate_input($form) ) { register($form); } }); } }); function register($form) { $.ajax({ type: $form.attr('method'), url: $form.attr('action'), data: $form.serialize(), cache : false, dataType : 'json', contentType: "application/json; charset=utf-8", error : function(err) { alert("Could not connect to the registration server. Please try again later."); }, success : function(data) { if (data.result != "success") { // Something went wrong, do something to notify the user. maybe alert(data.msg); } else { // It worked, carry on... } } }); } 

Sulla base della risposta di gbinflames, ho mantenuto il POST e l’URL, in modo che il modulo continuasse a funzionare per quelli con JS distriggersto.

 

Quindi, usando .submit () di jQuery ha cambiato il tipo e l’URL per gestire i repsons JSON.

 $('.myform').submit(function(e) { var $this = $(this); $.ajax({ type: "GET", // GET & url for json slightly different url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?", data: $this.serialize(), dataType : 'json', contentType: "application/json; charset=utf-8", error : function(err) { alert("Could not connect to the registration server."); }, success : function(data) { if (data.result != "success") { // Something went wrong, parse data.msg string and display message } else { // It worked, so hide form and display thank-you message. } } }); return false; }); 

Dovresti utilizzare il codice lato server per proteggere il tuo account MailChimp.

Quanto segue è una versione aggiornata di questa risposta che utilizza PHP :

I file PHP sono “protetti” sul server in cui l’utente non li vede mai ma jQuery può ancora accedere e utilizzare.

1) Scarica l’esempio di PHP 5 jQuery qui …

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

Se hai solo PHP 4, scarica semplicemente la versione 1.2 di MCAPI e sostituisci il corrispondente file MCAPI.class.php sopra.

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) Seguire le istruzioni nel file Leggimi aggiungendo la chiave API e l’ID elenco al file store-address.php nelle posizioni corrette.

3) Si potrebbe anche voler raccogliere il nome degli utenti e / o altre informazioni. Devi aggiungere una matrice al file store-address.php usando le corrispondenti Merge Variables.

Ecco come appare il mio file store-address.php dove raccolgo anche il nome, il cognome e il tipo di email:

  $_GET['email'], 'FNAME' => $_GET['fname'], 'LNAME' => $_GET['lname'] ); // grab your List's Unique Id by going to http://admin.mailchimp.com/lists/ // Click the "settings" link for the list - the Unique Id is at the bottom of that page. $list_id = "123456a"; if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) { // It worked! return 'Success!  Check your inbox or spam folder for a message containing a confirmation link.'; }else{ // An error ocurred, return error message return 'Error:  ' . $api->errorMessage; } } // If being called via ajax, autorun the function if($_GET['ajax']){ echo storeAddress(); } ?> 

4) Crea il tuo modulo HTML / CSS / jQuery. Non è necessario essere su una pagina PHP.

Ecco qualcosa di simile al mio file index.html :

 
First Name: Last Name: email Address (required): HTML: Text:

Pezzi richiesti …

  • index.html costruito come sopra o simile. Con jQuery, l’aspetto e le opzioni sono infinite.

  • file store-address.php scaricato come parte degli esempi PHP sul sito Mailchimp e modificato con la tua API KEY e LIST ID . È necessario aggiungere altri campi facoltativi all’array.

  • File MCAPI.class.php scaricato dal sito Mailchimp (versione 1.3 per PHP 5 o versione 1.2 per PHP 4). Inseriscilo nella stessa directory del tuo store-address.php oppure devi aggiornare il percorso dell’URL all’interno di store-address.php in modo che possa trovarlo.

Sulla base della risposta di gbinflames, questo è ciò che ha funzionato per me:

Genera un modulo di iscrizione semplice elenco mailchimp, copia l’URL azione e il metodo (post) nel modulo personalizzato. Rinominare anche i nomi dei campi del modulo in tutto il capitale (nome = ‘EMAIL’ come nel codice mailchimp originale, EMAIL, FNAME, LNAME, …), quindi utilizzare questo:

  $form=$('#your-subscribe-form'); // use any lookup method at your convenience $.ajax({ type: $form.attr('method'), url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'), data: $form.serialize(), timeout: 5000, // Set timeout value, 5 seconds cache : false, dataType : 'jsonp', contentType: "application/json; charset=utf-8", error : function(err) { // put user friendly connection error message }, success : function(data) { if (data.result != "success") { // mailchimp returned error, check data.msg } else { // It worked, carry on... } } 

Usa il plugin jquery.ajaxchimp per ottenere ciò. È facile facile!

 

JavaScript:

 $(function() { $('form').ajaxChimp({ callback: function(response) { $('form .result').text(response.msg); } }); }) 

Per quanto riguarda questa data (febbraio 2017), sembra che mailchimp abbia integrato qualcosa di simile a ciò che gbinflames suggerisce nella propria forma generata da javascript.

Non hai più bisogno di ulteriori interventi ora che mailchimp convertirà il modulo in un ajax inviato quando javascript è abilitato.

Tutto quello che devi fare ora è semplicemente incollare il modulo generato dal menu di incorporamento nella tua pagina html e NON modificare o aggiungere alcun altro codice.

Questo semplicemente funziona. Grazie MailChimp!

Per chiunque cerchi una soluzione su uno stack moderno:

 import jsonp from 'jsonp'; import queryString from 'query-string'; // formData being an object with your form data like: // { EMAIL: '[email protected]' } jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => { console.log(err); console.log(data); }); 

D’altra parte, vi sono alcuni pacchetti in AngularJS che sono utili (in AJAX WEB):

https://github.com/cgarnier/angular-mailchimp-subscribe