Cara membuat formulir permintaan produk WooCommerce menggunakan plugin khusus

Terakhir diedit oleh Vinci pada 25 Mei 2022.

Pada artikel terakhir, saya menulis tentang menyiapkan formulir permintaan produk WooCommerce menggunakan plugin pihak ketiga yang ada. Ada banyak plugin WordPress untuk memiliki formulir permintaan di situs WordPress.

Sebagai pengembang, kami dapat membuat plugin khusus dari formulir permintaan produk WooCommerce. Ringan ini akan baik untuk pemulihan dan pemeliharaan dan yang paling penting menyenangkan.

Plugin tiga arah menawarkan paket besar dengan kemampuan dan fitur yang besar. Mereka memiliki pembuat formulir, pembuat template email, dan semuanya.

Untuk memiliki formulir aplikasi multi-bidang, dapat dengan mudah disesuaikan tanpa paket pihak ketiga. Ini membantu untuk memiliki kode kecil dan manajemen diri adalah yang terbaik.

Jika Anda ingin tahu cara membuat formulir kontak WooCommerce dengan plugin 3 pihak, lihat artikel terkait terbaru saya.

Sematkan formulir kontak WooCommerce

Langkah-langkah untuk membuat plugin formulir permintaan produk WooCommerce

  1. Buat daftar dan file plugin formulir kontak.
  2. Mendesain templat formulir permintaan produk WooCommerce.
  3. Buat plugin untuk aset CSS dan JavaScript.
  4. Unduh Templat formulir ke konten halaman Anda.
  5. Sejajarkan aset plugin WordPress.
  6. Kirim permintaan produk melalui AJAX WordPress dalam formulir pengiriman.
  7. Kaitkan wp_ajax untuk mengirim email permintaan produk.

Buat daftar dan file plugin formulir kontak

Buat direktori bernama “woocommerce-contact-form” di daftar plugin WordPress.

<wordpress-application-root>/wp-content/plugins/

Kemudian, buat file woocommerce-contact-form.php dengan header plugin berikut di dalamnya. Header harus memiliki nama plugin, URI, penulis, dan detail lainnya.


/*
 Plugin Name:  WooCommerce Contact Form
 Plugin URI:   https://phppot.com
 Description:  A simple custom enquiry form plugin to a WooCommerce site. It has name, email and message fields to collect data from the customers.
 Version:      1.0
 Author:       Vincy
 Author URI:   https://phppot.com
 */

Rancang formulir permintaan produk WooCommerce

Buat file template di dalam daftar plugin <woocommerce-contact-form>/templates/contact-form.php.

Masukkan HTML ini ke dalam file untuk menampilkan formulir kontak dengan bidang nama, email, dan pesan.

File template ini diunggah ke halaman produk menggunakan hook filter WordPress melalui plugin ini.


<h3>Product enquiry</h3>
<div id="woocommerce-contact-form">
	<form method="post" id="frmContactForm" action="">
		<div class="display-flex">
			<input name="customer_name" id="customer_name" placeholder="Name" /><input
				name="customer_email" id="customer_email" placeholder="Email" />
		</div>
		<div>
			<textarea name="customer_message" id="customer_message"
				placeholder="Enquire seller about order, product.."></textarea>
		</div>
		<div>
			<input type="submit" name="send_mail" class="btn-send" value="Send Enquiry" />
		</div>
		<div id="response"></div>
	</form>
</div>

Buat aset plugin

Plugin ini menggunakan aset CSS dan JavaScript sederhana. CSS menawarkan gaya minimal untuk membuat formulir permintaan relevan dengan tema toko apa pun.

File CSS ini akan berguna jika Anda ingin mengubah subjek formulir permintaan produk WooCommerce.


#woocommerce-contact-form {
	width: 500px;
	border: #CCC 1px solid;
	padding: 25px 5px 25px 25px;
	border-radius: 3px;
}

#woocommerce-contact-form input {
	border: #CCC 1px solid;
	width: 50%;
	padding: 10px;
	margin: 15px 20px 15px 0px;
	border-radius: 3px;
}

#woocommerce-contact-form textarea {
	border: #CCC 1px solid;
	width: 96%;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 10px;
	margin: 15px 20px 15px 0px;
}

.display-flex {
	display: flex;
}

#woocommerce-contact-form input.btn-send {
	color: #FFF;
	background: #232323;
	border-radius: 3px;
	border: #000 1px solid;
}

#response {
	display: none;
}

Validasi formulir permintaan JavaScript dan kirimkan melalui AJAX

Script ini menggunakan jQuery untuk memeriksa validitas formulir dan mengirim data yang dikirim melalui AJAX.

Semua bidang harus dimasukkan untuk mengirimkan pertanyaan produk dari halaman WooCommerce.

Setelah kondisi dikembalikan dengan benar, jQuery AJAX membuat serial data formulir dan mengirimkannya ke server.

Semua respons sisi klien dan server dikirim ke UI menggunakan jQuery .teks ().


$(document).ready(function(e) {
	// WooCommerce product enquiry form submit event handler
	$("#frmContactForm").on('submit',  function(e) {
		e.preventDefault();
		var name = $('#customer_name').val();
		var email = $('#customer_email').val();
		var message = $('#customer_message').val();
		// Validate all fields in client side
		if (email  ==  "" || message  == "" || name == "") {
			$("#response").show();
			$("#response").text("All fields are required.");
		} else {
			$("#response").hide();
			$('.btn-send').hide();
			$('#loader-icon').show();
			
			// Post form via wp-ajax
			$.ajax({
				url: "/wordpress/send-contact-email/",
				type: "POST",
				data: $("#frmContactForm").serialize(),
				success: function(response) {
					$("#response").show();
					$('#loader-icon').hide();
					if (!response) {
						$('.btn-send').show();
						$("#response").html("Problem occurred.");
					} else {
						$('.btn-send').hide();
						$("#response").html("Thank you for your message.")
					};
				},
				error: function() { }
			});
		}
	});
});

