Aggiungere Campi Personalizzati a Semplici Prodotti con WooCommerce

() translation by (you can also view the original English article)

WooCommerce è probabilmente il modo più popolare di vendere prodotti utilizzando WordPress. Con WordPress composto da circa il 25% di Internet e WooCommerce da circa il 39% di tutti i negozi online, è una scommessa vinta utilizzare i due in combinazione, se siete in cerca di vendere prodotti ai clienti.

Ma, come con qualsiasi software, ci sono momenti in cui noi o i nostri clienti spesso desiderano estendere le funzionalità al di là delle impostazioni standard.

Caso in questione: con WooCommerce, diciamo che hai un prodotto semplice che si vuole vendere, ma si desidera inserire un pò più di informazioni sul prodotto da visualizzare in front-end.

Utilizzando un paio di hooks forniti da WooCommerce e funzionalità personalizzate che scriveremo, daremo un'occhiata a come possiamo fare nel dettaglio.

Strumenti necessari

Prima di iniziare, presumo che tu abbia il seguente settaggio (o qualcosa di simile) sulla tua macchina:

Sistema operativo di preferenza — utilizzerò macOS
Almeno PHP 5.6.25, anche se utilizzerò PHP 7
MySQL 5.6.33
Apache o Nginx
4.7 di WordPress
WooCommerce 3.9
Il vostro IDE preferito

Per il resto del tutorial, suppongo che tutto questo sia installato, attivato e in esecuzione.

Se si Scarica WooCommerce appositamente per questo tutorial, non esiste nessuna necessità di preoccuparsi di cose come le pagine di pagamento, termini e condizioni o simili. Infatti, stiamo andando soltanto ad incentrarci sulla metabox del Prodotto Semplice per tutto il resto di questo tutorial.

Aggiunta di campi personalizzati

Quando si tratta di lavorare con WordPress, la nozione di campi personalizzati solitamente assume una definizione diversa:

WordPress ha la capacità di consentire agli autori di post di assegnare i campi personalizzati a un post. Queste informazioni aggiuntive arbitrarie sono conosciute come meta-dati.

Per i non-sviluppatori, questo tipo di informazioni può essere un po' più complessa e inutile. Ma se siete abituati a lavorare con esso, è importante notare che quando mi riferisco a campi personalizzati in questo tutorial, sto parlando di qualcosa di completamente diverso.

Invece, sto parlando di un campo di testo effettivo che introdurremo nella scheda prodotto collegato del tipo Semplice Prodotto.

Ma ci arriveremo più avanti nel tutorial. Adesso, cominciamo.

Gli Hooks

Tanto come WordPress, WooCommerce fornisce un'API che permette di agganciarci nel ciclo di vita della pagina. Così anche si è lavorato con le API dei metadati di WordPress prima, farlo con WooCommerce è diverso.

Ci sono due hooks che sono importanti da conoscere:

woocommerce_product_options_grouping. Useremo questa funzione per creare una descrizione e un input di testo che accetta i nostri valori.
woocommerce_process_product_meta. Useremo questo hook per elaborare, sanitizzare e salvare il valore del nostro input testuale.

Come con tutti gli hooks in WordPress, questi richiederà che definiamo questi hooks e quindi definire funzionalità personalizzate per essi. Anche se è possibile farlo utilizzando la programmazione procedurale, questo tutorial aggiungerà la funzionalità utilizzando la programmazione object-oriented.

2. la funzionalità

In primo luogo, definiamo una classe che avrà dalla variabile i suoi dati di istanza. Questa variabile rappresenta l'ID del campo input che verrà visualizzato nell'interfaccia utente:

<?php

class TutsPlus_Custom_WooCommerce_Field {

    private $textfield_id;
}

Successivamente, inizializziamo la variabile di istanza nel costruttore della classe:

<?php

class TutsPlus_Custom_WooCommerce_Field {

    private $textfield_id;

    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
}

A questo punto, siamo pronti per iniziare a utilizzare gli hooks sopra elencati. Per fare questo, però, aggiungeremo una funzione di inizializzazione che registrerà due funzioni personalizzate con l'hook.

Nelle due sezioni che seguono, vedremo esattamente come implementare la funzionalità personalizzata.

1. aggiunta di un campo di testo Input

In primo luogo, noi consigliamo di aggiungere una funzione che è collegata a woocommerce_product_options_grouping. Nella funzione init che abbiamo definito nella sezione precedente, faremo esattamente questo.

<?php

class TutsPlus_Custom_WooCommerce_Field {

  private $textfield_id;

	public function __construct() {
		$this->textfield_id = 'tutsplus_text_field';
	}

