Plugin formulir kontak WordPress WooCommerce dengan widget

Programming

Oleh Vinci terakhir diubah pada 11 Juli 2022.

Kami telah mempelajari tentang widget WordPress dan penggunaannya. Juga, kami melihat cara membuat widget khusus dan memasukkannya ke dalam template frontend.

Ini adalah kelanjutan dari seri panduan pembuatan formulir kontak WooCommerce. Ini adalah cara lain untuk mengaktifkan komponen formulir kontak. Ini menggunakan widget WordPress untuk mencapai tujuan ini.

Widget formulir kontak dapat disediakan di antarmuka pengguna WooCommerce. Itu dapat disediakan di bagian widget terdaftar dari tema toko. Artikel ini memandu Anda cara menampilkan formulir kontak di area widget default.

Keuntungan dari widget WordPress

Membuat dan menggunakan widget untuk situs WordPress memiliki banyak keuntungan. Beberapa di antaranya adalah sebagai berikut.

  • Menambahkan abstraksi dengan memisahkan unit logika dari aliran biasa.
  • Ini meningkatkan kinerja dan kecepatan dengan memuat widget berdasarkan prioritas.
  • Ini bertindak sebagai fitur tambahan yang dapat diaktifkan/dinonaktifkan sesuai kebutuhan.
  • Meningkatkan keamanan dengan memuat komponen dan template secara dinamis.

Plugin formulir kontak WordPress untuk pendaftaran widget

Metode ini membuat plugin formulir kontak WordPress untuk mendaftarkan sampel widget. Widget ini terdaftar untuk menampilkan komponen formulir kontak di area widget.

File plugin membuat widget khusus yang mewarisi kelas widget WordPress.

Metode kelas widget kustom memuat referensi file templat formulir kontak. Ini untuk mendapatkan konten dari template HTML dan merendernya di area widget. Kemudian, plugin formulir kontak WordPress mendaftarkan widget khusus.

Setelah registrasi, contoh ini dapat dilihat pada panel komponen widget yang tersedia.

Kisi komponen widget

Kode plugin formulir kontak WordPress berikut menunjukkan subkelas WP-Widget.

Kelas plugin ini mewarisi kelas WP-Widget dan menimpa metode widget(). Dalam metode ini, widget UI membangun dan mengeluarkan HTML.

Plugin ini mendaftarkan widget dengan nama kelas plugin formulir kontak WordPress. Registrasi ini dilakukan dalam aksi init dari widget WordPress.

/contact-form-widget/contact-form-widget.php

<?php
/*
 * Plugin Name: Contact form Widget
 * Plugin URI: https://phppot.com
 * Description: Sidebar widget contact form
 * Author: Vincy
 * Author URI: https://phppot.com
 * Version: 1.0.0
 * Slug: content
 */

class Contact_Form_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'Form_Widget',
            'Contact Form Widget',
            array( 'description' => 'To render contact form in a default widget area', )
            );
    }
    
    function widget( $args, $instance ) {
        $contactFormHTML = getContactHTML('template-parts/contact-form' );
        echo $args['before_widget'];
        echo $args['before_title'] . "Contact us" . $args['after_title'];
        echo $contactFormHTML;
        echo $args['after_widget'];
    }
}

function register_contact_form_widget() {
    register_widget( 'Contact_Form_Widget' );
}
add_action( 'widgets_init', 'register_contact_form_widget' );

Templat formulir kontak, aset untuk toko WooCommerce

File tema berisi templat dan gaya formulir kontak WooCommerce. Tema anak telah dibuat untuk contoh ini untuk membuat perubahan pada tema.

function.php tema anak mengembalikan templat formulir kontak WooCommerce. ini getContactHTML() Fungsi ini mendapatkan bagian tema WordPress dan nama file. Dari get_template_part() Berfungsi untuk mendapatkan template HTML.

File plugin formulir kontak WordPress memanggil metode ini untuk mendapatkan konten.

/fungsi.php

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

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 = 'Recipient 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");

// Get contact form template and return the HTML response in a variable
function getContactHTML($slug, $name = null)
{
    ob_start();
    get_template_part($slug, $name);
    $content = ob_get_contents();
    ob_end_clean();

    return $content;
}

Juga, file ini berisi skrip untuk mengirim email dengan send_contact_email() Fungsi. Skrip untuk mengirim email dan aset antrian akan familiar. Karena mereka seperti membuat artikel formulir kontak WooCommerce terbaru.

Templat formulir kontak ini berisi entri untuk mengumpulkan informasi dan pesan dari pelanggan.

template-parts/contact-form.php

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

?>
<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>

Ini adalah area widget WordPress default untuk menambahkan komponen widget. Dalam tema ini, ia mendaftarkan panel footer sebagai area widget default. Ini adalah area untuk melepaskan widget yang dipilih dari opsi yang tersedia.

Terpercaya dan profesional Penampilan -> Widget melalui admin WordPress ke opsi ini. Namun, selesaikan pembuatan widget dengan menggunakan metode register_widget() untuk melihat opsi ini.

Tambahkan widget blok

Output plugin widget formulir kontak WordPress

Gambar di bawah ini adalah hasil akhir dari plugin formulir kontak WordPress. Oleh karena itu, panel footer WooCommerce menampilkan komponen formulir kontak untuk mengirimkan permintaan.

Widget formulir kontak WordPress di UI

Cara menambahkan widget di editor WordPress lama

Metode di atas menggunakan blok untuk menampilkan widget dari formulir kontak yang terdaftar. Di editor lama, ini menyertakan area drag-and-drop untuk memindahkan komponen widget ke area widget default.

dengan menggulir Penampilan -> Widget Menampilkan kartu widget yang dapat diseret di panel. Ini juga menunjukkan area drop-down untuk membuat panel widget yang ditampilkan di frontend.

Editor widget WordPress lagacy

Jika Anda ingin menguji ini di editor widget Anda, tambahkan kode berikut ke functions.php tema Anda. Ada juga plugin untuk mengembalikan editor lama di admin WordPress.

<?php
function example_theme_support() {
    remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'example_theme_support' );

Plugin formulir kontak WordPress pihak ketiga mendaftarkan widget

Ada widget formulir kontak pihak ketiga yang tersedia. Misalnya Widget formulir kontak Plugin ini menyediakan komponen yang mudah digunakan. Ini menyediakan formulir pertanyaan di toko WooCommerce.

Ini mencakup 25+ fitur termasuk pembuat formulir. Daripada membuat kode khusus, solusi yang ada lebih disukai untuk mendapatkan hasil yang cepat.

Hasil

Kami belajar cara membuat plugin formulir kontak WordPress yang menggunakan widget untuk merender HTML. Saya harap metode ini mudah dan membantu untuk membuat widget kustom Anda sendiri.

Semua contoh formulir kontak WooCommerce mencakup semua metode implementasi. Ini akan membantu untuk memilih salah satu dari mereka berdasarkan kebutuhan toko.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *