سلام دوستان. در این مقاله آموزشی قصد دارم نحوه ساخت فرم خبرنامه Mailchimp بدون افزونه و به صورت ajax رو آموزش بدم. ( MailChimp ارائه دهنده سرویس خبرنامه هستش ) قبل از شروع آموزش بهتره برای کسانی که آشنایی با MailChimp ندارند، توضیحی درباره این سرویس و نحوه عضویت در آن رو توضیح بدم.

MailChimp

MailChimp

MailChimp یک وبسایت ارائه دهنده سرویس ارسال ایمیل انبوه بسیار قوی و حرفه ای در عین حال ساده هستش. عضویت در این سرویس رایگان است. برای عضویت در این وبسایت این لینک را باز کنید و بعد با وارد کردن ایمیل، نام کاربری و رمز عبور دکمه Get Started! را بزنید.

بعد از زدن دکمه، شما با صفحه ای به شکل زیر مواجه خواهید شد. پس باید ایمیل خود را برای تائید حساب کاربری بررسی کنید. حالا ایمیل خود را بررسی کنید.

باید یک ایمیل از طرف MailChimp برای شما آمده شده باشد. مثل عکس زیر:

 

ایمیل را باز کرده و برروی دکمه Active Account کلیک کنید. مثل عکس زیر:

وقتی بر روی دکمه کلیک کنید صفحه جدید براتون باز میشه که ممکنه شبیه به عکس زیر باشه:

پس بر روی دکمه I’m Not A Robot کلیک کنید (برای تائید کردن اینکه شخص واقعی هستید) بعد از زدن دکمه یک سری اطلاعات شخصی ازتون میپرسه، مقدارشو پر کنید و دکمه Continue رو بزنید تا برسید به پرسش های آخر. سپس شما وارد داشبورد پنل مدیریت می شوید. حالا باید یک لیست برای اعضای خبرنامه بسازید. از منو بالا بر روی Lists کلیک کنید.

میبینید که یک لیستی که نامشو قبلا تعیین کردید وجود داره. میتونید از این استفاده کنید و یا لیست جدید ایجاد کنید. حالا نوبت به پیدا کردن Id لیست و ساخت Api برای ادامه آموزش هست.

پیدا کردن API KEY و LIST ID در MailChimp

در قسمت داشبورد بر روی نام خود (بالا سمت راست) کلیک کنید و منو account رو انتخاب کنید.

سپس از منو Extras گزینه API Keys رو انتخاب کنید.

حالا در صفحه جدیدی که باز میشه روی دکمه  Create a Key  کلیک کنید. کلید API ساخته میشود و به لیست کلید های شما اضافه می شود. حالا کافیه  مقدار Key رو کپی کنید و نگه دارید چون توی کد میخواییم ازش استفاده کنیم.

پیدا کردن List ID

از منو بالا بر روی آیتم Lists کلیک کنید.

در صفحه جدید شما باید نام لیست یا لیست هایی که ساختید رو ببینید. حالا باید روی فلش پایین status کلیک کنید و گزینه Settings رو انتخاب کنید. مثل عکس زیر:

در صفحه جدیدی که برای شما باز میشه روی آیتم “List name & defaults” کلیک کنید.

در صفحه جدیدی که باز میشه شما می تونید نام لیست و سایر اطلاعاتش رو همراه با آی دی لیست ببینید. ID لیست طبق عکس زیر نمایش داده میشه.

می توانید این مقدار رو کپی کنید و نگه داشته باشید. چون میخواییم توی کد ازش استفاده کنیم.

در ادامه این مقاله شما می توانید بدون اینکه افزونه ای نصب کنید یک فرم خبرنامه ایجاد کنید و به صورت ajax به اکانت MailChimp وصل کرده و عملیات افزودن کاربر را انجام دهید.

توجه: این آموزش بر روی پوسته twentyseventeen تست شده و به درستی کار کرده است.

ساخت فرم HTML

