নতুন WordPress developer দের মধ্যে সব সময়ই Ajax নিয়ে সমস্যায় পড়তে দেখা যায়, সবচেয়ে বেশি সমস্যায় পড়ে তখনই যখন বলা হয় Page refresh ছাড়া একটি form dynamic করতে। এই লিখাটিতে আমি একটি form থেকে page refresh ছাড়া কিভাবে মেইল পাঠানো যায় তা দেখানোর চেষ্টা করবো।

 

What is AJAX

AJAX = Asynchronous JavaScript And XML. সহজ বাংলায় বলতে গেলে Ajax হচ্ছে এমন একটি মাধ্যম যার সাহায্যে আপনি JavaScript ব্যবহার করে Backend server এ HTTP request পাঠিয়ে নির্দিষ্ট script টি execute করে সেটির Output response হিসেবে আবার Frontend এ নিয়ে আসা যায়। আরও সহজ ভাবে যদি বলি JavaScript থেকে PHP(or any server side language) এর সাথে যোগাযোগ করার একটি মাধ্যম।

 

How really works?

ধরুন আমাদের theme এ একটি page template আছে যেটি page-contact.php এই ফাইলের কোড গুলি দেখতে নিচের মত হবে।

<?php
/**
 * Template Name: Contact Page
 */
get_header();
?>

<form id="contact-form">
	<input type="text" name="name">
	<input type="email" name="email">
	<textarea name="message"></textarea>
	<input type="submit" value="Send">
	<p id="contact-form-message"></p>
</form>

<?php
get_footer();

আমাদের JavaScript ফাইল টি দেখতে নিচের মত হবে, আমি এখানে এই jQuery Library টি ব্যবহার করেছি form data কে Object এ রূপান্তর করার জন্য।
নিচের url variable টি খুবই গুরুত্বপূর্ণ, এখানে আপনাকে আপনার domain এর ধরন অনুযায়ী URL দিতে হবে।, আমি http://wptest.test থেকে WordPress টি চালাচ্ছি তাই আমার URL http://wptest.test/wp-admin/admin-ajax.php এমন দিয়েছি। আপনি চাইলে এটিকে wp localize script ব্যবহার করে dynamic করতে পারেন।
formData.action = "contact_send_email"; এই অংশটিও খুবই গুরুত্বপূর্ণ, এখানে আমরা action টি বলে দিচ্ছি, যেটি পরবর্তীতে action hook এর শেষ অংশ হিসেবে ব্যবহৃত হবে।

(function($){

	$('form#contact-form').submit(function(event){
		event.preventDefault();
		var formData = $(this).serializeObject();
		formData.action = "contact_send_email";
		var url = "http://wptest.test/wp-admin/admin-ajax.php";
		$.ajax({
			url: url,
			method: "POST",
			data: formData,
			success: function(response){
				$('#contact-form-message').html(response.message);
			}
		});
	});

})(jQuery);

এখন PHP আংশ, আমি আমার theme এর ভিতর এই location এ একটি ফাইল তৈরি করেছি, /inc/ajax-hook.php যেটি functions.php তে require করা আছে। এখানে লক্ষ করবেন action hook এর শেষ অংশে _contact_send_email ব্যবহার করেছি যেটি JavaScript এ form data এর সাথে বলে দিয়েছিলাম। এর মাধ্যমে ওই HTTP request এই function টিকে execute করবে।

<?php
/**
 * Ajax Hook
 */
function contact_send_email_callback(){
	$response = [];
	$form_data = $_POST;

	$to = 'sendto@example.com';
	$subject = 'Ajax email send learning';
	$body = 'Name: '.$form_data['name'].'<br>';
	$body .= 'Email: '.$form_data['email'].'<br>';
	$body .= 'Message: '.$form_data['message'];
	$headers = array('Content-Type: text/html; charset=UTF-8');

	$response['success'] = wp_mail($to, $subject, $body, $headers);

	$response['message'] = "Mail has been sent successfully.";
	wp_send_json($response);
	wp_die();
}
add_action('wp_ajax_contact_send_email', 'contact_send_email_callback');
add_action('wp_ajax_nopriv_contact_send_email', 'contact_send_email_callback');

এখানে আমি লিখাটিকে সহজ এবং ছোট করার স্বার্থে অনেক কিছুই বাদ দিয়ে গেছি এবং এটি সধু মাত্র নতুন দের জন্য লিখা। বিস্তারিত জানতে অবশ্যই নিচের লিঙ্ক গুলু দেখুন।

Reference

https://codex.wordpress.org/AJAX_in_Plugins
https://github.com/macek/jquery-serialize-object
https://codex.wordpress.org/Function_Reference/wp_localize_script