Skrip AJAX menunjuk ke URL dengan titik akhir wp_ajax melalui htaccess. Digambar.

Parameter tindakan send_contact_email mengaitkan filter tindakan wp_ajax ke dalam file plugin.


# BEGIN Shop
<IfModule mod_rewrite.c>
RewriteRule send-contact-email/ /wordpress/wp-admin/admin-ajax.php?action=send_contact_email [L,QSA]</IfModule>
# END Shop

File Plugin Formulir Permintaan Produk WooCommerce

Ini adalah file utama yang menghubungkan tindakan yang diperlukan dan filter pengembalian WordPress. Callback ini seharusnya melakukan hal berikut dengan mengaktifkan plugin ini.

  1. Unduh Templat formulir kontak menggunakan kait filter “the_content”.
  2. Antrekan file form.css dan form.js yang dibuat untuk formulir permintaan produk WooCommerce ini. (Juga mengantri jalur CDN jQuery).
  3. Kait wp_ajax_nopriv_* Untuk berlari send_contact_email Hubungi kami dengan mendengarkan permintaan AJAX.

partikel untuk objek langsung load_contact_form Membaca fungsi konten template menggunakan fungsi file_get_contents () PHP. Menambahkan konten ini ke konten halaman secara bersyarat.

Sebelum menambahkan formulir permintaan produk WooCommerce, ia memeriksa untuk melihat apakah itu adalah halaman produk. jika begitu, adalah_produk() Booley kembali Itu benar, nyata.


<?php 

function load_contact_form($contactHTML) {
    
    // Load the contact form on a single product page
    if ( is_product() ){
        $template_path = plugin_dir_path( __FILE__ ) . 'templates/contact-form.php';
        $contactHTML .= file_get_contents( $template_path);
        
    }
    return $contactHTML;
    
}
// add filter to hook 'the_content' with a plugin functions.
add_filter('the_content', 'load_contact_form');

/**
 * Enqueues scripts and styles for front end.
 *
 * @return void
 */
function woocommerce_contact_form_styles()
{
    if (is_product()) {
        wp_enqueue_style('contact-form-style', plugin_dir_url( __FILE__ ) . 'assets/form.css', array(), null);
        wp_enqueue_script('contact-form-jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null);
        wp_enqueue_script('contact-form-script', plugin_dir_url( __FILE__ ) . 'assets/form.js', array(), null);
    }
}
add_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles');


Kaitkan tindakan wp_ajax dengan email panggilan saat mengirim panggilan balik

Kode berikut adalah bagian dari woocommerce_contact_form.php File plugin mendefinisikan respons panggilan send_contact_email().

Plugin formulir permintaan produk WooComerce memiliki filter tindakan dan panggilan balik. Dipanggil ketika menerima permintaan wp_ajax dari alamat berikut.

/wordpress/wp-admin/admin-ajax.php?action=send_contact_email.

Membuat parameter wp_mail () untuk mengirim permintaan produk ke manajer toko atau penjual. partikel untuk objek langsung $ Menyimpan alamat penerima.

Membangun isi surat dengan data yang dikirim melalui formulir permintaan produk WooCommerce.

Menggunakan wp_mail () adalah cara sederhana untuk mengirim email melalui WordPress. Ini seperti surat PHP yang memiliki kode satu baris untuk mengirim email. Anda dapat mengkonfigurasi SMTP untuk mengirim email melalui WordPress.



function send_contact_email()
{
    $customerName = filter_var($_POST["customer_name"], FILTER_SANITIZE_STRING);
    $customerEmail = filter_var($_POST["customer_email"], FILTER_SANITIZE_STRING);
    $customerMessage = filter_var($_POST["customer_message"], FILTER_SANITIZE_STRING);
    
    $to = 'RECIPIETNT EMAIL HERE';
    $subject="Product enquiry";
    $body = 'The customer details: <br/><br/>';
    
    if(!empty($customerName)) {
        $body = 'Customer Name:' . $customerName . '<br/>';
        $body .= 'Customer Email:' . $customerEmail . '<br/>';
        $body .= 'Customer Message:' . '<br/>';
        $body .= $customerMessage . '<br/>';
    }
    
    $headers = array('Content-Type: text/html; charset=UTF-8');
    
    $emailSent = wp_mail( $to, $subject, $body, $headers );
    
    print $emailSent;
    exit;
}
add_action("wp_ajax_nopriv_send_contact_email", "send_contact_email");


Halaman produk WooCommence dengan formulir kontak

Dengan semua prasyarat dan pengkodean lengkap dari plugin khusus, saatnya untuk mengaktifkannya.

Buka admin WordPress dan navigasikan melaluinya Plugin-> Plugin Terpasang Menggunakan menu di sebelah kiri

Anda mungkin melihat plugin “Formulir Kontak WooCommerce” di daftar yang diinstal. Aktifkan plugin dan buka halaman produk toko.

Lihat tangkapan layar yang ditampilkan di awal artikel. Menampilkan formulir permintaan produk WooCommerce di halaman produk.

Hasil

Oleh karena itu, kami telah membuat plugin untuk formulir permintaan produk WooCommerce dengan kode sederhana. Jika Anda ingin memiliki penyesuaian dengan plugin ini, beri tahu saya di bagian komentar.

Mari kita lihat cara lain untuk menampilkan formulir kontak di situs WooCommerce di artikel berikut.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.