WooCommerce headless: dalla configurazione alla distribuzione su Kinsta

WooCommerce è uno dei plugin di WordPress tra i più popolari per la creazione di applicazioni di ecommerce. Oltre a utilizzare WooCommerce in un’applicazione WordPress tradizionale, è possibile usarlo come soluzione headless.

Questo articolo spiega come costruire un’applicazione WordPress headless con React distribuita su Kinsta.

Introduzione a WooCommerce headless

Il termine “ecommerce headless” indica la separazione del backend (testa) dal frontend (corpo) di un’applicazione di ecommerce. L’architettura headless passa le richieste tra i livelli di presentazione (frontend) e i livelli di applicazione (backend) di una soluzione di ecommerce attraverso le API.

Le API definiscono le interazioni tra gli intermediari, consentendo alle aziende di modificare i livelli di presentazione senza disturbare la funzionalità dei livelli applicativi e di aggiornare, modificare o aggiungere prodotti a più livelli applicativi.

In un’applicazione WooCommerce headless, l’API WooCommerce è un intermediario che fornisce la comunicazione tra il frontend e il backend. Oltre ai vantaggi menzionati in precedenza, questo supporta uno sviluppo frontend flessibile e scalabile, consentendo di concentrarsi sulla creazione di interfacce utente coinvolgenti e dinamiche con stack tecnologici moderni come React o Vue.

Inoltre, l’utilizzo di WooCommerce headless rende l’infrastruttura ecommerce a prova di futuro, aiutando ad adattarsi all’evoluzione delle esigenze dei clienti e ai progressi tecnologici. Si possono aggiornare senza problemi i componenti del frontend, garantendo al contempo la stabilità e l’affidabilità della piattaforma WooCommerce del backend.

Questo approccio moderno offre numerosi vantaggi rispetto alle tradizionali configurazioni di ecommerce WordPress.

Ora che abbiamo capito cos’è un’applicazione WooCommerce headless e quali sono i suoi vantaggi, è il momento di costruirne una. Utilizzando WordPress, React e il plugin WooCommerce, creeremo un’applicazione ecommerce e la distribuiremo su Kinsta.

Prerequisiti

Prima di iniziare, assicuriamoci di avere i seguenti requisiti:

• Conoscenza di React e WordPress
• Un’installazione Node.js
• Un sito web WordPress funzionante
• Un account Kinsta attivo

Vantaggi di WooCommerce headless

Scegliendo la strada dell’headless per le nostre applicazioni WooCommerce, otteniamo una serie di vantaggi, in particolare la flessibilità di avere un backend che supporta diversi frontend per l’applicazione.

Ecco altri vantaggi di WooCommerce headless:

• Maggiore personalizzazione: possiamo costruire l’applicazione WooCommerce come vogliamo utilizzando qualsiasi framework web.
• Migliori prestazioni del sito: possiamo sfruttare framework web veloci come React e Vue per aumentare significativamente le prestazioni del sito.
• Vantaggi SEO: abbiamo un maggiore controllo e flessibilità sulle strategie SEO per raggiungere gli obiettivi dell’azienda.
• Migliore scalabilità: il sito può scalare in modo più efficiente, garantendo prestazioni fluide anche nei periodi di traffico elevato.
• Possibilità di creare esperienze uniche per i clienti: siamo liberi dai vincoli dei modelli tradizionali. Possiamo creare esperienze innovative e personalizzate per i nostri clienti.

Impostazione di un sito WooCommerce headless

Ecco una guida passaggio per passaggio per configurare un sito WooCommerce:

1. Accediamo alla dashboard MyKinsta
2. Andiamo su Aggiungi servizio > Sito WordPress.
3. Selezioniamo l’opzione Installa WordPress.
4. Nella pagina Aggiungi un nuovo sito WordPress, completiamo i campi richiesti per installare WordPress.
5. Selezioniamo la casella Installa WooCommerce prima di cliccare su Continua.

Attivare il plugin WooCommerce

1. Nella dashboard MyKinsta, clicchiamo su Domini nella barra laterale.
2. Nella pagina dei domini, clicchiamo su Apri l’amministrazione di WordPress.
3. Accediamo alla bacheca di amministrazione di WordPress, andiamo su Plugin, selezioniamo il plugin WooCommerce e attiviamolo.

Configurare WooCommerce per il funzionamento in modalità headless

