Introduktion
Allt fler WordPress-byråer börjar titta bortom WooCommerce som sin standardlösning för e-handel. Prestandaproblem, plugin-konflikter och begränsningar i skalbarhet får både kunder och utvecklare att söka mer moderna och modulära alternativ.
Det är här headless e-handel kommer in i bilden. Med en headless-arkitektur kan du frikoppla CMS:et från e-handelsmotorn, vilket ger mer flexibilitet, bättre prestanda och en smidigare utvecklingsupplevelse.
Och det bästa av allt? Du behöver inte lämna WordPress. I den här guiden går vi igenom hur du sätter upp ett lokalt Vendure-backend och kopplar det till en WordPress-installation med Elementor och ett färdigbyggt headless-gränssnitt.
Det du behöver
Innan vi börjar, se till att du har följande:
Tekniska förutsättningar
- Node.js och npm installerat
- En lokal WordPress-installation med Elementor (verktyg som LocalWP eller DevKinsta fungerar bra)
- Elementor Pro rekommenderas för Theme Builder-funktioner
- Grundläggande kunskaper i kommandoraden
Verktyg vi använder
- Vendure – Headless e-handelsmotor (körs lokalt)
- WordPress + Elementor – För innehåll och layout
- Vårt färdigbyggda Elementor Storefront-paket (plugin eller komponentbibliotek)
Steg 1: Sätt upp Vendure lokalt
Först skapar vi en lokal Vendure-instans. Vendure tillhandahåller ett CLI-verktyg för att snabbt generera ett projekt:
npx @vendure/create my-shop
cd my-shop
npm run build
npm run dev
Detta startar en lokal utvecklingsserver på http://localhost:3000.
Du har nu:
- Shop API: http://localhost:3000/shop-api
- Admin UI: http://localhost:3000/admin
- Ett fungerande produktkatalog med exempeldata
Du kan använda Admin UI för att utforska produkter, ordrar och inställningar, men i den här guiden behöver vi bara Shop API, som är offentligt som standard och inte kräver autentisering för grundläggande frågor.
Steg 2: Installera headless-butiken i WordPress
När Vendure är igång är det dags att sätta upp butikens frontend i WordPress.
1. Installera vårt storefront-plugin
Detta plugin registrerar en uppsättning anpassade Elementor-widgets (eller block) som kommunicerar med Vendure-API:et. Du kan använda dessa widgets för att visa:
- Produktgrid
- Produktdetaljvy
- Kundvagn och kassa
- “Lägg i varukorg”-knappar
2. Konfigurera API-anslutningen
I pluginets inställningar:
- Ange din API-endpoint till http://localhost:3000/shop-api
Ingen API-nyckel krävs för att läsa produktdata eller lägga ordrar via Shop API.
Steg 3: Bygg din första butik med Elementor
När både backend och frontend är igång är det dags att skapa en butik.
1. Skapa en ny sida i WordPress
Använd Elementor för att dra in följande widgets:
- Product Grid – Visar produktlistningar från Vendure
- Product Detail – Mall för individuella produktsidor
- Cart + Checkout – Placera dessa på dina kundvagns- och kassasidor
Varje komponent kopplas automatiskt till ditt Vendure-backend via API:et.
2. Anpassa layout och design
Använd Elementors visuella kontroller för att:
- Justera antal kolumner i produktgriden
- Lägga till kategorifilter eller taggar
- Styla knappar, formulär och layout så de matchar ditt varumärke
3. Testa hela köpflödet
Öppna webbplatsen i en ny flik och gå igenom hela flödet:
- Bläddra bland produkter
- Lägg till i kundvagn
- Gå till kassan
- Bekräfta att ordern syns i Vendure Admin
Du har nu en fungerande headless-butik – driven av WordPress för innehåll och Vendure för e-handel.
Avslutning
Denna setup gör det möjligt för din byrå att erbjuda modern headless e-handel utan att lämna WordPress-ekosystemet. Med endast ett lokalt Vendure-backend och en färdig Elementor-integration kan du skapa snabba, flexibla butiker som:
- Laddar snabbare än plugin-tunga WooCommerce-sajter
- Är enklare att skala och underhålla
- Behåller de innehållsflöden som ditt team och dina kunder redan känner till