Plugin Formulir Kontak WordPress WooCommerce dengan Widget

Terakhir diedit oleh Vinci pada 31 Mei 2022.

Kita sudah akrab dengan widget WordPress dan aplikasinya. Kami juga melihat cara membuat widget khusus dan memasukkannya ke dalam format frontend.

Ini adalah kelanjutan dari seri bantuan untuk membuat formulir kontak WooCommerce. Ini adalah cara lain untuk mengaktifkan komponen formulir kontak. Menggunakan widget WordPress untuk mencapai tujuan ini.

Widget formulir kontak dapat disediakan di antarmuka pengguna WooCommerce. Itu dapat disajikan di bagian widget terdaftar dari subjek toko. Artikel ini akan menunjukkan cara mengirimkan formulir kontak di area widget default.

Manfaat Widget WordPress

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

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

Plugin formulir kontak WordPress untuk pendaftaran widget

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

Membuat plugin widget khusus yang mewarisi kelas widget WordPress.

Metode kelas widget kustom memuat file referensi Templat formulir kontak. Ini untuk mengunduh konten dari format HTML dan menyajikannya di area widget. Kemudian, plugin Formulir Kontak WordPress mendaftarkan widget khusus.

Setelah registrasi, contoh ini dapat dilihat di panel komponen widget yang ada.

Jaringan komponen widget

Kode plugin formulir kontak WordPress di bawah ini menunjukkan subkelas WP-Widget.

Plugin ini mewarisi kelas WP-Widget dan menimpa metode widget (). Dalam metode ini, widget UI dibuat dan dikeluarkan.

Plugin ini mendaftarkan widget dengan nama kelas plugin formulir kontak WordPress. Registrasi ini dilakukan di widget WordPress init action.

/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 memiliki 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. Pada getContactHTML() Fungsi menerima bagian template WordPress dan nama file. Menggunakannya 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;
}

File ini juga berisi skrip untuk mengirim surat dengan send_contact_email() Fungsi. Skrip email dan penyelarasan aset akan familiar. Karena mereka seperti membuat artikel formulir kontak WooCommerce terbaru.

Templat formulir kontak ini berisi input untuk mengumpulkan informasi dan pesan 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 widget WordPress default untuk menambahkan komponen widget. Dalam hal ini, panel mendaftarkan footer sebagai area default widget. Area drop ini untuk menampilkan widget yang dipilih dari opsi yang tersedia.

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

Tambahkan blok widget

Keluaran plugin Widget Formulir Kontak WordPress

Gambar di bawah ini adalah hasil akhir dari plugin WordPress Contact Form. 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 seret dan lepas untuk memindahkan komponen widget ke area widget default.

Dengan menggulir Penampilan -> Widget Menampilkan kartu widget yang dapat dilepas di panel. Juga menunjukkan area drop untuk membuat panel widget ditampilkan di bagian depan.

Editor widget WordPress Lagacy

Jika Anda ingin menguji ini di editor widget Anda, tambahkan kode berikut di tema functions.php. Ada juga plugin untuk memulihkan 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 mendaftarkan widget pihak ketiga

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. Alih-alih membuat kode khusus, solusi yang ada untuk keluaran cepat lebih disukai.

Hasil

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

Semua contoh formulir kontak WooCommerce mencakup semua metode implementasi. Ini akan membantu Anda memilih satu berdasarkan kebutuhan toko Anda.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.