Per configurare WooCommerce per le operazioni headless:

1. Accedere alla bacheca di amministrazione di WordPress. Nella barra laterale, clicchiamo su WooCommerce > Impostazioni.
2. Nella pagina delle impostazioni, clicchiamo sulla scheda Avanzate. Poi, clicchiamo su API Rest.
3. Ora clicchiamo su Aggiungi chiave.

   

4. Clicchiamo su Crea una chiave API. Diamo una descrizione alla nuova API REST, impostiamo il campo Permessi su Lettura/Scrittura e clicchiamo su Genera chiave API.

   

5. Copiamo la chiave consumatore e il segreto del consumatore e conserviamoli in modo sicuro per utilizzarli nell’applicazione React.
6. Infine, regoliamo la struttura dei Permalink per garantire che i dati JSON vengano restituiti quando si richiede l’API. Nella bacheca di amministrazione di WordPress, clicchiamo su Impostazioni > Permalink e selezioniamo Nome del post.

Prima di procedere, aggiungiamo alcuni prodotti al negozio WooCommerce. Andiamo alla sezione WooCommerce nella bacheca di WordPress, clicchiamo su Prodotti e seguiamo le istruzioni per aggiungere i prodotti. Possiamo anche importare questi prodotti di esempio nel negozio.

Dopo aver configurato WordPress e WooCommerce, siamo pronti a concentrarci sul frontend della nostra applicazione ecommerce headless.

Configurare un progetto React

Ecco come impostare un progetto React:

1. Nella directory che preferiamo, usiamo i seguenti comandi per creare un progetto React:

   # Remember to replace <app-name> with your preferred name
   
   # With npx
   npx create-react-app <app-name> && cd <app-name>
   
   # With yarn
   yarn create react-app <app-name> && cd <app-name>

2. Una volta creato il progetto, creiamo un file .env nella root del progetto e aggiungiamo quanto segue:

   REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
   REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

   Sostituiamo questi dati con la chiave e il segreto del consumatore di WooCommerce generati in precedenza.

3. Successivamente, utilizziamo il comando seguente per installare un pacchetto per la gestione dei percorsi:

   ## With npm
   npm i react-router-dom
   
   ## With yarn
   yarn add react-router-dom

4. Infine, lanciamo il progetto React con il seguente comando:

   ## With npm
   npm start
   
   ## With yarn
   yarn start

Sviluppare il frontend per un sito WooCommerce headless

Un negozio ecommerce di successo mette in mostra i prodotti e facilita gli acquisti. Iniziamo col mostrare i prodotti disponibili nel negozio WooCommerce sul frontend. Questo comporta la richiesta di informazioni all’API di WooCommerce.

L’endpoint per elencare tutti i prodotti è wp-json/wc/v3/products. Questo endpoint deve essere aggiunto all’URL dell’host. Aggiungiamo questa variabile al file .env per il nostro URL di base, che è l’URL host aggiunto all’endpoint products. Aggiorniamo http://example.com con il dominio del sito WooCommerce.

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

Quando effettuiamo una richiesta API, dobbiamo includere nell’URL la chiave e il segreto del consumatore. Una volta combinato, l’URL avrà il seguente aspetto:

https://kinstawoocommerce.kinsta.cloud/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

Effettuiamo le richieste API nell’applicazione React utilizzando l’API Fetch per recuperare i prodotti WooCommerce.

1. Nell’applicazione React, apriamo il file App.js nella cartella src e sostituiamo il suo contenuto con il codice seguente:

   import {Link} from 'react-router-dom';
   import {useEffect, useState} from 'react';
   
   function App() {
       const BASE_URL = process.env.REACT_APP_BASE_URL;
       const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
       const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;
   
       const [products, setProducts] = useState([]);
       const [loading, setLoading] = useState(true);
   
       useEffect(() => {
           const fetchProducts = async () => {
               const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
               const data = await response.json();
               setProducts(data);
               setLoading(false);
           };
   
           fetchProducts();
       }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);
   
       return loading ? (
           <div className="loaderText">
               <h2>Just a moment. Fetching products...</h2>{' '}
           </div>
       ) : (
           <ul>
               {products ? (
                   products.map((product) => (
                       <li key={product.id}>
                           <Link to={`/product/${product.id}`}>
                               <img src={product.images[0].src} alt="Product banner"/>
                               <h2>{product.name}</h2>
                               <p>Sale price: {product.sale_price}</p>
                               <strong>
                                   {product.stock_status === 'instock'
                                       ? 'In stock'
                                       : 'Out of stock'}
                               </strong>
                               <button>Add to Cart</button>
                           </Link>
                       </li>
                   ))
               ) : (
                   <li>No products found</li>
               )}
           </ul>
       );
   }
   
   export default App;

   Questo codice recupera un elenco di prodotti dall’endpoint dell’API di WooCommerce utilizzando l’API Fetch quando il componente viene montato (hookuseEffect ). L’URL dell’endpoint è costruito utilizzando le variabili d’ambiente impostate in precedenza

   Una volta recuperati i dati, aggiorniamo lo stato del componente (products) utilizzando setProducts(response) e impostiamo loading su false utilizzando setLoading(false).

   Mentre i dati vengono recuperati, viene visualizzato un messaggio di caricamento. Una volta che i dati sono stati recuperati e loading è impostato su false, esegue una mappatura dell’array products e rende un elenco di articoli di prodotti utilizzando JavaScript XML(JSX). Ogni prodotto è racchiuso in un componente Link di react-router-dom, che genera un link alla pagina dei dettagli del singolo prodotto in base al suo ID.

   Per ogni prodotto vengono visualizzati il nome, il prezzo, la descrizione (resa con dangerouslySetInnerHTML per iniettare il contenuto HTML), lo stato delle giacenze e un pulsante.

2. Nella cartella src, apriamo il file index.js e sostituiamo il codice con il frammento seguente:

   import React from "react";
   import ReactDOM from "react-dom";
   import { BrowserRouter, Route, Routes } from "react-router-dom";
   import "./index.css";
   import App from "./App";
   
   
   ReactDOM.render(
       <React.StrictMode>
           <div className="container">
               <header>
                   <h1>Kinsta Store</h1>
               </header>
                   <BrowserRouter>
                       <Routes>
                           <Route exact path="/" element={<App />} />
                       </Routes>
                   </BrowserRouter>
   
           </div>
       </React.StrictMode>,
       document.getElementById("root")
   );

   Il componente App viene visualizzato quando la route / viene chiamata nel browser.

3. Eseguiamo l’applicazione per vedere le modifiche.

   ## With npm
   npm start
   
   ## With yarn
   yarn start

   L’applicazione React ora mostra un elenco di prodotti del negozio WooCommerce.

   

Creare pagine di prodotto dinamiche

Ora, per migliorare l’esperienza dell’utente, creiamo delle pagine di prodotto dinamiche utilizzando l’API di WooCommerce. Questa API fornisce un endpoint per recuperare i dati di un singolo prodotto: wp-json/wc/v3/products/<id>. Per utilizzare questo endpoint per recuperare e visualizzare i dati di un singolo prodotto nel negozio, seguiamo questi passaggi:

1. Creiamo un componente ProductDetail.js all’interno della cartella src che recupera e visualizza i dati di un singolo prodotto. Questo componente recupera e visualizza informazioni dettagliate su un singolo prodotto. Funziona in modo simile al codice del file App.js, ma recupera i dettagli di un singolo prodotto.

   import {useState, useEffect} from 'react';
   import {useParams} from 'react-router-dom';
   
   function ProductDetail() {
       const BASE_URL = process.env.REACT_APP_BASE_URL;
       const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
       const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;
   
       const {id} = useParams();
       const [product, setProduct] = useState(null);
   
       useEffect(() => {
           const fetchSingleProductDetails = async () => {
               const response = await fetch(
                   `${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
               );
               const data = await response.json();
               setProduct(data);
           };
           fetchSingleProductDetails();
       }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);
   
       if (!product) {
           return (
               <div className="loaderText">
                   <h2>Fetching product details...</h2>
               </div>
           );
       }
   
       return (
           <div className="product-detail">
               <h2>{product.name}</h2>
               <h4>Original Price: {product.regular_price}</h4>
               <h4>Sale price: {product.sale_price}</h4>
               <img src={product.images[0].src} alt="Product banner"/>
               <strong>
                   {product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}
               </strong>
           </div>
       );
   }
   
   export default ProductDetail;

2. Creiamo una nuova route in index.js e assegniamole il componente ProductDetail. Questo frammento di codice crea una nuova route in index.js e le assegna il componente ProductDetail. In questo modo, quando gli utenti cliccano su un link a un prodotto, vengono indirizzati alla relativa pagina del prodotto.

   // index.js
   …
   import ProductDetail from "./ProductDetail";
   
   ReactDOM.render(
     <React.StrictMode>
     …
                  <Router>
             <Routes>
               <Route exact path="/" element={<App />} />
       {/* the new route */}
               <Route path="/product/:id" element={<ProductDetail />} />
             </Routes>
           </Router>
       </div>
     </React.StrictMode>,
     document.getElementById("root")
   );

   Con queste modifiche, cliccando su qualsiasi prodotto nell’applicazione, gli utenti vengono reindirizzati a una pagina che mostra informazioni dettagliate su quel prodotto specifico.

   

È possibile accedere al codice completo in questo repository GitHub.

Integrare le principali funzionalità di WooCommerce in una configurazione headless

Possiamo costruire le basi dell’inserimento dei prodotti in un’applicazione WooCommerce headless integrando funzioni essenziali come le seguenti:

• Carrelli: possiamo gestire i dati del carrello sul lato client o utilizzare l’archiviazione locale per consentire agli utenti di aggiungere, rimuovere e aggiornare gli articoli senza problemi.
• Processi di checkout: possiamo progettare un checkout semplificato con componenti React, raccogliere le informazioni necessarie, convalidare gli input dell’utente e assicurare un’esperienza di checkout fluida.
• Autenticazione degli utenti: è anche possibile implementare un’autenticazione sicura utilizzando JSON Web Token (JWT) o Open Authorization 2.0 (OAuth2) per migliorare l’esperienza dell’utente con funzioni di registrazione, login e reset della password.
• Elaborazione dei pagamenti: possiamo utilizzare le API dei gateway di pagamento sicuri, come Stripe o PayPal, per le transazioni e i rimborsi.
• Gestione degli ordini: si possono gestire gli ordini e gli stati in modo efficiente con le API di WooCommerce. Possiamo fornire funzioni di facile utilizzo per la cronologia degli ordini, il tracciamento, i resi e i rimborsi e automatizza i processi utilizzando webhook o un’architettura event-driven.

Distribuire il sito WooCommerce headless su Kinsta

Una volta sviluppato il sito WooCommerce headless, distribuirlo sulla piattaforma di hosting WordPress di Kinsta è semplicissimo.

Kinsta offre una serie di vantaggi, tra cui prestazioni elevate, sicurezza e scalabilità, che la rendono la scelta ideale per ospitare un sito ecommerce headless. Se si ha già un sito WordPress che non è su Kinsta, è possibile migrarlo su Kinsta facilmente.

Inoltre, è possibile distribuire gratuitamente un’applicazione React sul servizio di Hosting di Siti Statici di Kinsta: basta inviare il codice al proprio provider Git preferito (Bitbucket, GitHub o GitLab).

Una volta inviato il codice, seguiamo questi passaggi per distribuire il sito:

1. Accediamo alla dashboard MyKinsta.
2. Clicchiamo su Aggiungi servizio, quindi su Sito statico.
3. Selezioniamo un provider Git e clicchiamo su Connetti provider git.
4. Selezioniamo il repository e il branch che vogliamo distribuire. Le impostazioni di build vengono rilevate automaticamente.
5. Assicuriamoci di aggiungere le variabili d’ambiente necessarie dal file .env.

   

6. Infine, clicchiamo su Crea sito per distribuire l’applicazione React.

Ed ecco fatto! Abbiamo distribuito con successo la nostra applicazione WooCommerce headless!

Riepilogo

In questo articolo abbiamo illustrato i numerosi vantaggi e le nuove possibilità di creare negozi online dinamici e performanti creando siti WooCommerce headless.

Separando il frontend dal backend, potete personalizzare il vostro sito per offrire ai clienti esperienze di acquisto più coinvolgenti e personalizzate che beneficiano di prestazioni elevate, sicurezza e scalabilità.

Che siate sviluppatori esperti o alle prime armi, Kinsta vi fornisce il supporto, gli strumenti e le altre risorse di cui avete bisogno per costruire e gestire soluzioni ecommerce innovative e di successo. Diventate clienti di Kinsta oggi stesso per esplorare le possibilità dell’ecommerce headless!

Siete entusiasti delle infinite possibilità offerte da WooCommerce headless per il vostro negozio online? Condividete le vostre idee e domande nei commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).

• LinkedIn