Sviluppare un e-commerce con React e WooCommerce

Dog Heroes è una startup che vende online cibo fresco per cani. Si tratta di un servizio particolare, tramite il quale ogni cliente compra un prodotto fatto su misura per il suo animale domestico, dopo averne comunicato alcune caratteristiche come, per esempio, il peso e la razza.

Quando, all’inizio del progetto, ci siamo trovati a progettare la soluzione tecnologica, abbiamo identificato in WordPress e WooCommerce gli strumenti fondamentali per il potente Block Editor del primo e per le solide funzionalità di e-commerce del secondo.

Dog Heroes, tuttavia, non è un sito di e-commerce comune. Poiché il prodotto viene generato in modo personalizzato, era necessario realizzare una componente altamente dinamica e interattiva destinata a condurre l’utente attraverso il processo di acquisto.

React ci è sembrata la giusta soluzione perché sfrutta il paradigma Single-page application – più performante rispetto ad un approccio tradizionale multi-pagina perché aggiorna dinamicamente il contenuto della pagina usando JavaScript, minimizzando l’uso di risorse a favore di una maggiore velocità di risposta.

L’architettura

Volevamo far coesistere WooCommerce e React per sfruttare al meglio le caratteristiche dell’una e dell’altra tecnologia. Abbiamo scelto di renderizzare le pagine principali, per esempio la home page e la pagina di checkout, creando un tema WordPress custom, basato sullo starter theme Sage, che abilita un workflow di lavoro professionale.

All’interno della sezione del funnel abbiamo inizializzato invece un’app React, destinata a raccogliere in modo dinamico le informazioni sul proprio cane in un susseguirsi rapido di passaggi.

<div id=”root”></div>

const rootElement = document.getElementById(“root”)
if (rootElement) {
  ReactDOM.render(<App />, rootElement)
}

???? React ↔ WooCommerce

Nello sviluppo del progetto, avevamo necessità di far dialogare la componente React con quella WooCommerce: in primo luogo volevamo assistere l’utente registrato nella compilazione del funnel di acquisto, pre-compilando i campi già noti. In secondo luogo volevamo che l’app React e quella basata su WordPress e WooCommerce fossero localizzate condividendo il medesimo file delle lingue – così da avere un’unica sorgente di informazione per stringhe ed etichette tradotte.

Per condividere queste informazioni tra l’applicazione React e WooCommerce, abbiamo trasferito un oggetto JavaScript a partire dal codice PHP – collocato all’interno del tema WordPress – all’applicazione React inizializzata nel funnel di acquisto.

Dal momento che il funnel di acquisto è suddiviso in step progressivi, e ognuno di questi ha un URL generato dinamicamente via JavaScript, dovevamo impedire che WordPress rilevasse un errore 404 per le pagine gestite da React.

Per far ciò abbiamo implementato una riscrittura personalizzata degli endpoint WordPress, sfruttando la funzione add_rewrite_endpoint così da delegare a React la gestione di determinate sub-route.

add_action('init', function() {
  $allowed_subroutes = array(“step1”, “step2”, … );
  foreach($allowed_subroutes as $allowed_subroute) {
    add_rewrite_endpoint( $allowed_subroute, EP_PERMALINK | EP_PAGES );
  }
});

In questo modo siamo riusciti a popolare le informazioni dell’utente, semplificando notevolmente il funnel di acquisto. Questo meccanismo di compilazione assistita si attiva anche nel caso di un visitatore anonimo che, dopo aver abbandonato il funnel, torna a compilarlo successivamente: in questo caso le informazioni parziali sono archiviate nella memoria locale del browser, rendendo più veloce e immediata la compilazione delle informazioni.

Calcolo del prodotto personalizzato e checkout

Una volta che l’utente ha risposto alle domande relative al proprio cane, viene mostrato l’elenco dei prodotti personalizzati. React trasferisce al server le informazioni sulle caratteristiche del cane; queste vengono trattate da un algoritmo ad hoc, adibito alla generazione del prodotto sulla base del fabbisogno calorico dell’animale. Le informazioni sul prodotto personalizzato sono quindi restituite a React. Questa comunicazione bidirezionale tra l’applicazione React e WooCommerce è stata realizzata attraverso chiamate asincrone HTTP ad endpoint dedicati.

add_action( 'rest_api_init', function () {
  register_rest_route('website/v1', '/dog/create/',
    array(
      'methods' => 'POST',
      'callback' => function() {
        $response = \Website\createDog($_POST);
        header('Content-type: application/json');
        echo json_encode($response);
        exit;
      }
    )
  );
});

Quando l’utente sceglie una ricetta termina il suo percorso nell’app React venendo reindirizzato alla pagina di checkout servita da WooCommerce.

Riflessioni conclusive

In questo progetto volevamo sperimentare l’abbinamento tra le potenzialità di una soluzione solida come WooCommerce – senza però limitarci al suo utilizzo tradizionale – e quelle di un’applicazione React adibita alla gestione della componente dinamica del funnel di acquisto.

Nel realizzare il sito e-commerce di Dog Heroes abbiamo provato che anche soluzioni tecnologiche “tradizionali”, considerate solitamente utili a realizzare principalmente siti web semplici con funzionalità di e-commerce limitate, possono essere molto malleabili e svelare una grande potenzialità per chi vuole sviluppare soluzioni avanzate, costruendo esperienze utente altamente personalizzate.