Woocommerce rappresenta la soluzione ottimale per creare un e-commerce in pochi passi. Grazie a questo plugin di WordPress, è possibile gestire la vendita dei propri prodotti in modo semplice ed intuitivo. A differenza di altre soluzioni, quali ad esempio Magento e Shopify, non è richiesto un costo iniziale. Gli unici costi iniziali da sostenere sono quelli relativi al servizio di hosting e della registrazione del dominio.
Esistono diversi plugin che estendono le funzioni di base. Ad esempio, è possibile integrare servizi di tracking delle spedizioni, oppure creare i servizi per la ristorazione. Purtroppo non sempre esiste il plugin che fornisce le funzionalità che servono al nostro e-commerce. Quando ciò accade è necessario sviluppare un’estensione per Woocommerce.
In questo articolo scopriremo come aggiungere un pagina personalizzata all’interno del profilo del cliente mediante lo sviluppo di un plugin.
Prerequisiti
Prima di iniziare a sviluppare la pagina dobbiamo creare il nostro ambiente di sviluppo. Grazie ad esso potremo fare tutte i test necessari prima di installare il nuovo plugin sul sito online. Nell’articolo Docker compose – come orchestrare diversi container potete trovare un esempio di come creare sulla vostra macchina un progetto Docker che creare un sito WordPress.
Una volta creato il progetto, collegatevi alla vostra macchina nel browser (http://locahost) per iniziare a configurare WordPress. Alla fine della configurazione, dovrete solo aggiungere Woocommerce dal menù Plugins.
Anche Woocommerce vi richiederà alcune informazioni per configurare opportunamente il vostro negozio online. Seguite le istruzioni che compaiono a schermo. In questo esempio useremo una configurazione base che crea un negozio per la vendita di prodotti. Infatti, se vendete servizi che richiedono iscrizioni o appuntamenti, vi serviranno delle estensioni a pagamento.
Per completare il nostro ambiente di sviluppo, dobbiamo creare la struttura del plugin. Negli articoliSviluppare un plugin WordPress – creare la struttura iniziale e Gestire gli Advanced Custom Fields e integrarli in un plugin WordPress abbiamo visto come generare la struttura di partenza di un plugin e come integrare la gestione dei campi personalizzati. Sfrutteremo alcune di quelle conoscenze per creare il nostro plugin per Woocommerce.
Verifica delle dipendenze
Lo sviluppo di alcuni plugin richiede l’inclusione di funzionalità di altre estensioni. Nel nostro esempio abbiamo la necessità che Woocommerce sia installato e attivo. Diversamente il nostro plugin causerebbe errori e malfunzionamenti del sito.
Per verificare che esistano le condizioni per attivare il nostro plugin apriamo il file flowygo.php ed inseriamo subito dopo la definizione della versione le seguenti linee di codice.
if (!function_exists('is_plugin_active')) {
include_once(ABSPATH . '/wp-admin/includes/plugin.php');
}
/**
* Check for the existence of WooCommerce and any other requirements
*/
function flowygo_check_requirements() {
if ( is_plugin_active( 'woocommerce/woocommerce.php' ) ) {
return true;
} else {
add_action( 'admin_notices', 'flowygo_missing_wc_notice' );
return false;
}
}
/**
* Display a message advising WooCommerce is required
*/
function flowygo_missing_wc_notice() {
$class = 'notice notice-error';
$message = __( 'Flowygo requires WooCommerce to be installed and active.', 'flowygo' );
printf( '<div class="%1$s"><p>%2$s</p></div>', esc_attr( $class ), esc_html( $message ) );
} Le prime linee di codice servono per includere la funzione is_plugin_active se non è già definita. Se vi dimenticate di includerla il vostro plugin verrà installato, ma provocherà un errore generale del sistema. Il vostro sito non sarà più funzionante e dovrete rimuovere manualmente la cartella del plugin direttamente dalla vostra macchina. Vi ricordo che i plugin vengono installati nel percorso wp-content/plugins.
La funzione flowygo_check_requirements controlla se Woocommerce è installato. Viene restituito true alla funzione chiamante in caso di successo della verifica. Diversamente, viene aggiunta un’azione per visualizzare un messaggio di errore e restituisce false. Potete espandere questa funzione a vostro piacimento per includere la verifica di tutte le dipendenze che il vostro plugin.
La personalizzazione del messaggio di errore avviene nella funzione flowygo_missing_notice. In questa funzione definiamo il messaggio da visualizzare. La variabile $class è usata per renderizzare opportunamente il messaggio.
Dobbiamo ancora inserire la chiamata alla funzione flowygo_check_requirements. Per far ciò modifichiamo il codice della funzione run_flowygo definita alla fine del file come segue.
/**
* Begins execution of the plugin.
*
* Since everything within the plugin is registered via hooks,
* then kicking off the plugin from this point in the file does
* not affect the page life cycle.
*
* @since 1.0.0
*/
function run_flowygo() {
if (floygo_check_requirements()) {
$plugin = new Flowygo();
$plugin->run();
}
} Questa modifica permetterà l’esecuzione del plugin solo se le dipendenze vengono soddisfatte. Se provate ad installarlo, il plugin risulterà attivo ma non verrà in effetti eseguito. Infatti, se avete aggiunto una pagina di settings come mostrato nell’articolo XXX, questa non comparirà. Solo quando installerete tutte le estensioni necessarie al vostro plugin, esso verrà eseguito. Questo approccio risulta essere una best practice di WordPress.
Per aderire a pieno alle linee guida di WordPress è necessario anche visualizzare in modo persistente un banner nella dashboard. Bisogna pertanto aggiungere un’azione ad admin_notices che visualizzi un avviso su tutte le pagine della dashboard di amministrazione fino a quando WooCommerce è installato o il plugin è disattivato. E’ sufficiente registrare un action prima del register_activation_hook come segue.
add_action( 'plugins_loaded', 'flowygo_check_requirements' ); Creazione pagina cliente personalizzata
Il plugin è pronto per essere integrato con Woocommerce. L’obiettivo ora è di aggiungere un nuovo tab nella pagina dell’account di ciascun cliente. Le motivazioni per aggiungere del contenuto extra possono essere svariate. Ad esempio, potrebbe essere utile richiedere gli interessi dell’utente per creare campagne pubblicitarie mirate. Diversamente, la fornitura di un servizio dedicato in base a determinati acquisti potrebbe essere visualizzato in questa pagina.
Nel nostro esempio creeremo una pagina di visualizzazione dei premi che l’utente riceverà in base ai suoi acquisti.
Il primo passo è creare un endpoint relativo alla nuova pagina. Apriamo il file class-flowygo-public.php nella cartella public e iniziamo ad inserire la seguente funzione.
/**
* @since 1.0.0
* add endpoint of rewards page
*/
public function flowygo_add_rewards_endpoint() {
add_rewrite_endpoint( 'rewards', EP_ROOT | EP_PAGES );
} Dal momento che le url di WordPress vengono costruite in base ai settings definiti dall’amministratore del sito, è opportuno anche inserire una funzione che aggiorni le variabili di query associate alle pagine. Aggiungiamo quindi un’altra funzione adibita a questo compito.
/**
* since 1.0.0
* update query vars for the new endpoint
*/
public function flowygo_query_vars( $query_vars ){
$query_vars['rewards'] = 'rewards';
return $query_vars;
} Per attivare l’endpoint è necessario aggiungere un’azione di inizializzazione per la parte pubblica. Apriamo il file class-flowygo.php nella cartella includes e aggiungiamo le seguenti linee di codice subito dopo la definizione della variabile $plugin_public.
$this->loader->add_action( 'init', $plugin_public, 'flowygo_add_rewards_endpoint' );
$this->loader->add_filter( 'woocommerce_get_query_vars', $plugin_public, 'flowygo_query_vars'); Nonostante abbiamo registrato il nuovo endpoint questo non è ancora completo. Infatti non abbiamo associato nessuna pagina, ma sopratutto non vi è nessun modo di raggiungerlo. Iniziamo quindi a creare il tab relativo nella pagina dell’account di ciascun utente.
Sempre nel file class-flowygo.php aggiungiamo un altro filtro relativo a woocommerce per modificare il menù degli accounts. Il codice da inserire è il seguente.
$this->loader->add_filter( 'woocommerce_account_menu_items', $plugin_public, 'flowygo_menu_items' ); Bisogna definire la funzione di callback che è stata indicata nel filtro. Pertanto aggiungiamo le seguenti linee di codice nel file class-flowygo-public.php.
/**
* Insert new endpoints into the My Account menu after an existing menu item
*
* @param array $items
* @param array $new_items
* @param string $after
* @return array
*/
public function flowygo_menu_insert( $items, $new_items, $after ) {
// Search for the item position and +1 since is after the selected item key.
$position = array_search( $after, array_keys( $items ) ) ;
// Insert the new item.
$array = array_slice( $items, 0, $position, true );
$array += $new_items;
$array += array_slice( $items, $position, count( $items ) - $position, true );
return $array;
}
/**
* Insert the new endpoint into the My Account menu.
*
* @param array $items
* @return array
*/
public function flowygo_menu_items( $items ) {
$new_items = array();
$new_items['rewards'] = __( 'Rewards', 'woocommerce' );
// Add the new item after `orders`.
return $this->flowygo_menu_insert( $items, $new_items, 'orders' );
}
La funzione flowygo_menu_items riceve un array contenente la lista delle voci del menù attualmente disponibili. Viene pertanto creato un nuovo array associativo contenente le nuovi voci del menù. Per inserirle nella posizione opportuna viene utilizzata la funzione flowygo_menu_insert. Quest’ultima riceve la lista del menù originale ed inserisce nella posizione corretta le nuove voci. La posizione è data dal nome della voce del menù. I valori possibili sono:
- edit-address
- dashboard
- payment-methods
- orders
- downloads
- edit-account
- customer-logout
Non resta che aggiungere la pagina che visualizzerà i nostri premi!
Creiamo quindi due funzioni nel file class-floygo-public.php: una per il contenuto della pagina e l’altra per il titolo.
/**
* Render the content of the rewards page
*/
public function rewards_page() {
echo __('The list of your rewards', 'flowygo');
}
/**
* Define the title of the endpoint
*/
public function rewards_title($title, $endpoint ){
$title = __( "Rewards", "woocommerce" );
return $title;
} Torniamo nella funzione di definizione dei public hooks e aggiungiamo le seguenti istruzioni.
$this->loader->add_action( 'woocommerce_account_rewards_endpoint', $plugin_public, 'rewards_page' );
$this->loader->add_filter('woocommerce_endpoint_rewards_title', $plugin_public, 'add_title',10, 2); Se riscontrate errori nel raggiungimento dell’endpoint conviene fare una riscrittura delle regole dei permalinks. Per inserirlo all’interno del plugin il consiglio è di aggiungere la funzione flush_rewrite_rules() all’interno della funzione run_floywgo dopo che il plugin è stato eseguito.
La pagina che abbiamo creato si presenterà così.
Gestione dei premi
Il plugin ora integrare una nuova pagina nell’account di ciascun utente. Il suo contenuto però è vuoto. Scopriamo come assegnare dei punteggi in base agli acquisti che ciascun utente farà.
Supponiamo di voler assegnare un punto per ciascun acquisto fatto. A seconda del numero di acquisti assegneremo un premio a quell’utente. I premi saranno i seguenti:
- Bronze: almeno 10 acquisti
- Silver: almeno 20 acquisti
- Gold: almeno 50 acquisti
Dobbiamo quindi intercettare quando un ordine viene completato per aggiornare il punteggio del cliente.
Andiamo ad aggiungere un’azione associata al cambiamento dello stato di un ordine. Inseriamo l’istruzione seguente all’interno di define_admin_hooks nel file class-flowygo.php.
$this->loader->add_action( 'woocommerce_order_status_changed', $plugin_admin, 'flowygo_woocommerce_payment_complete', 10, 3 ); In questo modo ogni volta che lo stato di un ordine verrà modificato verrà richiamata la funzione flowygo_woocomerce_payment_complete. Inseriamo questa funzione e la sua logica nel file class-flowygo-admin.php.
/**
* Insert the new endpoint into the My Account menu.
*
* @param int $order_id
* @param string $old_status
* @param string $new_status
*/
public function flowygo_woocommerce_payment_complete( $order_id, $old_status, $new_status ) {
if ( $new_status == "completed" ) {
$reward = get_user_meta( get_current_user_id(), 'reward', true );
update_user_meta( get_current_user_id(), 'reward', $reward +1 );
}
} La funzione riceverà l’identificativo dell’ordine, lo stato precedente e quello attuale. Inseriamo una logica molto semplice che verifica se il nuovo stato è uguale a completed. Solamente in questo caso recupera il valore del meta reward associato all’utente corrente. L’identificativo dell’utente è recuperato mediante la funzione get_current_user_id, mentre il meta con la funzione get_user_meta. Il suo valore viene poi incrementato di 1 mediante la funzione update_user_meta.
Dobbiamo aggiornare di conseguenza il contenuto della pagina rewards create in precedenza per visualizzare i premi qualora vengano superate le soglie previste. Il codice della funzione di rendering sarà il seguente.
public function rewards_page() {
$reward = get_user_meta( get_current_user_id(), 'reward', true );
if ($reward >= 50){
echo 'Gold';
}
if ($reward >= 20 && $reward < 50){
echo 'Silver';
}
if ($reward >= 10 && $reward < 20){
echo 'Bronze';
}
else{
echo __('No rewards', 'flowygo');
}
} Ovviamente potete migliorare la grafica a vostro piacimento inserendo icone e immagini in base alle varie soglie.
