In questo articolo vedremo come consumare le API di WooCommerce con REACT. Non è un argomento semplice, soprattutto per chi non confidenza con argomenti quali sistemi distribuiti, architettura RESTful, endpoint. Per cui un’introduzione esplicativa è doverosa. API è l'acronimo di application programming interface e in sostanza serve a rendere disponibili pubblicamente delle funzionalità di un'applicazione. In questa maniera, altri sistemi, non necessariamente scritti con la stessa tecnologia, possono sfruttare questa risorsa.
Nel caso specifico, noi andremo a visualizzare i prodotti di WooCommerce che è un plugin di Wordpress (software scritto in PHP) attraverso REACT che invece è un software scritto in JavaScript. Per cui, ricapitolando, l’API è un punto di accesso standard, libero dal vincolo tecnologico che costringe il resto dell’applicazione.
Abilitare le API di WooCommerce
Abbiamo quindi bisogno di Wordpress e del suo plugin WooCommerce, in rete si trovano tonnellate di guide su come installarli, per cui andiamo direttamente al punto della questione: abilitare le API.
Dal pannello amministrazione di WP, nella sezione WooCommerce clicchiamo su Impostazioni e poi su Avanzate. Nella schermata successiva clicchiamo su API REST.
Ora dobbiamo generare le credenziali di accesso per essere autorizzati a consumare le API. La procedura è semplicissima, clicchiamo su Aggiungi Chiave. Inseriamo una descrizione per la chiave, lasciando invariati gli altri parametri, soprattutto per quanto riguarda la voce Autorizzazioni: lasciare in Lettura. Dopo aver confermato, il sistema ci restituirà le chiavi di accesso.
Annotiamole da qualche parte perché non sarà possibile recuperarle in un secondo tempo.
Testare le API con un Tool
Ora testeremo le nostre API. Per farlo possiamo usare un tool come POSTMAN. Io personalmente utilizzo Insomnia, perché è molto più leggero. Mi sono scordato di dirvi che l’installazione di Wordpress deve girare in HTTPS, altrimenti avremo problemi con l’autenticazione. Il tool ci chiede che tipo di richiesta vogliamo fare, GET o POST. Ovviamente dobbiamo testare una GET, direi la lista di tutti i prodotti. L’endpoint sarà quindi:
https://dominio.tld/wp-json/wc/v3/products
Clicando su Send vedremo che la risposta avrà un codice 401, ossia non siamo autorizzati. Avete annotato le credenziali che vi ha fornito WooCommerce? Bene, perché è il momento di usarle. Individutale il menu Auth o Authorization (dipende da che tool state utilizzando) e dal dropdown selezionate Basic Auth. Inserite le due chiavi come username e password. Chiave pubblica = username, chiave nascosta = password.
A questo punto la richiesta è valida e può essere processata. Nel riquadro della risposta dovreste vedere un JSON contenente tutti i vostri prodotti, con un limite prefissato a 10 records. Se volete aumentare il numero dei records, basterà aggiungere il parametro per_page all’endpoint
https://dominio.tld/wp-json/wc/v3/products?per_page=20
Ovviamente dovete avere qualche prodotto inserito sull’e-commerce, altrimenti il JSON sarà vuoto. Per quanto riguarda la documentazione delle API di WooCommerce trovate tutto qui: https://woocommerce.github.io/woocommerce-rest-api-docs/
Creazione componente React
Nel tutorial precedente, abbiamo visto come creare un Componente con REACT. Useremo quella classe per consumare le API di WooCommerce. Primo step, installare axios e importarlo nel componente. Axios è una libreria JavaScript utilizzata per effettuare richieste HTTP da node.js o XMLHttpRequests da browser che supportano l’oggetto Promise introdotto con l’ECMAScript 6. Semplificando al massimo, una Promise è una “promessa” al codice, che una volta completata restituirà un valore.
Da terminale lanciamo
npm install axios
E una volta finita l’installazione nel progetto, importiamo il modulo.
import Axios from 'axios';
Il nostro componente deve presentarsi così, se avete preso spunto dal tutorial precedente:
import React from "react";
import Axios from 'axios';
class Test extends React.Component
{
render() {
return(
<div>Sono un nuovo componente</div>
)
}
}
Ok, adesso andiamo a impostare la macchina stati del componente. I componenti React hanno un oggetto state incorporato, dove possiamo memorizzare i valori delle proprietà che appartengono al componente. Quando l’oggetto state cambia, il componente esegue nuovamente il rendering.
state = {
products: null
}
Ho definito l’oggetto con una sola proprietà, con valore null. Andremo a cambiare questo valore quando axios ci restituirà i dati provenienti dall’API.
Scriviamo il metodo che svolgerà questo compito e poi lo commentiamo insieme:
async getProductsData() {
const url = 'https://dominio.tld/wp-json/wc/v3/products',
reponse = await Axios.get(url, {
auth: {
// Chiave Pubblica
username: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
// Chiave privata
password: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
}
});
this.setState({
products: reponse.data
});
}
Allora, come prima cosa ho anteposto la keyword async al metodo. Cosa significa questo? Significa che ho istruito JavaScript che quel metodo restituisce una Promise. All’interno del metodo abbiamo la richiesta GET con Axios, dove abbiamo anteposto la keyword await, in modo che JavaScript attenda che la Promise venga risolta. Fate attenzione alla configurazione di Axios, dove ho inserito i parametri necessari per l’autenticazione.
Alla fine, attraverso il metodo nativo di React.Component setState ho cambiato il valore dell’oggetto state.
Adesso utilizziamo il metodo componentDidMount dell’interfaccia ComponentLifecycle, richiamato immediatamente dopo che il componente viene montato, per settare lo state.
async componentDidMount(){
await this.getProductsData();
}
Il prossimo step è la stesura del metodo per impaginare i dati. Suggerisco d’importare anche Bootstrap per avere a disposizione i suoi fogli di stile. Da terminale:
npm install react-bootstrap bootstrap
E importiamo solo il CSS
import 'bootstrap/dist/css/bootstrap.min.css';
Passiamo al metodo per impaginare i dati. All’interno della proprietà products dell’oggetto state abbiamo immagizanto il JSON che l’API restituisce, ci basterà mapparlo e strutturare le sue prorprietà. Qualcosa del genere:
renderProducts(){
const data = this.state.products;
return(
data.map((product,index) => {
return
<div className="card col-md-4">
<img className="card-img-top" alt="immagine causale" src={product.images[0].src}/>
<div className="card-body">
<h5 className="card-title">{product.name}</h5>
<p className="card-text">{product.description}</p>
<a href="#" className="btn btn-primary">Compralo a {product.price} €</a>
</div>
</div>
})
)
}
Ultimo step, il render del componente
render() {
const products = this.state.products;
return(
<div className="container">
<h3>Compra i nostri prodotti</h3>
<div className="row">{products && this.renderProducts()}</div>
</div>
)
}
Si faccia attenzione alla condizione {products && this.renderProducts()} nel JSX. Funziona perché in JavaScript, true && espressione si risolve sempre in espressione, mentre false && espressione si risolve sempre in false.
Codice Componente Completo
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Axios from 'axios';
class Test extends React.Component
{
state = {
products: null
}
async componentDidMount(){
await this.getProductsData();
}
async getProductsData() {
const url = 'https://dominio.tld/wp-json/wc/v3/products',
reponse = await Axios.get(url, {
auth: {
// Chiave pubblica
username: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
// Chiave privata
password: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
}
});
this.setState({products: reponse.data});
}
renderProducts(){
const data = this.state.products;
return(
data.map((product,index) => {
return <div className="card col-md-4">
<img className="card-img-top" alt="immagine causale" src={product.images[0].src}/>
<div className="card-body">
<h5 className="card-title">{product.name}</h5>
<p className="card-text">{product.description}</p>
<a href="#" className="btn btn-primary">Compralo a {product.price} €</a>
</div>
</div>
})
)
}
render() {
const products = this.state.products;
return(
<div className="container">
<h3>Compra i nostri prodotti</h3>
<div className="row">{products && this.renderProducts()}</div>
</div>
)
}
}
export default Test;
Guarda il VideoTutorial