Oleh Vinci terakhir diubah pada 11 Juli 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 pertanyaan di situs WordPress.
Sebagai pengembang, kami dapat membuat plugin formulir permintaan produk WooCommerce khusus. Ringan, bagus untuk pemulihan dan perawatan, dan yang terpenting, menyenangkan.
Plugin pihak ketiga menawarkan paket besar dengan kemampuan dan fitur yang sangat besar. Mereka memiliki pembuat formulir, pembuat template email, dan semuanya.
Untuk memiliki formulir aplikasi dengan beberapa bidang, dapat dengan mudah disesuaikan tanpa paket pihak ketiga. Ini membantu untuk memiliki kode kecil dan dapat dikelola yang terbaik.
Jika Anda ingin tahu cara membuat formulir kontak WooCommerce dengan plugin 3 pihak, lihat artikel terkait terbaru saya.
Langkah-langkah untuk membuat plugin formulir permintaan produk WooCommerce
- Buat direktori dan file ekstensi formulir kontak.
- Mendesain templat formulir permintaan produk WooCommerce.
- Buat aset CSS dan JavaScript plugin.
- Muat Templat formulir ke dalam konten halaman.
- Antrean aset plugin WordPress.
- Kirim permintaan produk melalui WordPress AJAX di formulir pengiriman.
- Kaitkan wp_ajax untuk mengirim email permintaan produk.
Buat direktori dan file ekstensi formulir kontak
Buat direktori bernama “woocommerce-contact-form” di direktori plugin WordPress.
<wordpress-application-root>/wp-content/plugins/
Selanjutnya, buat file woocommerce-contact-form.php dengan header plugin berikut di dalamnya. Header harus berisi 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 direktori plugin sebagai <woocommerce-contact-form>/templates/contact-form.php.
Tempatkan HTML ini di 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 menyediakan gaya minimal untuk membuat formulir permintaan cocok dengan tema toko apa pun.
Jika Anda ingin mengubah tema formulir permintaan produk WooCommerce, file CSS ini akan berguna.
#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 dan pengiriman formulir permintaan JavaScript melalui AJAX
Skrip ini menggunakan jQuery untuk memvalidasi formulir dan mengirimkan data yang dikirimkan melalui AJAX.
Semua bidang harus dimasukkan untuk mengirim pertanyaan produk dari halaman WooCommerce.
Setelah kondisi kembali benar, jQuery AJAX membuat serial data formulir dan mengirimkannya ke server.
Semua respons sisi klien dan sisi 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. telah ditarik.
Parameter tindakan send_contact_email mengaitkan filter tindakan wp_ajax di 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 ekstensi formulir permintaan produk WooCommerce
Ini adalah file utama yang mengaitkan tindakan yang diperlukan dan filter panggilan WordPress. Callback ini seharusnya melakukan hal berikut dengan mengaktifkan plugin ini.
- Muat Templat formulir kontak menggunakan kait filter “the_content”.
- Antrekan file form.css dan form.js yang dibuat untuk formulir permintaan produk WooCommerce ini. (Juga mengantri jalur CDN jQuery).
- kaitnya
wp_ajax_nopriv_*untuk berlarisend_contact_emailPanggil kembali dengan mendengarkan permintaan AJAX.
ini load_contact_form Fungsi membaca konten template menggunakan fungsi file_get_contents() PHP. Itu menambahkan konten ke konten halaman sebagai kondisi dasar.
Sebelum menambahkan formulir permintaan produk WooCommerce, ia memeriksa apakah itu halaman produk. jika begitu, adalah_produk() Mengembalikan boolean 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 balik yang mengirim panggilan balik
Kode di bawah ini adalah bagian dari woocommerce_contact_form.php File ekstensi mendefinisikan panggilan balik send_contact_email().
Plugin formulir permintaan produk WooCommerce memiliki filter tindakan dan panggilan balik. Ini akan dipanggil ketika menerima permintaan wp_ajax dari URL berikut.
/wordpress/wp-admin/admin-ajax.php?action=send_contact_email.
Membuat parameter wp_mail() untuk mengirim permintaan produk ke manajer toko atau penjual. ini $ ke Menyimpan alamat penerima.
Membuat badan email dengan data yang dikirimkan melalui formulir permintaan produk WooCommerce.
Menggunakan wp_mail() adalah cara sederhana untuk mengirim email melalui WordPress. Ini mirip dengan surat PHP karena merupakan 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 plugin kustom sepenuhnya dikodekan, 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 kunjungi 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 formulir permintaan produk WooCommerce dengan kode sederhana. Jika Anda ingin menyesuaikan dengan plugin ini, beri tahu saya di bagian komentar.
Yuk simak cara lain menampilkan contact form di situs WooCommerce di artikel selanjutnya.
Kembali ke atas
Source link