در ابتدا فرم HTML رو ایجاد می کنیم. برای این کار کد زیر رو جایی که میخواهید فرم نمایش داده بشه بگذارید. برای مثال در Footer.php و یا در ابزارک. من این کد رو داخل ابزارک متن و ستون کناری گذاشتم.

<div class="subscribe-box">
<h3>عضویت در خبرنامه</h3>
<div class="clearfix"></div>
<p>با عضویت در این خبرنامه هر هفته آخرین مطالب برای شما ارسال خواهد شد.</p>
<div class="clearfix"></div>
<form class="subscribe"><input class="email" name="email" type="email" placeholder="ایمیل خود را وارد کنید"><button type="submit">عضویت</button></form>
<div class="newsletter-resp"></div>
</div>

 

حالا ابزارک را ذخیره کنید و صفحه سایت رو رفرش کنید. اگر از پوسته twentyseventeen استفاده کنید فرمی شبیه زیر را خواهید دید.

این فرم عضویت اصلا زیبا نیست. پس بهتره با کمی Css فرم رو شکیل تر کنیم. پس این کد رو به فایل style.css و یا فایل rtl.css اضافه کنید:

.subscribe-box {
    background: #F1F2F6;
    padding: 20px;
    border-radius: 5px;
}

.subscribe-box h3 {
    text-align: center;
    border-bottom: 3px solid #1CBB9B;
    margin: 0 0 10px;
    padding: 0 0 10px;
    font-size: 19px;
    font-weight: 100 !important;
}

.subscribe-box input {
    background: #fff;
    border: 0;
    padding: 10px 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.subscribe-box button {
    padding: 7px 0;
    font-size: 17px;
    width: 100%;
    background: #1CBB9B;
    font-family: 'webYekan' !important;
    font-weight: 100 !important;
}

حالا فایل را ذخیره کنید و مجدد صفحه رو رفرش کنید. باید فرمی شبیه به زیر داشته باشید.

بسیار خب! کار ما با قسمت ظاهری فرم تموم شد. حالا نوبت به نوشتن کد سرور هستش.

کد ajax فرم خبرنامه MailChimp

دوستان در این قسمت کد ajax برای فرم خبرنامه رو قرار میدم. شما این کد رو باید داخل یک فایل با پسوند js قرار بدید. فقط اگر فایل جدیدی برای اینکار ایجاد میکنید یادتون نره که داخل ساخت فراخوان کنید. برای فراخوانی هم می تونید از مقاله wp_enqueue در وردپرس کمک بگیرید. یک فایل به نام ajax.js در پوسته خود ایجاد کنید (در هر پوشه ای که دوست دارید.) و کد زیر رو داخلش قرار بدید:

jQuery(".subscribe").submit(function(e) {
    e.preventDefault(), jQuery(".newsletter-resp").show(), jQuery(".newsletter-resp").removeClass("error"), jQuery(".newsletter-resp").css("color", "#fff"), jQuery(".newsletter-resp").text("در حال بررسی اطلاعات. لطفا صبر کنید "), jQuery.ajax({
        type: "POST",
        url: ajax_subscribe.ajaxurl,
        data: {
            action: "subscribe_user",
            email: jQuery(".subscribe-box .email").val()
        },
        success: function(e) {
            var r = JSON.parse(e);
            "false" == r.error ? (jQuery(".newsletter-resp").addClass("success"), jQuery(".newsletter-resp").removeClass("error"), jQuery(".newsletter-resp").text("کاربر گرامی، ایمیلی برای تائید عضویت برای شما ارسال شد.")) : (jQuery(".newsletter-resp").addClass("error"), jQuery(".newsletter-resp").removeClass("success"), jQuery(".newsletter-resp").text(r.error))
        },
        error: function(e) {
            jQuery(".newsletter-resp").addClass("error"), jQuery(".newsletter-resp").removeClass("success"), jQuery(".newsletter-resp").text("خطایی در هنگام ارتباط با سرور به وجود آمده است. لطفا دوباره امتحان کنید!")
        }
    })
})

فایل رو ذخیره می کنیم. در این کد زمانی که بر روی دکمه عضویت کلیک بشه یک سری کدها اجرا میشه. در ابتدا مقدار “در حال بررسی اطلاعات لطفا صبر کنید” به انتهای فرم اضافه میشه و بعد مقادیر فرم با اکشن subscribe_user ارسال میشه. فقط نکته ای که در کد داره این هستش که url رو برابر با  ajax_subscribe.ajaxurl قرار دادیم و admin_ajax.php قرار ندادیم. url که تحت عنوان ajax_subscribe.ajaxurl در اینجا قرار دادم رو در داخل فایل functions.php تعریف کردم و شما هم می بایست کد زیر رو به functions.php اضافه کنید:

function wpschool_ajaxs() {
    wp_enqueue_script( 'ajaxfile', get_template_directory_uri() . '/assets/js/ajax.js', array(), '0.1', true ); // مسیر فایل ajax.js که ساختیم
    wp_localize_script( 'ajaxfile', 'ajax_subscribe' , array( 'ajaxurl' => admin_url( 'admin-ajax.php' ))); // ساخت url
}
add_action( 'wp_enqueue_scripts', 'wpschool_ajaxs' );

و بعد فایل رو ذخیره کنید. حالا ما کد قسمت ajax رو هم نوشتیم و باید کد php برای عملیات افزودن کاربر به لیست خبرنامه رو بنویسیم.

کد php فرم خبرنامه MailChimp

فایل functions.php رو باز کنید. به انتهای فایل بروید و این کد رو بهش اضافه کنید:

function mc_checklist($email, $debug, $apikey, $listid, $server) {
    $userid = md5($email);
    $auth = base64_encode( 'user:'. $apikey );
    $data = array(
        'apikey'        => $apikey,
        'email_address' => $email
        );
    $json_data = json_encode($data);
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://'.$server.'.api.mailchimp.com/3.0/lists/'.$listid.'/members/' . $userid);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json',
        'Authorization: Basic '. $auth));
    curl_setopt($ch, CURLOPT_USERAGENT, 'PHP-MCAPI/2.0');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);
    $result = curl_exec($ch);
    if ($debug) {
        var_dump($result);
    }
    $json = json_decode($result);
    return $json->{'status'};
}

