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:
- Accediamo alla dashboard MyKinsta
- Andiamo su Aggiungi servizio > Sito WordPress.
- Selezioniamo l’opzione Installa WordPress.
- Nella pagina Aggiungi un nuovo sito WordPress, completiamo i campi richiesti per installare WordPress.
- Selezioniamo la casella Installa WooCommerce prima di cliccare su Continua.
Attivare il plugin WooCommerce
- Nella dashboard MyKinsta, clicchiamo su Domini nella barra laterale.
- Nella pagina dei domini, clicchiamo su Apri l’amministrazione di WordPress.
- 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:
- Accedere alla bacheca di amministrazione di WordPress. Nella barra laterale, clicchiamo su WooCommerce > Impostazioni.
- Nella pagina delle impostazioni, clicchiamo sulla scheda Avanzate. Poi, clicchiamo su API Rest.
- Ora clicchiamo su Aggiungi chiave.
Come aggiungiere la chiave per l’API REST. - 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.
Generazione della chiave API di WooCommerce. - Copiamo la chiave consumatore e il segreto del consumatore e conserviamoli in modo sicuro per utilizzarli nell’applicazione React.
- 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:
- 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> - 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_secretSostituiamo questi dati con la chiave e il segreto del consumatore di WooCommerce generati in precedenza.
- 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 - 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/productsQuando 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_secretEffettuiamo le richieste API nell’applicazione React utilizzando l’API Fetch per recuperare i prodotti WooCommerce.
- 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 (hook
useEffect). L’URL dell’endpoint è costruito utilizzando le variabili d’ambiente impostate in precedenzaUna volta recuperati i dati, aggiorniamo lo stato del componente (
products) utilizzandosetProducts(response)e impostiamoloadingsufalseutilizzandosetLoading(false).Mentre i dati vengono recuperati, viene visualizzato un messaggio di caricamento. Una volta che i dati sono stati recuperati e
loadingè impostato sufalse, esegue una mappatura dell’arrayproductse rende un elenco di articoli di prodotti utilizzando JavaScript XML(JSX). Ogni prodotto è racchiuso in un componenteLinkdireact-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
dangerouslySetInnerHTMLper iniettare il contenuto HTML), lo stato delle giacenze e un pulsante. - 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
Appviene visualizzato quando la route/viene chiamata nel browser. - Eseguiamo l’applicazione per vedere le modifiche.
## With npm npm start ## With yarn yarn startL’applicazione React ora mostra un elenco di prodotti del negozio WooCommerce.
Elenco dei 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:
- 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; - 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 componenteProductDetail. 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.
Informazioni dettagliate su un prodotto di abbigliamento.
È 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:
- Accediamo alla dashboard MyKinsta.
- Clicchiamo su Aggiungi servizio, quindi su Sito statico.
- Selezioniamo un provider Git e clicchiamo su Connetti provider git.
- Selezioniamo il repository e il branch che vogliamo distribuire. Le impostazioni di build vengono rilevate automaticamente.
- Assicuriamoci di aggiungere le variabili d’ambiente necessarie dal file .env.
Aggiunta di variabili d’ambiente. - 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.
Lascia un commento