WooCommerce is een van de populairste WordPress plugins voor het bouwen van e-commerce toepassingen. Naast het gebruik van WooCommerce in een traditionele WordPress applicatie, kun je het ook gebruiken als een headless oplossing.

In dit artikel leer je hoe je een headless WordPress applicatie met React kunt bouwen op Kinsta.

Inleiding tot headless WooCommerce

De term “headless e-commerce” betekent de scheiding tussen de backend (head) en de frontend (body) van een e-commerce applicatie. Headless architectuur stuurt verzoeken tussen de presentatielagen (frontend) en de applicatielagen (backend) van een e-commerce oplossing door middel van API’s.

De API’s definiëren interacties tussen intermediaries, waardoor bedrijven de presentatielagen kunnen wijzigen zonder de functionaliteit van applicatielagen te verstoren en producten kunnen bijwerken, bewerken of toevoegen aan meerdere applicatielagen.

In een headless WooCommerce applicatie is de WooCommerce API een tussenpersoon die de communicatie verzorgt tussen de frontend en backend. Naast de bovengenoemde voordelen ondersteunt dit flexibele en schaalbare frontend ontwikkeling, zodat je je kunt richten op het maken van aantrekkelijke en dynamische gebruikersinterfaces met moderne technologiestacks zoals React of Vue.

Bovendien maakt het gebruik van headless WooCommerce de e-commerce infrastructuur toekomstbestendig door je te helpen je aan te passen aan veranderende behoeften van klanten en technologische vooruitgang. Je kunt moeiteloos frontend componenten updaten terwijl je de stabiliteit en betrouwbaarheid van het backend WooCommerce platform waarborgt.

Traditionele e-commerce applicatie en een headless WooCommerce applicatie.
Traditionele e-commerce applicatie en een headless WooCommerce applicatie.

Deze moderne benadering biedt talloze voordelen ten opzichte van traditionele WordPress e-commerce opstellingen.

Nu je begrijpt wat een headless WooCommerce applicatie is en wat de voordelen ervan zijn, is het tijd om er zelf een te bouwen. Met behulp van WordPress, React en de WooCommerce plugin maak je een e-commerce app en deploy je die op Kinsta.

Vereisten

Voordat je begint, moet je ervoor zorgen dat je over het volgende beschikt:

Voordelen van headless WooCommerce

Als je de headless route kiest voor je WooCommerce applicaties, profiteer je van een reeks voordelen – met name de flexibiliteit om met één backend verschillende frontends voor je applicatie te ondersteunen.

Hier zijn enkele andere voordelen van headless WooCommerce:

  • Verbeterde aanpasbaarheid – Je kunt je WooCommerce applicatie bouwen zoals jij dat wilt met elk webframework.
  • Verbeterde websiteprestaties – Je kunt gebruik maken van snelle webframeworks zoals React en Vue om de prestaties van je site aanzienlijk te verbeteren.
  • SEO voordelen – Je hebt meer controle en flexibiliteit over SEO-strategieën om de doelen van je bedrijf te bereiken.
  • Betere schaalbaarheid – Je site kan efficiënter worden geschaald, zodat hij zelfs in perioden met veel verkeer soepel presteert.
  • Mogelijkheid om unieke klantervaringen te creëren – Je bent vrij van de beperkingen van traditionele templates. Je kunt innovatieve en persoonlijke ervaringen voor je klanten creëren.

Een headless WooCommerce site opzetten

Hier is een stap-voor-stap handleiding voor het opzetten van een WooCommerce site:

  1. Log in op je MyKinsta dashboard
  2. Navigeer naar Dienst toevoegen > WordPress site.
  3. Selecteer de optie WordPress installeren.
  4. Vul op de pagina Nieuwe WordPress site toevoegen de velden in die nodig zijn om WordPress te installeren.
  5. Vink het vakje WooCommerce installeren aan voordat je op Doorgaan klikt.
Nieuwe WordPress sitepagina toevoegen met sitetitel, gebruikersnaam admin, wachtwoord admin, e-mail admin en taalvelden. Onder de velden staan optionele plugins waaronder WooCommerce, Yoast SEO en Easy Digital Downloads. Onderaan de pagina staan de knoppen Terug en Doorgaan
WordPress en de WooCommerce plugin installeren.

De WooCommerce plugin activeren

  1. Klik op je MyKinsta dashboard op Domeinen in de zijbalk.
  2. Klik op de pagina Domeinen op WordPress Admin openen.
  3. Log in op je WordPress Admin dashboard, navigeer naar plugins, selecteer de WooCommerce plugin en activeer deze.
Het WordPress Admin dashboard toont de optionele plugins die beschikbaar zijn, inclusief de WooCommerce plugin. Elke plugin heeft een knop Activeren en Verwijderen onder de optie
De WooCommerce plugin activeren.

WooCommerce configureren voor headless werking

Om WooCommerce te configureren voor headless werking:

  1. Log in op je WordPress Admin dashboard. Klik in de zijbalk op WooCommerce > Settings.
  2. Klik op de pagina Settings op het tabblad Advanced. Klik vervolgens op Rest API.
  3. Klik nu op Add key.

    Geavanceerde pagina met de optie REST API geselecteerd en een knop Sleutel toevoegen ernaast
    De sleutel voor de REST API toevoegen.

  4. Klik op Create API key. Geef je nieuwe REST API een beschrijving, zet het veld Premissions op Read/Write en klik op Generate API key.

    Pagina met sleuteldetails voor de REST API. Het heeft velden voor Beschrijving, Gebruiker en Rechten. Onder de velden staat een knop API-sleutel genereren
    De WooCommerce API sleutel genereren.

  5. Kopieer de consumer key en de secret en sla ze veilig op voor gebruik in de React applicatie.
  6. Pas tot slot de Permalink structuur aan om ervoor te zorgen dat JSON gegevens worden geretourneerd bij het aanvragen van de API. Klik op het WordPress Admin dashboard op Settings > Permalinks en selecteer Post name.

Voordat je verder gaat, voeg je een aantal producten toe aan je WooCommerce winkel. Navigeer naar de WooCommerce sectie in je WordPress dashboard, klik op Producten en volg de aanwijzingen om producten toe te voegen. Je kunt ook deze voorbeeldproducten importeren voor je winkel.

Met WordPress en WooCommerce ingesteld, ben je klaar om je te richten op de voorkant van je headless e-commerce applicatie.

Een React project opzetten

Hier lees je hoe je een React project opzet:

  1. Gebruik in je voorkeursmap de volgende commando’s om een React project aan te maken: 
    # 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. Zodra je project is gemaakt, maak je een .env bestand in de root van je project en voeg je het volgende toe: 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    Vervang dit door je eerder gegenereerde WooCommerce consumer key en secret.

  3. Gebruik vervolgens de onderstaande opdracht om een pakket te installeren voor het beheren van routes: 
    ## With npm
npm i react-router-dom

## With yarn
yarn add react-router-dom
  4. Start tot slot het React project met het volgende commando: 
    ## With npm
npm start

## With yarn
yarn start

De frontend voor je headless WooCommerce site ontwikkelen

Een succesvolle e-commerce winkel laat producten zien en vergemakkelijkt aankopen. Begin met het weergeven van de producten die beschikbaar zijn in de WooCommerce winkel op de frontend. Hiervoor moet je verzoeken doen aan de WooCommerce API.

Het eindpunt om alle producten te tonen is wp-json/wc/v3/products. Dit eindpunt moet worden toegevoegd aan de host URL. Voeg deze variabele toe aan je .env bestand voor je basis URL, wat de host URL is die is toegevoegd aan het products eindpunt. Werk http://example.com bij met het domein van je WooCommerce site.

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

Als je API verzoeken doet, moet je je consumer key en secret in de URL opnemen. In combinatie ziet de URL er als volgt uit:


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

Laten we API verzoeken doen in de React applicatie met behulp van de Fetch API om de WooCommerce producten op te halen.

  1. Open in je React applicatie het App.js bestand in de src directory en vervang de inhoud door de onderstaande code: 
    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;

    Deze code haalt een lijst met producten op van het WooCommerce API endpoint met behulp van de Fetch API wanneer het component mount (useEffect hook). De URL van het eindpunt wordt geconstrueerd met behulp van omgevingsvariabelen die eerder zijn ingesteld

    Zodra de gegevens zijn opgehaald, wordt de componentstatus bijgewerkt (products) met behulp van setProducts(response) en wordt loading ingesteld op false met behulp van setLoading(false).

    Terwijl de gegevens worden opgehaald, wordt een laadbericht weergegeven. Zodra de gegevens zijn opgehaald en loading is ingesteld op false, wordt de array products doorlopen en wordt een lijst met productitems weergegeven met JavaScript XML(JSX). Elk productitem wordt verpakt in een Link component van react-router-dom, die een link genereert naar de detailpagina van het individuele product op basis van zijn ID.

    Voor elk product worden de naam, prijs, beschrijving (weergegeven met dangerouslySetInnerHTML om HTML-inhoud te injecteren), voorraadstatus en een knop weergegeven.

  2. Open het bestand index.js in de map src en vervang de code door het onderstaande fragment: 
    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")
);

    De App component wordt weergegeven wanneer de / route wordt aangeroepen in de browser.

  3. Start je app om de wijzigingen te bekijken. 
    ## With npm
npm start

## With yarn
yarn start

    De React applicatie toont nu een lijst met producten uit de WooCommerce winkel.

    Webpagina met een lijst van kledingproducten. Elke aanbieding heeft een naam, een prijs en een beschrijving en wordt gevolgd door een knop Toevoegen aan winkelwagentje.
    Productlijst van de WooCommerce-winkel.

Dynamische productpagina’s maken

Om de gebruikerservaring te verbeteren kun je nu dynamische productpagina’s maken met behulp van de WooCommerce API. Deze API biedt een eindpunt om gegevens over een enkel product op te halen: wp-json/wc/v3/products/<id>. Volg deze stappen om dit eindpunt te gebruiken om gegevens over een enkel product in de winkel op te halen en weer te geven:

  1. Maak een component ProductDetail.js in de src directory dat gegevens over een enkel product ophaalt en weergeeft. Dit component haalt gedetailleerde informatie op over een enkel product en geeft die weer. Het werkt op dezelfde manier als de code in het App.js bestand, behalve dat het details ophaalt voor een enkel product. 
    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. Maak een nieuwe route in index.js en wijs de component ProductDetail daaraan toe. Dit codefragment maakt een nieuwe route in index.js en wijst de component ProductDetail toe. Dit zorgt ervoor dat wanneer gebruikers op een productlink klikken, ze naar de betreffende productpagina worden geleid. 
    // 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")
);

    Met deze aanpassingen worden gebruikers door het klikken op een willekeurig product in de applicatie omgeleid naar een pagina met gedetailleerde informatie over dat specifieke product.

    Gedetailleerde informatie over een kledingproduct.
    Gedetailleerde informatie over een kledingproduct.

Je kunt de volledige code bekijken in deze GitHub repository.

Belangrijke WooCommerce features integreren in een headless setup

Je kunt voortbouwen op de basis van het weergeven van producten in een headless WooCommerce applicatie door essentiële features zoals de volgende te integreren:

  • Winkelwagens – Beheer winkelwagengegevens aan de klantzijde of gebruik lokale opslag om gebruikers naadloos items te laten toevoegen, verwijderen en bijwerken.
  • Afrekenprocessen – Ontwerp een gestroomlijnde checkout met React-componenten, verzamel de benodigde informatie, valideer gebruikersinvoer en zorg voor een soepele afrekenervaring.
  • Gebruikersauthenticatie – Implementeer veilige authenticatie met behulp van JSON Web Token (JWT) of Open Authorization 2.0 (OAuth2) om de gebruikerservaring te verbeteren met functies voor registratie, inloggen en het resetten van wachtwoorden.
  • Betalingsverwerking – Gebruik veilige API’s voor betalingsgateways, zoals Stripe of PayPal, voor transacties en terugbetalingen.
  • Order beheer – Beheer bestellingen en statussen efficiënt met de WooCommerce API. Zorg voor gebruiksvriendelijke functies voor bestelgeschiedenis, tracering, retouren en terugbetalingen, en automatiseer processen met behulp van webhooks of event-driven architectuur.

Deploy je headless WooCommerce site op Kinsta

Zodra je je headless WooCommerce site hebt ontwikkeld, is het implementeren ervan op Kinsta’s WordPress Hosting platform eenvoudig.

Kinsta biedt een reeks voordelen, waaronder hoge prestaties, robuuste beveiliging en schaalbaarheid, waardoor het een ideale keuze is voor het hosten van je headless e-commerce site. Als je al een WordPress site hebt die niet op Kinsta staat, kun je deze eenvoudig migreren naar Kinsta.

Bovendien kun je je React applicatie gratis deployen op Kinsta’s Statische Site Hosting dienst – het enige wat je hoeft te doen is je code naar de Git provider van je voorkeur te pushen (Bitbucket, GitHub of GitLab).

Zodra je je code hebt gepushed, volg je deze stappen om je site te deployen:

  1. Log in op je MyKinsta dashboard.
  2. Klik op Dienst toevoegen en dan op Statische site.
  3. Selecteer een Git provider en klik op Git provider verbinden.
  4. Selecteer de repository en de branch die je wilt deployen. De bouwinstellingen worden automatisch gedetecteerd.
  5. Zorg ervoor dat je alle benodigde omgevingsvariabelen uit je .env bestand toevoegt.

    Pagina met omgevingsvariabelen met velden voor sleutel- en waardeparen. Er is een knop Maak site aan onderaan rechts
    Omgevingsvariabelen toevoegen.

  6. Klik ten slotte op Site maken om je React applicatie te deployen.

Je hebt met succes je headless WooCommerce applicatie geïmplementeerd!

Samenvatting

In dit artikel zijn de vele voordelen en nieuwe mogelijkheden uitgelegd voor het maken van dynamische en goed presterende online winkels door headless WooCommerce sites op te zetten.

Door de frontend los te koppelen van de backend, kun je je site aanpassen om klanten meer aantrekkelijke en gepersonaliseerde winkelervaringen te bieden die profiteren van hoge prestaties, robuuste beveiliging en schaalbaarheid.

Of je nu een doorgewinterde ontwikkelaar bent of net begint, Kinsta biedt de ondersteuning, tools en andere middelen die je nodig hebt om innovatieve en succesvolle e-commerce oplossingen te bouwen en te beheren. Host vandaag nog met Kinsta om de mogelijkheden van headless e-commerce te verkennen!

Ben je enthousiast over de eindeloze mogelijkheden van headless WooCommerce voor je webwinkel? Deel je inzichten of vragen in de reacties hieronder.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).