این کد توسط MailChimp ارائه شده و برای بررسی لیست خبرنامه می باشد و دارای چندین آرگومان هستش که در ادامه بهتون توضیح میدم این آرگومان ها با چه مقداری پر می شوند. حالا کد زیر رو به ادامه کد قبلی اضافه می کنیم.

add_action( 'wp_ajax_nopriv_subscribe_user', 'subscribe_user' );
add_action( 'wp_ajax_subscribe_user', 'subscribe_user' );
function subscribe_user() {
    if( ! isset( $_POST ) || empty( $_POST )) {
        header( 'HTTP/1.1 400 Empty POST Values' );
        echo 'Could Not Verify POST Values.';
        exit;
    }
    $email = sanitize_text_field($_POST['email']);
        if(!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL) === false){
        $apiKey = 'Your_APIKey'; // کد api که کپی کردید را قرار دهید
        $listID = 'You_ListID'; // کد ID لیست که کپی کردید را قرار دهید
        $memberID = md5(strtolower($email));
        $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
        $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;
        $sub_status .= mc_checklist($email,0,$apiKey,$listID,$dataCenter);
        if ( $sub_status !==”subscribed”) {
        $json = json_encode([
            'email_address' => $email,
            'status'        => 'pending',
        ]);
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
        curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_TIMEOUT, 10);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
        $result = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        if ($httpCode == 200) {
            $error .= "false";
        } else {
            switch ($httpCode) {
                case 214:
                     $error .= 'شما در حال حاضر عضو خبرنامه هستید!';
                    break;
                default:
                     $error .= 'خطایی هنگام عضویت در خبرنامه رخ داده است! لطفا دوباره امتحان کنید.';
                    break;
            }
             $error .= $msg;
        }
        }
        else {
          $error .= 'شما در حال حاضر عضو خبرنامه هستید!';  
        }
    }
    else{
         $error .= 'لطفا یک آدرس ایمیل صحیح وارد کنید!';
    }    
    
        $resp = array('error' => $error);
    echo json_encode($resp);
    wp_die();
}

