Natuurlijk! Hier is een stapsgewijze gids om een geavanceerde e-commerce functionaliteit te ontwikkelen binnen je Craft CMS website, inclusief Stripe-integratie, productcatalogus en voorraadbeheer. ### Stap 1: Voorbereiding en planning - **Structuur bepalen:** Maak een Craft CMS sectie (bijvoorbeeld 'Products') voor je productcatalogus. - **Velden toevoegen:** Voeg velden toe zoals naam, beschrijving, prijs, voorraad, afbeeldingen. - **Plugins:** Overweeg het gebruik van de [Sprout Commerce](https://sprout.barrelstrengthdesign.com/commerce/) plugin voor uitgebreide e-commerce functionaliteiten, inclusief voorraadbeheer en betalingsintegratie. --- ### Stap 2: Productcatalogus opzetten 1. **Sectie maken:** - Ga naar `Instellingen > Sektionen` en maak een nieuwe sectie 'Products' (Type: Channel of Structure). 2. **Velden toevoegen:** - Voeg velden toe zoals: - `title` (standaard) - `description` (Rich Text) - `price` (Number) - `stock` (Number) - `images` (Assets) 3. **Voorbeeld:** ```php // Twig voorbeeld voor productoverzicht {% for product in craft.entries.section('products').all() %} <div> <h2>{{ product.title }}</h2> <p>{{ product.description }}</p> <p>Prijs: €{{ product.price }}</p> <p>Voorraad: {{ product.stock }}</p> {% if product.images %} <img src="{{ product.images.first().url }}" alt="{{ product.title }}"> {% endif %} </div> {% endfor %} ``` --- ### Stap 3: Voorraadbeheer - **Voorraad aanpassen:** Bij elke verkoop moet de voorraad automatisch worden verminderd. - **Voorbeeld code bij aankoop:** ```php // PHP code binnen een plugin of module use craft\elements\Entry; function updateStock($productId, $quantitySold) { $product = Entry::find()->section('products')->id($productId)->one(); if ($product && $product->stock >= $quantitySold) { $product->setFieldValue('stock', $product->stock - $quantitySold); Craft::$app->elements->saveElement($product); } else { // Voorraad onvoldoende throw new \Exception('Onvoldoende voorraad.'); } } ``` --- ### Stap 4: Betalingsintegratie met Stripe 1. **Stripe SDK toevoegen:** - Installeer via Composer: ```bash composer require stripe/stripe-php ``` 2. **API-sleutels instellen:** - Voeg je Stripe API-sleutels toe in je `.env` of via de Craft configuratie. 3. **Checkout integratie:** - Maak een Twig template voor de checkout pagina: ```twig <form id="payment-form"> <div id="card-element"></div> <button id="submit">Betalen</button> <div id="error-message"></div> </form> <script src="https://js.stripe.com/v3/"></script> <script> var stripe = Stripe('jouw-publishable key'); var elements = stripe.elements(); var card = elements.create('card'); card.mount('#card-element'); var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.confirmCardPayment('client_secret', { payment_method: { card: card, } }).then(function(result) { if (result.error) { // Fout afhandelen document.getElementById('error-message').textContent = result.error.message; } else { if (result.paymentIntent.status === 'succeeded') { // Betaling succesvol // Verwerk order, update voorraad } } }); }); </script> ``` *Let op:* Je moet een backend-endpoint maken om de `client_secret` op te halen en te valideren. 4. **Backend voor Stripe betaling:** ```php // Bijvoorbeeld in een plugin controller use Stripe\Stripe; use Stripe\PaymentIntent; public function actionCreatePaymentIntent() { $this->requirePostRequest(); $amount = 1000; // Bedrag in centen, haal dit uit je productgegevens Stripe::setApiKey('jouw-secret key'); $paymentIntent = PaymentIntent::create([ 'amount' => $amount, 'currency' => 'eur', 'metadata' => ['orderId' => '12345'], ]); return $this->asJson(['clientSecret' => $paymentIntent->client_secret]); } ``` --- ### Stap 5: Order verwerking en voorraad update - Na succesvolle betaling: - Maak een order entry aan (optioneel). - Verlaag de voorraad van de verkochte producten. - Verstuur bevestigingsmail. ### Tips: - Gebruik [Sprout Commerce](https://sprout.barrelstrengthdesign.com/commerce/) voor uitgebreide e-commerce functies, inclusief voorraadbeheer en betalingsintegraties. - Beveilig je API-sleutels en betalingsgegevens. - Test grondig met Stripe testmodus voordat je live gaat. --- Mocht je meer specifieke codevoorbeelden nodig hebben of hulp bij een bepaald onderdeel, laat het gerust weten!

Absoluut! Laten we een gedetailleerd plan opstellen voor de implementatie van geavanceerde e-commerce functionaliteit in Craft CMS. We focussen op de drie kerngebieden: productcatalogus, voorraadbeheer en Stripe-integratie. ### Overzicht van de Aanpak: 1. **Voorbereiding & Plugin Selectie** 2. **Productcatalogus Opzetten** 3. **Voorraadbeheer Implementeren** 4. **Stripe Betalingen Integreren** 5. **Afrekenproces (Checkout) Bouwen** --- ### Stap 1: Voorbereiding & Plugin Selectie Craft CMS heeft een uitgebreid ecosysteem. Voor een robuuste shop raad ik **Craft Commerce** aan. Het is de officiële, meest krachtige en best onderhouden oplossing. * **Plugin: Craft Commerce (Premium)** * Dit is een betaalde plugin, maar hij handelt alle kernfunctionaliteit (producten, winkelwagen, orders, voorraad) voor je af en biedt een perfecte integratie met de Craft CMS core. * Installatie via de Plugin Store of Composer: ```bash composer require craftcms/commerce ``` * Installeer en activeer de plugin vervolgens in het CMS (Instellingen → Plugins). * **Plugin: Omnipay Stripe (Gratis)** * Craft Commerce gebruikt het Omnipay framework voor betalingen. Je hebt de Stripe-driver nodig. ```bash composer require omnipay/stripe ``` **Tip:** Zorg dat je **development** en **live** omgevingen (.env variabelen) correct zijn ingesteld voor je gaat bouwen. --- ### Stap 2: Productcatalogus Opzetten Dit doe je door Product Types aan te maken in Craft Commerce. 1. Ga in de Craft CMS admin naar **Commerce → Instellingen → Product Types**. 2. Maak een nieuw product type aan, bijv. "Standaard Product". 3. **Velden toewijzen:** Hier kies je welke veldengroepen (Tabellen, Afbeeldingen, Keuzelijsten, etc.) bij dit producttype horen. Dit is de kracht van Craft! * Maak veldgroepen aan voor bijvoorbeeld: * **ProductAfbeeldingen** (Assets veld) * **ProductSpecificaties** (Matrix veld met specificaties) 4. **Voorbeeld Twig Template (producten tonen):** `templates/shop/_product.twig` ```twig {% extends '_layout' %} {# Erft van je basislayout #} {% block content %} <article> <h1>{{ product.title }}</h1> {# Toon de eerste afbeelding van het product #} {% set image = product.productAfbeeldingen.one() %} {% if image %} <img src="{{ image.url }}" alt="{{ image.title }}"> {% endif %} <p>{{ product.omschrijving }}</p> {# Toon prijs en voorraad #} <p>Prijs: {{ product.defaultPrice|commerceCurrency(cart.currency) }}</p> <p>Op voorraad: {{ product.stock }}</p> {# Formulier om aan winkelwagen toe te voegen #} <form method="post"> {{ csrfInput() }} {{ actionInput('commerce/cart/update-cart') }} {{ hiddenInput('purchasableId', product.defaultVariant.id) }} <input type="number" name="qty" value="1" min="1"> <button type="submit">In winkelwagen</button> </form> </article> {% endblock %} ``` --- ### Stap 3: Voorraadbeheer Implementeren Craft Commerce heeft ingebouwd voorraadbeheer per **Variant** (bijv. Maat M, Kleur Rood). 1. Ga naar **Commerce → Instellingen → Product Types → [Jouw Product Type] → Varianten**. 2. Zet **Has Dimensions** en **Has Stock** aan. 3. Je kunt nu per variant een voorraadniveau instellen. Commerce houdt dit automatisch bij en voorkomt dat er meer verkocht wordt dan op voorraad is. 4. **Voorraad bijwerken via code (bv. voor import):** ```php // In een module of custom controller use craft\commerce\elements\Variant; $variant = Variant::find()->id(123)->one(); // Vind variant met ID 123 if ($variant) { $variant->stock = 50; // Zet voorraad op 50 \Craft::$app->elements->saveElement($variant); // Sla op } ``` --- ### Stap 4: Stripe Betalingen Integreren 1. **Haal je API Keys op** van het [Stripe Dashboard](https://dashboard.stripe.com/). Je hebt een **Publishable Key** (publiekelijk) en een **Secret Key** (geheim, nooit in code committen!) nodig. 2. Stel deze sleutels in als omgevingsvariabelen in je `.env` bestand: ``` STRIPE_PUBLIC_KEY=pk_test_... STRIPE_SECRET_KEY=sk_test_... ``` 3. **Configureer de Stripe Gateway** in Craft CMS: * Ga naar **Commerce → Instellingen → Gateways**. * Klik op "Nieuw gateway". * Kies "Stripe" uit de lijst. * Vul de velden in. Gebruik de `$_ENV` variabelen voor de keys: * **API Key:** `{{ getenv('STRIPE_SECRET_KEY') }}` * Sla de gateway op. --- ### Stap 5: Afrekenproces (Checkout) Bouwen Commerce levert standaard formulieren, maar je wilt deze vaak aanpassen aan je eigen layout. 1. **Winkelwagenpagina:** `templates/shop/cart.twig` Toon de huidige cart (`craft.commerce.cart`) en een formulier om hoeveelheden aan te passen. 2. **Checkoutformulier:** `templates/shop/checkout.twig` Dit is het cruciale formulier. Commerce gebruikt de naamgeving van de inputvelden om de ordergegevens in te vullen. ```twig {# templates/shop/checkout.twig #} <form method="post" id="checkout-form"> {{ csrfInput() }} {{ actionInput('commerce/cart/update-cart') }} {{ redirectInput('shop/checkout/payment') }} {# Doorsturen naar betalingsstap #} <h3>Verzendadres</h3> <input type="text" name="shippingAddress[firstName]" value="{{ cart.shippingAddress.firstName ?? '' }}" placeholder="Voornaam" required> <input type="text" name="shippingAddress[lastName]" value="{{ cart.shippingAddress.lastName ?? '' }}" placeholder="Achternaam" required> <input type="text" name="shippingAddress[address1]" value="{{ cart.shippingAddress.address1 ?? '' }}" placeholder="Adres" required> <input type="text" name="shippingAddress[postalCode]" value="{{ cart.shippingAddress.postalCode ?? '' }}" placeholder="Postcode" required> <input type="text" name="shippingAddress[city]" value="{{ cart.shippingAddress.city ?? '' }}" placeholder="Plaats" required> <select name="shippingAddress[countryId]" required> {% for country in craft.commerce.countries.allCountries %} <option value="{{ country.id }}" {{ country.id == (cart.shippingAddress.countryId ?? 0) ? 'selected' }}>{{ country.name }}</option> {% endfor %} </select> <h3>Betaalmethode</h3> {% for method in craft.commerce.gateways.allCustomerEnabledGateways %} <label> <input type="radio" name="gatewayId" value="{{ method.id }}" {% if method.id == cart.gatewayId %}checked{% endif %}> {{ method.name }} </label> {% endfor %} <button type="submit">Doorgaan naar betaling</button> </form> ``` 3. **Betalingsstap:** Op de payment pagina wordt de Stripe Payment Element of Card Element geladen. Commerce heeft hier vaak een standaard template voor, maar je kunt deze overschrijven in je eigen `templates/shop/checkout/payment.twig`. ### Belangrijke Tips voor Integratie: * **Lees de Documentatie:** De [Craft Commerce docs](https://craftcms.com/docs/commerce/4.x/) zijn uitstekend en onmisbaar. * **Gebruik `.env` Variabelen:** Sla nooit gevoelige data (API keys, database wachtwoorden) op in je codebase. Gebruik altijd omgevingsvariabelen. * **Twig Macros:** Hergebruik code voor adresformulieren met Twig macros om consistentie te behouden. * **Events:** Craft Commerce geeft events vrij (bijv. `beforeCompleteOrder`). Je kunt hier naar luisteren in een module om custom logica uit te voeren net voor een order is voltooid (bijv. voorraad reserveren in een extern systeem). * **Queue voor Emails:** Zet de email queue aan (`queue` component) in `config/app.php` om te voorkomen dat gebruikers moeten wachten tot er orderbevestigingsmails zijn verzonden. ```php 'components' => [ 'queue' => [ 'class' => \craft\queue\Queue::class, 'channel' => 'queue', ], // ... ], ``` Succes met het bouwen van je webshop! Begin klein, test elke stap grondig (zeker betalingen in Stripe's testmodus!), en breid dan uit.