AJAX Mailchimp kayıt formu entegrasyonu

Mailchimp simple'ı (bir e-posta girişi) AJAX ile entegre etmenin herhangi bir yolu var mı, böylece sayfa yenileme ve varsayılan mailchimp sayfasına yönlendirme yok.

Bu çözüm jQuery Ajax POST çalışmıyor MailChimp ile çalışmıyor

Teşekkürler

Bir API anahtarı gerekmez, yapmanız gereken tek şey koduna standart MailChimp oluşturulan formu (gerektiği gibi görünümünü özelleştirmek) plop ve formlar "eylem" özniteliği değişikliği olduğu post?u=için post-json?u=ve daha sonra formlar eylemin sonunda &c=?etki alanları arası sorunları aşmak için ekleyin . Ayrıca, formu gönderirken POST yerine GET kullanmanız gerektiğini unutmamak önemlidir.

Form etiketiniz varsayılan olarak şu şekilde görünecektir:

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

bunun gibi bir şeye benzeyecek şekilde değiştirin

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

Mail Chimp, 2 değer içeren bir json nesnesi döndürür: 'sonuç' - bu, isteğin başarılı olup olmadığını gösterir (yalnızca 2 değer, "hata" ve "başarılı" gördüm) ve 'msg' - bir mesaj sonucu açıklayan.

Formlarımı bu jQuery ile gönderiyorum:

$(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...
            }
        }
    });
}

Gbinflames'in cevabına dayanarak, POST ve URL'yi sakladım, böylece form JS kapalı olanlar için çalışmaya devam edecek.

<form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="XXXXXXXXXXXXXXXX">
  <input type="hidden" name="id" value="XXXXXXXXX">
  <input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required>
  <input type="submit" value="Send" name="submit" id="mc-embedded-subscribe">
</form>

Ardından, jQuery'nin .submit () öğesinin kullanılması, JSON yanıtlarını işlemek için türü ve URL'yi değiştirdi.

$('.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;
});

Sen olmalıdır senin MailChimp hesabını güvence altına almak için sunucu tarafı kodu kullanabilirsiniz.

Aşağıdaki, bu cevabın PHP kullanan güncellenmiş bir versiyonudur. :

PHP dosyaları, kullanıcının onları asla görmediği, ancak jQuery'nin erişip kullanabildiği sunucuda "güvenceye alınmıştır".

1) PHP 5 jQuery örneğini buradan indirin ...

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

Yalnızca PHP 4'e sahipseniz, MCAPI'nin 1.2 sürümünü indirin ve MCAPI.class.phpyukarıdaki ilgili dosyayı değiştirin .

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

2) API anahtarınızı ve Liste Kimliğinizi store-address.phpuygun konumlarda dosyaya ekleyerek Benioku dosyasındaki talimatları izleyin .

3) Kullanıcılarınızın adını ve / veya diğer bilgilerini de toplamak isteyebilirsiniz. store-address.phpKarşılık gelen Birleştirme Değişkenlerini kullanarak dosyaya bir dizi eklemeniz gerekir .

İşte Ya benim olduğunu store-address.phpben de ilk isim, soyadı ve e-posta türünü toplamak nerede gibi dosya görünüyor:

<?php

function storeAddress(){

    require_once('MCAPI.class.php');  // same directory as store-address.php

    // grab an API Key from http://admin.mailchimp.com/account/api/
    $api = new MCAPI('123456789-us2');

    $merge_vars = Array( 
        '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!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    }else{
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
    }

}

// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>

4) HTML / CSS / jQuery formunuzu oluşturun. Bir PHP sayfasında olması gerekli değildir.

İşte dosyamın nasıl index.htmlgöründüğü gibi:

<form id="signup" action="index.html" method="get">
    <input type="hidden" name="ajax" value="true" />
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
    Text: <input type="radio" name="emailtype" value="text" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#signup').submit(function() {
        $("#message").html("<span class='error'>Adding your email address...</span>");
        $.ajax({
            url: 'inc/store-address.php', // proper url to your "store-address.php" file
            data: $('#signup').serialize(),
            success: function(msg) {
                $('#message').html(msg);
            }
        });
        return false;
    });
});
</script>

Gerekli parçalar ...

• index.html yukarıdaki gibi oluşturulmuştur. JQuery ile görünüm ve seçenekler sonsuzdur.

• Mailchimp sitesinde PHP örneklerinin bir parçası olarak indirilen ve API KEY ve LIST ID'nizle değiştirilen store-address.php dosyası . Diğer isteğe bağlı alanlarınızı diziye eklemeniz gerekir.

• Mailchimp sitesinden indirilen MCAPI.class.php dosyası (PHP 5 için sürüm 1.3 veya PHP 4 için sürüm 1.2). Mağaza-adresiniz.php ile aynı dizine yerleştirin veya mağaza-adresi.php içindeki url yolunu bulabilmesi için güncellemelisiniz.

Modern bir yığında çözüm arayan herkes için:

import jsonp from 'jsonp';
import queryString from 'query-string';

// formData being an object with your form data like:
// { EMAIL: 'emailofyouruser@gmail.com' }

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

Gbinflames'in cevabına göre, bu benim için işe yaradı:

Basit bir mailchimp listesi kayıt formu oluşturun, eylem URL'sini ve yöntemi (postayı) özel formunuza kopyalayın. Ayrıca form alan adlarınızı tamamen büyük olacak şekilde yeniden adlandırın (ad = 'EMAIL' orijinal mailchimp kodunda olduğu gibi, EMAIL, FNAME, LNAME, ...), ardından şunu kullanın:

      $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...
          }
      }

Bu tarihe (Şubat 2017) gelince, mailchimp'in gbinflames'in önerdiklerine benzer bir şeyi kendi javascript oluşturulmuş formlarına entegre ettiği görülüyor.

Mailchimp, javascript etkinleştirildiğinde formu gönderilen bir ajax'a dönüştüğü için artık başka bir müdahaleye ihtiyacınız yok.

Şimdi yapmanız gereken tek şey, gömme menüsünden oluşturulan formu html sayfanıza yapıştırmak ve başka herhangi bir kodu değiştirmek veya EKLEMEMEK.

Bu basitçe çalışır. Teşekkürler MailChimp!

Bunu başarmak için jquery.ajaxchimp eklentisini kullanın . Çok kolay!

<form method="post" action="YOUR_SUBSCRIBE_URL_HERE">
  <input type="text" name="EMAIL" placeholder="e-mail address" />
  <input type="submit" name="subscribe" value="subscribe!" />        
  <p class="result"></p>
</form>

JavaScript:

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

Öte yandan, AngularJS'de yardımcı olan bazı paketler vardır (AJAX WEB'de):

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