به جای Your_APIKey کد api که کپی کردید را قرار دهید و به جای You_ListID هم کد ID لیست را قرار دهید.

در کد بالا با اکشن wp_ajax_nopriv_subscribe_user و wp_ajax_ subscribe_user ایجیکس رو وصل کردیم به فانکشن مورد نظر. تفاوت 2 اکشن بالا این است:

اکشن ‘wp_ajax_nopriv_subscribe_user برای کاربران غیرعضو استفاده می شود و به آنها اجازه دسترسی به فانکشن را می دهد

اکشن wp_ajax_subscribe_user فقط برای کاربران عضو است و دسترسی کاربران عضو به فانکشن مجاز است.

ما در این آموزش اجازه دسترسی هم به کاربران عضو و هم کاربران غیرعضو را داده ایم. اگر بخواهید فقط یک دسته از این کاربران مجاز باشند کافیه اکشن دیگری را حذف کنید.

در ادامه آموزش، ما فانکشن رو به ایجکس متصل کردیم و مقدار ایمیل را گرفتیم و در متغیر $email قرار دادیم و بعد کلید API و آی دی لیستی که میخواهید کاربران به آن اضافه بشوند را داخل متغیرهای $apiKey و $listID قرار دادیم.

سپس فانکشن mc_checklist را صدا زدیم و مقدار ایمیل و کلید API و آی دی لیست رو بهش دادیم. این فانکشن بررسی می کند که ایمیل ثبت شده در آن لیست وجود دارد یا خیر. اگر وجود داشت پیغام ” شما در حال حاضر عضو خبرنامه هستید” نمایش داده می شود، در غیر این صورت ایمیل به صورت pending’ اضافه می شود و بعد از تائید کاربر عضویت انجام می شود.

آموزش امروز مدرسه وردپرس تحت عنوان ساخت فرم خبرنامه MailChimp بدون افزونه و به صورت ajax به پایان رسید.

امیدوارم که لذت برده باشید

موفق باشید

کلمات کلیدی: ،

6 دیدگاه برای “ساخت فرم خبرنامه MailChimp بدون افزونه و به صورت ajax

  • Morteza P
    - ۲۳ آذر , ۱۳۹۶

    سلام
    یه سوال در مورد تم فارست داشتم
    شما چطور فرم مالیات w-8 رو پر کردید میشه راهنمایی کنید.

  • مهدی
    - ۹ اردیبهشت , ۱۳۹۷

    سلام . عضویت در خبرنامه خودتون رو که در بالای فوتر وجود داره میخواستم ببینم با چه نوع سیستمی ایجاد کردید ؟ به صورت دستی یا افزونه ؟
    اینکه برای ارسال خبرنامه هاتون به ایمیل از چه سرویس و شرکتی استفاده می کنید ؟
    ممنون .

    • سیروس
      - ۱۰ اردیبهشت , ۱۳۹۷

      سلام دوست عزیز ،
      خبرنامه رو به صورت دستی خودمون طراحی و پیاده سازی کردیم.
      از سرویس mailchimp استفاده کردیم ، با استفاده از همین کدی که در این مقاله عنوان شده .

  • سامان
    - ۱۰ مرداد , ۱۴۰۰

    سلام وقت بخیر. این کدهارو بروز نمی کنید؟

    • سیروس
      - ۳۰ مهر , ۱۴۰۰

      متاسفانه فرصت بروزرسانی مطالب رو ندارم

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --