WooCommerce ist eines der beliebtesten WordPress-Plugins für die Erstellung von E-Commerce-Anwendungen. Du kannst WooCommerce nicht nur in einer herkömmlichen WordPress-Anwendung verwenden, sondern auch als Headless-Lösung.

In diesem Artikel erfährst du, wie du eine Headless-WordPress-Anwendung mit React auf Kinsta erstellen kannst.

Einführung in Headless WooCommerce

Der Begriff „Headless E-Commerce“ bezeichnet die Trennung des Backends (Head) vom Frontend (Body) einer E-Commerce-Anwendung. Die Headless-Architektur leitet Anfragen zwischen den Präsentationsschichten (Frontend) und den Anwendungsschichten (Backend) einer E-Commerce-Lösung über APIs weiter.

Die APIs definieren die Interaktionen zwischen den Vermittlern, so dass Unternehmen die Präsentationsschichten ändern können, ohne die Funktionalität der Anwendungsschichten zu beeinträchtigen, und Produkte in mehreren Anwendungsschichten aktualisieren, bearbeiten oder hinzufügen können.

In einer Headless WooCommerce-Anwendung ist die WooCommerce-API ein Vermittler, der die Kommunikation zwischen dem Frontend und dem Backend übernimmt. Zusätzlich zu den oben genannten Vorteilen unterstützt dies die flexible und skalierbare Frontend-Entwicklung und ermöglicht es dir, dich auf die Gestaltung von ansprechenden und dynamischen Benutzeroberflächen mit modernen Technologie-Stacks wie React oder Vue zu konzentrieren.

Außerdem ist die E-Commerce-Infrastruktur durch die Verwendung von Headless WooCommerce zukunftssicher, da sie sich an die sich verändernden Kundenbedürfnisse und den technologischen Fortschritt anpassen lässt. Du kannst Frontend-Komponenten mühelos aktualisieren und gleichzeitig die Stabilität und Zuverlässigkeit der WooCommerce-Plattform im Backend sicherstellen.

Herkömmliche E-Commerce-Anwendung und eine Headless-WooCommerce-Anwendung.
Herkömmliche E-Commerce-Anwendung und eine Headless-WooCommerce-Anwendung.

Dieser moderne Ansatz bietet zahlreiche Vorteile im Vergleich zu traditionellen WordPress-Ecommerce-Konfigurationen.

Jetzt, wo du weißt, was eine Headless WooCommerce-Anwendung ist und welche Vorteile sie bietet, ist es an der Zeit, selbst eine zu erstellen. Mit WordPress, React und dem WooCommerce-Plugin erstellst du eine E-Commerce-Anwendung und stellst sie auf Kinsta bereit.

Voraussetzungen

Bevor du beginnst, solltest du sicherstellen, dass du die folgenden Voraussetzungen erfüllst:

Vorteile von Headless WooCommerce

Wenn du dich für die Headless-Variante deiner WooCommerce-Anwendungen entscheidest, kannst du eine Reihe von Vorteilen nutzen – vor allem die Flexibilität, dass ein Backend verschiedene Frontends für deine Anwendung unterstützt.

Hier sind einige weitere Vorteile von Headless WooCommerce:

  • Bessere Anpassungsmöglichkeiten – Du kannst deine WooCommerce-Anwendung mit einem beliebigen Web-Framework nach deinen Wünschen gestalten.
  • Verbesserte Website-Performance – Du kannst schnelle Web-Frameworks wie React und Vue nutzen, um die Leistung deiner Website deutlich zu steigern.
  • SEO-Vorteile – Du hast mehr Kontrolle und Flexibilität bei SEO-Strategien, um die Ziele deines Unternehmens zu erreichen.
  • Bessere Skalierbarkeit – Deine Website kann effizienter skaliert werden, so dass sie auch in Zeiten hoher Besucherzahlen reibungslos funktioniert.
  • Möglichkeit, einzigartige Kundenerlebnisse zu schaffen – Du bist frei von den Zwängen traditioneller Vorlagen. Du kannst innovative und personalisierte Erlebnisse für deine Kunden schaffen.

Einrichten einer Headless WooCommerce Website

Hier findest du eine Schritt-für-Schritt-Anleitung zur Einrichtung einer WooCommerce-Website:

  1. Melde dich in deinem MyKinsta-Dashboard an
  2. Navigiere zu Service hinzufügen > WordPress-Website.
  3. Wähle die Option WordPress installieren.
  4. Fülle auf der Seite Neue WordPress-Website hinzufügen die Felder aus, die für die Installation von WordPress erforderlich sind.
  5. Aktiviere das Kontrollkästchen WooCommerce installieren, bevor du auf Weiter klickst.
Füge eine neue WordPress-Seite hinzu, die den Titel der Seite, den Benutzernamen des Administrators, das Passwort des Administrators, die E-Mail des Administrators und die Sprachfelder enthält. Unterhalb der Felder befinden sich optionale Plugins wie WooCommerce, Yoast SEO und Easy Digital Downloads. Am unteren Ende der Seite befinden sich die Schaltflächen Zurück und Weiter
Installiere WordPress und das WooCommerce-Plugin.

Aktiviere das WooCommerce-Plugin

  1. Klicke in deinem MyKinsta-Dashboard auf Domains in der Seitenleiste.
  2. Auf der Seite Domains klickst du auf WordPress Admin öffnen.
  3. Melde dich in deinem WordPress Admin Dashboard an, navigiere zu Plugins, wähle das WooCommerce Plugin aus und aktiviere es.
Das Dashboard der WordPress-Administration zeigt die optionalen Plugins an, darunter auch das WooCommerce-Plugin. Jedes Plugin hat eine Schaltfläche Aktivieren und Löschen unterhalb der Option
Aktivieren des WooCommerce-Plugins.

WooCommerce für den Headless-Betrieb konfigurieren

So konfigurierst du WooCommerce für den Headless-Betrieb:

  1. Melde dich in deinem WordPress Admin Dashboard an. Klicke in der Seitenleiste auf WooCommerce > Einstellungen.
  2. Auf der Seite Einstellungen klickst du auf die Registerkarte Erweitert. Klicke dann auf Rest API.
  3. Klicke jetzt auf Schlüssel hinzufügen.

    Auf der Seite "Erweitert" ist die Option "REST API" ausgewählt und daneben befindet sich die Schaltfläche "Schlüssel hinzufügen".
    Hinzufügen des Schlüssels für die REST-API.

  4. Klicke auf Einen API-Schlüssel erstellen. Gib deiner neuen REST-API eine Beschreibung, setze das Feld Berechtigungen auf Lesen/Schreiben und klicke auf API-Schlüssel generieren.

    Seite mit den Schlüsseldetails für die REST-API. Sie enthält die Felder Beschreibung, Benutzer und Berechtigungen. Unterhalb der Felder befindet sich die Schaltfläche API-Schlüssel generieren
    Erzeugen des WooCommerce-API-Schlüssels.

  5. Kopiere den Schlüssel und das Secret und speichere sie sicher für die Verwendung in der React-Anwendung.
  6. Passe schließlich die Permalink-Struktur an, um sicherzustellen, dass bei der Anfrage an die API JSON-Daten zurückgegeben werden. Klicke im WordPress Admin Dashboard auf Einstellungen > Permalinks und wähle Beitragsname.

Bevor du fortfährst, füge einige Produkte zu deinem WooCommerce-Shop hinzu. Navigiere in deinem WordPress-Dashboard zum Bereich WooCommerce, klicke auf Produkte und folge den Anweisungen, um Produkte hinzuzufügen. Du kannst auch diese Beispielprodukte für deinen Shop importieren.

Wenn du WordPress und WooCommerce eingerichtet hast, kannst du dich auf das Frontend deiner Headless E-Commerce-Anwendung konzentrieren.

Ein React-Projekt einrichten

Hier erfährst du, wie du ein React-Projekt einrichtest:

  1. Verwende in deinem bevorzugten Verzeichnis die folgenden Befehle, um ein React-Projekt zu erstellen: 
    # 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. Sobald dein Projekt erstellt ist, erstelle eine .env-Datei im Stammverzeichnis deines Projekts und füge Folgendes hinzu: 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    Ersetze dies durch deinen WooCommerce-Schlüssel und dein Secret, die du zuvor erstellt hast.

  3. Als Nächstes installierst du mit dem folgenden Befehl ein Paket für die Verwaltung von Routen: 
    ## With npm
npm i react-router-dom

## With yarn
yarn add react-router-dom
  4. Starte schließlich das React-Projekt mit dem folgenden Befehl: 
    ## With npm
npm start

## With yarn
yarn start

Entwickle das Frontend für deine Headless WooCommerce-Website

Ein erfolgreicher E-Commerce-Shop präsentiert Produkte und erleichtert den Einkauf. Beginne damit, die im WooCommerce-Shop verfügbaren Produkte im Frontend anzuzeigen. Dazu musst du Anfragen an die WooCommerce-API stellen.