	public function init() {

            add_action(
                'woocommerce_product_options_grouping',
                array( $this, 'product_options_grouping' )
            );
	}

	public function product_options_grouping() {
        
	}
}

Si noti che ho denominato la funzione product_options_grouping. Trovo che in questo modo il codice sia un pò più facile da leggere. Sebbene la funzione, di per sé, non può essere altamente descrittiva di ciò che fa, esso si collega al suo rispettivo hook.

Successivamente, è necessario implementare la funzione. Per fare questo, abbiamo bisogno di alcune informazioni:

Abbiamo bisogno di un ID che utilizzeremo per identificare in modo univoco il campo di testo. Useremo il set di dati di istanza nel costruttore.
Un'etichetta sarà utilizzata per dare qualche descrizione per il campo di input.
Possiamo specificare facoltativamente un segnaposto, e ai fini del nostro esempio, faremo ciò.
C'è un'opzione per visualizzare una descrizione comandi ogni volta che l'utente passa il mouse sopra un'icona.
E abbiamo l'opzione per una descrizione che useremo per popolare il testo della descrizione comandi.

Tutte le informazioni di sopra verrano impostate in un array associativo e verranno passate a woocommerce_wp_text_input. Questa è una funzione API di WooCommerce progettata per visualizzare un elemento testuale con gli argomenti di sopra.

<?php

class TutsPlus_Custom_WooCommerce_Field {

        private $textfield_id;

	public function __construct() {
		$this->textfield_id = 'tutsplus_text_field';
	}

	public function init() {

            add_action(
                'woocommerce_product_options_grouping',
                array( $this, 'product_options_grouping' )
            );
	}

	public function product_options_grouping() {

            $description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' );
            $placeholder = sanitize_text_field( 'Tease your product with a short description.' );

            $args = array(
                'id'            => $this->textfield_id,
                'label'	        => sanitize_text_field( 'Product Teaser' ),
                'placeholder'   => 'Tease your product with a short description',
                'desc_tip'      => true,
                'description'   => $description,
            );
            woocommerce_wp_text_input( $args );
	}
}

A questo punto, abbiamo fatto la prima parte del plugin. Dobbiamo scrivere il codice che mette tutto in movimento e dobbiamo ancora scrivere il codice che salva le informazioni nel database, quindi facciamolo ora.

2. Salvataggio delle Informazioni

Successivamente, aggiungere le seguenti righe di codice nel metodo init:

<?php

add_action(
    'woocommerce_process_product_meta',
    array( $this, 'add_custom_linked_field_save' )
);

Dopo di che, assicurarsi di aggiungere la funzione di add_custom_linked_field_save.

<?php

public function add_custom_linked_field_save( $post_id ) {

        if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) {
		return false;
	}

	$product_teaser = sanitize_text_field(
		wp_unslash( $_POST[ $this->textfield_id ] )
	);

	update_post_meta(
		$post_id,
		$this->textfield_id,
		esc_attr( $product_teaser )
	);
}

Parlerò un pò implementazione della funzione nella sezione successiva.

Sanitizzazione dei Dati

Si noti nella funzione di sopra, ci sono tre cose che avvengono:

Controlliamo per assicurarci che siano presenti diversi valori nonce. Se così non fosse, allora ci restituiscono false. Si tratta di una precauzione di sicurezza standard. I valori di parametro nonce vengono rilevati in particolare guardando ciò che WooCommerce fornisce nel codice sorgente.
Sanitizzare i dati nella serie di $_POST corrispondenti con l'input utente.
Salvare le informazioni nella tabella dei metadati del post.

Si noti che in realtà non facciamo ancora niente per interpretare le informazioni in front-end quindi non c'è nessuna chiamata a get_post_meta. Si tratta, tuttavia, come verranno interpretate le informazioni su front-end.

3. visualizzare il Teaser sul Front-End

Per eseguire l'interpretazione delle informazioni su front-end, avremo bisogno di una classe che farà molto dello stesso lavoro che abbiamo già fatto. In particolare, avremo bisogno:

un ID campo di testo
inizializzazione del suddetto ID nel costruttore
una funzione di inizializzazione per agganciare il nostro codice personalizzato nel front-end
Interpretare il valore attuale

Questa impostazione non è effettivamente così difficile dato che abbiamo già fatto tutto questo, quindi passerò la classe nella sua interezza qui sotto; tuttavia, ci sono poche osservazioni da fare sul modo in cui stiamo impostando questa classe dopo il salto:

<?php

class TutsPlus_Custom_WooCommerce_Display {

	private $textfield_id;

	public function __construct() {
		$this->textfield_id = 'tutsplus_text_field';
	}

	public function init() {

		add_action(
			'woocommerce_product_thumbnails',
			array( $this, 'product_thumbnails' )
		);
	}

	public function product_thumbnails() {

		$teaser = get_post_meta( get_the_ID(), $this->textfield_id, true );
		if ( empty( $teaser ) ) {
			return;
		}

		echo esc_html( $teaser );
	}
}

Il risultato finale dovrebbe essere qualcosa come questo:

A questo punto, abbiamo un pò di codice ridondante. In particolare, i public e le classi amministrative entrambi utilizzano un textfield_ID e una configurazione nel loro costruttore. Questo è un difetto di codice che viola l'intero principio della programmazione object-oriented.

Ci sono vari modi che abbiamo potuto ovviare a questo, ad esempio passando il valore nei costruttori quando vengono create istanze delle classi, utilizzando un semplice design pattern per orchestrare le informazioni tra le due classi e così via.

Nel file che accompagna questo tutorial, che può essere scaricato utilizzando il link nella barra laterale, in realtà si vedrà come ho passato il valore al costruttore per renderlo un pò più facile da gestire.

In secondo luogo, si noti che sto usando l'hook di woocommerce_product_thumbnails per aiutare a interpretare le informazioni. Ci sono una serie di hooks WooCommerce messi a disposizione, e ho semplicemente scelto dagli hooks disponibili per eseguirne il rendering. Puoi tranquillamente appoggiarti alla documentazione per determinare quale hook funziona meglio per le tue esigenze.

4. portarli tutti insieme

Infine, l'ultima cosa che dobbiamo fare è quello di impostare un file di avvio che avvia il plugin. Abbiamo fatto questo in un certo numero di miei tutorial precedenti quindi non ho intenzione di spendere troppo tempo scocciando sulla questione.

Ecco come ho scomposto il codice:

<?php
/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the
 * plugin admin area. This file also includes all of the dependencies used by
 * the plugin, and defines a function that starts the plugin.
 *
 * @link              https://code.tutsplus.com/tutorials/adding-custom-fields-to-simple-products-with-woocommerce--cms-27904
 * @package           CWF
 *
 * @wordpress-plugin
 * Plugin Name:       Tuts+ Custom WooCommerce Field
 * Plugin URI:        http://code.tutsplus.com/tutorials/adding-custom-fields-to-simple-products-with-woocommerce--cms-27904
 * Description:       Demonstrates how to add a custom field to a Simple Product.
 * Version:           1.0.0
 * Author:            Tom McFarlin
 * Author URI:        https://tommcfarlin.com
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */

defined( 'WPINC' ) || die;

include_once 'admin/class-tutsplus-custom-woocommerce-field.php';
include_once 'public/class-tutsplus-custom-woocommerce-display.php';

add_action( 'plugins_loaded', 'tutsplus_wc_input_start' );
/**
 * Start the plugin.
 */
function tutsplus_wc_input_start() {

    if ( is_admin() ) {

        $admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' );
        $admin->init();
    } else {

        $plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' );
        $plugin->init();
    }
}

Si noti che includo le dipendenze e poi, una volta che la funzione viene generata, controllo per vedere se la dashboard è visualizzata o no. Se è così, la parte corretta del plugin viene caricata; in caso contrario, la visualizzazione standard è caricata, che potete vedere sulla pagina del prodotto.

Conclusione

A questo punto, abbiamo coperto tutto che abbiamo deciso di fare all'introduzione del tutorial:

Abbiamo aggiunto un campo personalizzato.
l'abbiamo sanitizzato e salvato.
Abbiamo istituito un aspetto per l'utente del plugin.
E abbiamo estratto e visualizzato il contenuto.

Non dimenticate di scaricare la demo di lavoro finale dalla barra laterale di questa pagina. È il grande pulsante blu nella barra laterale. Inoltre, se siete interessati a WooCommerce, non dimenticate di controllare alcuni dei nostri altri tutorial o alcuni dei prodotti che abbiamo nel nostro marketplace.

Come solito, se stai cercando altro materiale relativo a WordPress, puoi trovare tutti i miei tutorial precedente sulla mia pagina profilo, e potete seguirmi sul mio blog o su Twitter.

Non dimenticate di lasciare eventuali domande o commenti nel feed qui sotto!

1	<?php
2
3	class TutsPlus_Custom_WooCommerce_Field {
4
5	private $textfield_id;
6
7	public function __construct() {
8	$this->textfield_id = 'tutsplus_text_field';
9	}
10
11	public function init() {
12
13	add_action(
14	'woocommerce_product_options_grouping',
15	array( $this, 'product_options_grouping' )
16	);
17	}
18
19	public function product_options_grouping() {
20
21	}
22	}