Der Endpunkt, um alle Produkte aufzulisten, ist wp-json/wc/v3/products. Dieser Endpunkt muss an die Host-URL angehängt werden. Füge diese Variable in deine .env-Datei für deine Basis-URL ein. Das ist die Host-URL, an die der Endpunkt products angehängt ist. Aktualisiere http://example.com mit der Domain deiner WooCommerce-Website.

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

Wenn du API-Anfragen stellst, musst du deinen Verbraucherschlüssel und dein Secret in die URL einfügen. Kombiniert sieht die URL wie folgt aus:


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

Lass uns in der React-Anwendung API-Anfragen mit der Fetch-API stellen, um die WooCommerce-Produkte abzurufen.

  1. Öffne in deiner React-Anwendung die Datei App.js im Verzeichnis src und ersetze ihren Inhalt durch den folgenden 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;

    Dieser Code holt eine Liste von Produkten aus dem WooCommerce-API-Endpunkt mit Hilfe der Fetch-API, wenn die Komponente aktiviert wird (useEffect hook). Die Endpunkt-URL wird mithilfe der zuvor festgelegten Umgebungsvariablen erstellt

    Sobald die Daten abgerufen wurden, wird der Status der Komponente (products) mit setProducts(response) aktualisiert und loading mit setLoading(false) auf false gesetzt.

    Während die Daten abgerufen werden, wird eine Ladebestätigung angezeigt. Sobald die Daten abgerufen wurden und loading auf false gesetzt ist, wird das Array products durchlaufen und eine Liste der Produkte mit JavaScript XML (JSX) dargestellt. Jedes Produkt wird in eine Link Komponente von react-router-dom verpackt, die anhand der ID des Produkts einen Link zur Detailseite des jeweiligen Produkts erzeugt.

    Für jedes Produkt werden der Name, der Preis, die Beschreibung (gerendert mit dangerouslySetInnerHTML, um HTML-Inhalte einzubinden), der Lagerbestand und eine Schaltfläche angezeigt.

  2. Öffne im src-Verzeichnis die Datei index.js und ersetze den Code durch das folgende Snippet: 
    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")
);

    Er rendert die Komponente App, wenn die Route / im Browser aufgerufen wird.

  3. Führe deine App aus, um die Änderungen zu sehen. 
    ## With npm
npm start

## With yarn
yarn start

    Die React-Anwendung zeigt jetzt eine Liste mit Produkten aus dem WooCommerce-Shop an.

    Webseite mit einer Liste von Bekleidungsprodukten. Jedes Angebot hat einen Namen, einen Preis und eine Beschreibung, gefolgt von einer Schaltfläche "In den Warenkorb".
    Produktliste aus dem WooCommerce-Shop.

Dynamische Produktseiten erstellen

Um das Nutzererlebnis zu verbessern, erstellst du jetzt dynamische Produktseiten mit der WooCommerce API. Diese API bietet einen Endpunkt zum Abrufen von Daten über ein einzelnes Produkt: wp-json/wc/v3/products/<id>. Um diesen Endpunkt zu verwenden, um Daten über ein einzelnes Produkt im Laden abzurufen und anzuzeigen, befolge diese Schritte:

  1. Erstelle eine Komponente ProductDetail.js im src-Verzeichnis, die Daten über ein einzelnes Produkt abruft und anzeigt. Diese Komponente holt detaillierte Informationen über ein einzelnes Produkt ab und zeigt sie an. Sie funktioniert ähnlich wie der Code in der Datei App.js, nur dass sie Details für ein einzelnes Produkt abruft. 
    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. Erstelle eine neue Route in index.js und weise ihr die Komponente ProductDetail zu. Dieser Codeschnipsel erstellt eine neue Route in index.js und weist ihr die Komponente ProductDetail zu. Dadurch wird sichergestellt, dass die Nutzer beim Anklicken eines Produktlinks auf die entsprechende Produktseite geleitet werden. 
    // 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")
);

    Mit diesen Änderungen werden die Nutzer/innen beim Anklicken eines beliebigen Produkts in der Anwendung auf eine Seite mit detaillierten Informationen über das jeweilige Produkt weitergeleitet.

    Detaillierte Informationen über ein Bekleidungsprodukt.
    Detaillierte Informationen über ein Bekleidungsprodukt.

Du kannst den kompletten Code in diesem GitHub-Repository einsehen.

Integriere wichtige WooCommerce-Funktionen in ein Headless-Setup

Du kannst auf der Grundlage der Auflistung von Produkten in einer Headless-WooCommerce-Anwendung aufbauen, indem du wichtige Funktionen wie die folgenden integrierst:

  • Warenkörbe – Verwalte die Daten deines Warenkorbs auf der Client-Seite oder verwende einen lokalen Speicher, damit die Nutzer/innen nahtlos Artikel hinzufügen, entfernen und aktualisieren können.
  • Checkout-Prozesse – Gestalte einen optimierten Checkout mit React-Komponenten, sammle die notwendigen Informationen, überprüfe die Benutzereingaben und sorge für einen reibungslosen Checkout-Prozess.
  • Benutzerauthentifizierung – Implementiere eine sichere Authentifizierung mit JSON Web Token (JWT) oder Open Authorization 2.0 (OAuth2), um das Benutzererlebnis mit Funktionen zur Registrierung, Anmeldung und Passwortrücksetzung zu verbessern.
  • Zahlungsabwicklung – Nutze sichere Zahlungs-Gateway-APIs wie Stripe oder PayPal für Transaktionen und Rückerstattungen.
  • Auftragsverwaltung – Verwalte Aufträge und Status effizient mit der WooCommerce-API. Biete benutzerfreundliche Funktionen für den Bestellverlauf, die Nachverfolgung, Rücksendungen und Rückerstattungen und automatisiere Prozesse mit Webhooks oder einer ereignisgesteuerten Architektur.

Bereitstellen deiner Headless WooCommerce-Website auf Kinsta

Sobald du deine WooCommerce-Website entwickelt hast, kannst du sie ganz einfach auf der WordPress-Hosting-Plattform von Kinsta bereitstellen.

Kinsta bietet eine Reihe von Vorteilen, darunter hohe Leistung, robuste Sicherheit und Skalierbarkeit, und ist damit die ideale Wahl für das Hosting deiner Headless E-Commerce-Website. Wenn du bereits eine WordPress-Website hast, die nicht auf Kinsta gehostet wird, kannst du sie ganz einfach zu Kinsta migrieren.

Außerdem kannst du deine React-Anwendung kostenlos auf dem statischen Seiten Hosting Service von Kinsta bereitstellen – du musst nur deinen Code bei deinem bevorzugten Git-Anbieter (Bitbucket, GitHub oder GitLab) pushen.

Sobald du deinen Code veröffentlicht hast, folgst du diesen Schritten, um deine Website bereitzustellen:

  1. Melde dich in deinem MyKinsta-Dashboard an.
  2. Klicke auf Dienst hinzufügen und dann auf Statische Website.
  3. Wähle einen Git-Anbieter und klicke auf Git-Anbieter verbinden.
  4. Wähle das Repository und den Zweig aus, den du bereitstellen möchtest. Die Build-Einstellungen werden automatisch erkannt.
  5. Achte darauf, dass du alle notwendigen Umgebungsvariablen aus deiner .env-Datei hinzufügst.

    Seite mit Umgebungsvariablen mit Feldern für Schlüssel- und Wertepaare. Unten rechts befindet sich die Schaltfläche Seite erstellen
    Hinzufügen von Umgebungsvariablen.

  6. Klicke abschließend auf Seite erstellen, um deine React-Anwendung bereitzustellen.

Du hast deine Headless WooCommerce-Anwendung erfolgreich bereitgestellt!

Zusammenfassung

In diesem Artikel wurden die zahlreichen Vorteile und neuen Möglichkeiten für die Erstellung dynamischer und leistungsstarker Onlineshops durch die Einrichtung von Headless WooCommerce-Websites erläutert.

Durch die Entkopplung des Frontends vom Backend kannst du deine Website so anpassen, dass du deinen Kunden ein ansprechendes und personalisiertes Einkaufserlebnis bieten kannst, das von hoher Leistung, robuster Sicherheit und Skalierbarkeit profitiert.

Egal, ob du ein erfahrener Entwickler bist oder gerade erst anfängst, Kinsta bietet dir den Support, die Tools und andere Ressourcen, die du brauchst, um innovative und erfolgreiche E-Commerce-Lösungen zu entwickeln und zu verwalten. Hoste noch heute mit Kinsta und entdecke die Möglichkeiten des Headless E-Commerce!

Bist du begeistert von den unendlichen Möglichkeiten von WooCommerce für deinen Online-Shop? Teile deine Erkenntnisse oder Fragen in den Kommentaren unten mit.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).