{"id":78,"date":"2026-06-08T14:48:09","date_gmt":"2026-06-08T14:48:09","guid":{"rendered":"https:\/\/koffiebox.com\/?page_id=78"},"modified":"2026-06-08T15:16:50","modified_gmt":"2026-06-08T15:16:50","slug":"productpagina","status":"publish","type":"page","link":"https:\/\/koffiebox.com\/?page_id=78","title":{"rendered":"productpagina"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"78\" class=\"elementor elementor-78\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7092228 e-flex e-con-boxed e-con e-parent\" data-id=\"7092228\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a36e034 elementor-widget elementor-widget-html\" data-id=\"a36e034\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n    \/* 1. Verberg de standaard ongestijlde header, footer en paginatitel van het actieve thema *\/\n    .site-header,\n    #masthead,\n    .site-footer,\n    #colophon,\n    .entry-header,\n    .entry-title,\n    .main-navigation,\n    .site-branding,\n    .edit-link {\n        display: none !important;\n    }\n\n    \/* Reset paginamarges van het thema voor een full-width ervaring *\/\n    body, html {\n        background-color: #F5F1E6 !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        overflow-x: hidden !important;\n    }\n    \n    #primary, #main, .entry-content, .post-content {\n        padding: 0 !important;\n        margin: 0 !important;\n        max-width: 100% !important;\n        width: 100% !important;\n    }\n\n    \/* 2. Dwing de knoppen in onze Latte\/Karamel-stijl om roze\/witte overschrijvingen van het thema te voorkomen *\/\n    .product-item button,\n    #productsGrid button,\n    header a.bg-karamel,\n    #mobileMenu a.bg-karamel {\n        background-color: #C48A55 !important;\n        color: #FFFFFF !important;\n        border: none !important;\n        box-shadow: 0 4px 12px rgba(196, 138, 85, 0.15) !important;\n        transition: all 0.2s ease-in-out !important;\n    }\n    \n    .product-item button:hover,\n    #productsGrid button:hover,\n    header a.bg-karamel:hover,\n    #mobileMenu a.bg-karamel:hover {\n        background-color: #2C1A11 !important;\n        color: #FFFFFF !important;\n        box-shadow: 0 4px 12px rgba(44, 26, 17, 0.2) !important;\n        opacity: 1 !important;\n    }\n\n    \/* Successtatus (Toegevoegd aan winkelmand) dwingen om groen te zijn *\/\n    .product-item button.bg-emerald-600,\n    #productsGrid button.bg-emerald-600 {\n        background-color: #059669 !important; \/* emerald-600 *\/\n        color: #FFFFFF !important;\n    }\n<\/style>\n\n<!-- Tailwind CSS voor flitsende styling -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n                colors: {\n                    espresso: '#2C1A11',\n                    latte: '#F5F1E6',\n                    karamel: '#C48A55',\n                    melkschuim: '#FFFFFF'\n                },\n                fontFamily: {\n                    sans: ['Inter', 'sans-serif'],\n                    montserrat: ['Montserrat', 'sans-serif']\n                },\n                screens: {\n                    'xs': '400px'\n                }\n            }\n        }\n    }\n<\/script>\n\n<!-- Google Fonts & FontAwesome -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n<style>\n    \/* Voorkom blauwe gloed bij tikken op mobiel *\/\n    body {\n        -webkit-tap-highlight-color: transparent;\n    }\n    .font-montserrat {\n        font-family: 'Montserrat', sans-serif;\n    }\n<\/style>\n\n<!-- 2. STICKY HEADER \/ NAVIGATIE -->\n<header class=\"bg-espresso text-white py-3 sm:py-4 px-4 sm:px-6 sticky top-0 z-50 shadow-md w-full\">\n    <div class=\"max-w-6xl mx-auto flex justify-between items-center\">\n        <!-- Logo -->\n        <a href=\"\/\" class=\"flex items-center space-x-2 sm:space-x-3 active:scale-95 transition-all duration-200\">\n            <div class=\"border-2 border-white p-1.5 sm:p-2 rounded flex items-center justify-center bg-transparent\">\n                <i class=\"fa-solid fa-mug-hot text-lg sm:text-xl text-white\"><\/i>\n            <\/div>\n            <span class=\"font-montserrat font-extrabold text-xl sm:text-2xl tracking-wider select-none\">\n                KOFFIEBOX<span class=\"text-karamel\">.COM<\/span>\n            <\/span>\n        <\/a>\n        \n        <!-- Desktop Menu -->\n        <nav class=\"hidden lg:flex space-x-8 font-montserrat font-semibold\">\n            <a href=\"\/?page_id=78\" class=\"text-karamel py-2 border-b-2 border-karamel\">Producten<\/a>\n            <a href=\"\/#hoe-werkt-het\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Hoe werkt het?<\/a>\n            <a href=\"\/#proefbox\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Onze Box<\/a>\n            <a href=\"\/#over-ons\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Ons Verhaal<\/a>\n        <\/nav>\n\n        <!-- Actions -->\n        <div class=\"flex items-center space-x-3\">\n            <!-- Winkelwagen Icoon -->\n            <a href=\"\/?page_id=7\" class=\"text-white hover:text-karamel p-2 relative active:scale-95 transition-all duration-300\" aria-label=\"Winkelwagen bekijken\">\n                <i class=\"fa-solid fa-cart-shopping text-xl sm:text-2xl\"><\/i>\n            <\/a>\n            <a href=\"\/#proefbox\" class=\"hidden xs:inline-block bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-2 px-4 sm:px-6 rounded-lg transition-all duration-300 text-sm sm:text-base shadow-md\">\n                Bestel Nu\n            <\/a>\n            <!-- Mobile Hamburger Button -->\n            <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-white focus:outline-none rounded-lg active:scale-90 transition-transform duration-100\" aria-label=\"Menu openen\">\n                <i class=\"fa-solid fa-bars text-2xl\" id=\"menuIcon\"><\/i>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Mobile Drawer Menu -->\n    <div id=\"mobileMenu\" class=\"hidden lg:hidden absolute top-full left-0 w-full bg-espresso border-t border-white border-opacity-5 shadow-xl transition-all duration-300 transform origin-top scale-y-0 opacity-0\">\n        <nav class=\"flex flex-col p-6 space-y-4 font-montserrat font-semibold text-lg text-center\">\n            <a href=\"\/?page_id=78\" class=\"mobile-nav-link py-3 text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Producten<\/a>\n            <a href=\"\/#hoe-werkt-het\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Hoe werkt het?<\/a>\n            <a href=\"\/#proefbox\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Onze Box<\/a>\n            <a href=\"\/#over-ons\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Ons Verhaal<\/a>\n            <a href=\"\/?page_id=7\" class=\"mobile-nav-link py-3 text-karamel border-b border-white border-opacity-5 transition-colors duration-200\"><i class=\"fa-solid fa-cart-shopping mr-2\"><\/i>Bekijk Winkelwagen<\/a>\n            <a href=\"\/#proefbox\" class=\"mobile-nav-link bg-karamel text-white py-3.5 rounded-xl shadow-lg hover:bg-opacity-90 active:scale-95 transition-all-300 text-base\">Bestel de Proefbox (\u20ac24,95)<\/a>\n        <\/nav>\n    <\/div>\n<\/header>\n\n<!-- 3. SHOP INTRO BANNER -->\n<section class=\"max-w-6xl mx-auto px-4 sm:px-6 pt-10 sm:pt-16 pb-6 text-center\">\n    <h1 class=\"font-montserrat font-extrabold text-3xl sm:text-4xl lg:text-5xl text-espresso tracking-tight\">\n        Onze Producten\n    <\/h1>\n    <p class=\"text-sm sm:text-base md:text-lg text-espresso text-opacity-80 max-w-xl mx-auto mt-3 sm:mt-4 leading-relaxed\">\n        Ontdek onze zorgvuldig geselecteerde koffieproducten. Handgemaakt met liefde en direct bezorgd door je brievenbus.\n    <\/p>\n    <div class=\"w-16 h-1 bg-karamel mx-auto mt-4 rounded-full\"><\/div>\n<\/section>\n\n<!-- 4. DYNAMISCH PRODUCTEN GRID -->\n<main class=\"max-w-6xl mx-auto px-4 sm:px-6 mb-16 sm:mb-24\">\n    <!-- Laad-indicator die getoond wordt tijdens het ophalen uit de API -->\n    <div id=\"loadingIndicator\" class=\"flex flex-col items-center justify-center py-12\">\n        <i class=\"fa-solid fa-circle-notch animate-spin text-karamel text-4xl mb-4\"><\/i>\n        <p class=\"text-espresso text-opacity-70 font-semibold\">Producten laden uit WooCommerce...<\/p>\n    <\/div>\n\n    <!-- Het dynamische grid-vlak -->\n    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center hidden\" id=\"productsGrid\">\n        <!-- Producten worden hier via JavaScript ingeladen -->\n    <\/div>\n<\/main>\n\n<!-- 5. VERTIEN BADGES (Trust builder) -->\n<section class=\"bg-espresso text-white py-12 px-4 sm:px-6 w-full text-center\">\n    <div class=\"max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8\">\n        <div class=\"flex flex-col items-center\">\n            <i class=\"fa-solid fa-envelope-open-text text-karamel text-3xl mb-3\"><\/i>\n            <h3 class=\"font-montserrat font-bold text-lg mb-1\">Brievenbus Bezorging<\/h3>\n            <p class=\"text-xs text-white text-opacity-70 max-w-xs\">Past door de gleuf. Thuisblijven is niet nodig voor de proefboxen.<\/p>\n        <\/div>\n        <div class=\"flex flex-col items-center\">\n            <i class=\"fa-solid fa-truck text-karamel text-3xl mb-3\"><\/i>\n            <h3 class=\"font-montserrat font-bold text-lg mb-1\">Gratis Verzending<\/h3>\n            <p class=\"text-xs text-white text-opacity-70 max-w-xs\">Snelle en gratis bezorging (PostNL) binnen heel Nederland & Belgi\u00eb.<\/p>\n        <\/div>\n        <div class=\"flex flex-col items-center\">\n            <i class=\"fa-solid fa-seedling text-karamel text-3xl mb-3\"><\/i>\n            <h3 class=\"font-montserrat font-bold text-lg mb-1\">Handgemaakt<\/h3>\n            <p class=\"text-xs text-white text-opacity-70 max-w-xs\">Elke box wordt met uiterste zorg aan de keukentafel samengesteld.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- 6. FOOTER -->\n<footer class=\"bg-espresso text-white py-10 sm:py-12 px-4 sm:px-6 border-t border-white border-opacity-10 w-full mt-auto\">\n    <div class=\"max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 text-center md:text-left\">\n        <div>\n            <span class=\"font-montserrat font-extrabold text-xl tracking-wider mb-3 block\">KOFFIEBOX<span class=\"text-karamel\">.COM<\/span><\/span>\n            <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed max-w-sm mx-auto md:mx-0\">\n                Het ultieme koffiecadeau dat gewoon door de brievenbus past. Ontdek 30 unieke smaken en bestel alleen na wat u echt lekker vindt.\n            <\/p>\n        <\/div>\n        <div>\n            <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Snelle Links<\/h4>\n            <ul class=\"space-y-2 text-xs sm:text-sm text-white text-opacity-70\">\n                <li><a href=\"\/?page_id=78\" class=\"text-white hover:text-karamel transition-colors\">Producten<\/a><\/li>\n                <li><a href=\"\/#hoe-werkt-het\" class=\"hover:text-white transition-colors py-1 block\">Hoe werkt het?<\/a><\/li>\n                <li><a href=\"\/#proefbox\" class=\"hover:text-white transition-colors py-1 block\">Onze Proefbox<\/a><\/li>\n                <li><a href=\"\/#over-ons\" class=\"hover:text-white transition-colors py-1 block\">Ons Verhaal<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div>\n            <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Garantie & Contact<\/h4>\n            <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed mb-4\">\n                Vragen over uw bestelling of interesse in zakelijke afnames? We helpen u graag via onze klantenservice.\n            <\/p>\n            <span class=\"text-[10px] text-white text-opacity-50 block leading-tight\">Koffiebox.com is op geen enkele wijze gelieerd aan Soci\u00e9t\u00e9 des Produits Nestl\u00e9 S.A.<\/span>\n        <\/div>\n    <\/div>\n    <div class=\"max-w-6xl mx-auto border-t border-white border-opacity-10 pt-6 sm:pt-8 flex flex-col md:flex-row justify-between items-center text-[10px] sm:text-xs text-white text-opacity-50 gap-2 text-center\">\n        <p>&copy; 2026 Koffiebox.com. Alle rechten voorbehouden.<\/p>\n        <p>Handgemaakt met liefde door Moeder & Zoon<\/p>\n    <\/div>\n<\/footer>\n\n<!-- 7. JAVASCRIPT LOGICA & DYNAMISCH OPHALEN -->\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n        const mobileMenu = document.getElementById('mobileMenu');\n        const menuIcon = document.getElementById('menuIcon');\n        const mobileLinks = document.querySelectorAll('.mobile-nav-link');\n        \n        \/\/ Toggle Mobile Menu\n        const toggleMenu = () => {\n            const isOpen = !mobileMenu.classList.contains('hidden');\n            \n            if (isOpen) {\n                mobileMenu.classList.add('opacity-0');\n                mobileMenu.classList.add('scale-y-0');\n                setTimeout(() => {\n                    mobileMenu.classList.add('hidden');\n                }, 300);\n                menuIcon.className = 'fa-solid fa-bars text-2xl';\n            } else {\n                mobileMenu.classList.remove('hidden');\n                mobileMenu.offsetHeight; \/\/ Force reflow\n                mobileMenu.classList.remove('opacity-0');\n                mobileMenu.classList.remove('scale-y-0');\n                menuIcon.className = 'fa-solid fa-xmark text-2xl';\n            }\n        };\n        \n        if(mobileMenuBtn) {\n            mobileMenuBtn.addEventListener('click', toggleMenu);\n        }\n        \n        mobileLinks.forEach(link => {\n            link.addEventListener('click', () => {\n                if (!mobileMenu.classList.contains('hidden')) {\n                    toggleMenu();\n                }\n            });\n        });\n\n        \/\/ Start het dynamisch ophalen van de producten\n        fetchWooCommerceProducts();\n    });\n\n    \/\/ 8. OPHALEN VAN DE PRODUCTEN UIT WOOCOMMERCE\n    async function fetchWooCommerceProducts() {\n        const grid = document.getElementById('productsGrid');\n        const loader = document.getElementById('loadingIndicator');\n\n        try {\n            \/\/ We roepen de openbare WooCommerce Store API aan (beschikbaar op elke WooCommerce site)\n            const response = await fetch(window.location.origin + '\/wp-json\/wc\/store\/v1\/products');\n            \n            if (!response.ok) {\n                throw new Error('Store API is niet bereikbaar op dit domein.');\n            }\n\n            const products = await response.json();\n            \n            if (products && products.length > 0) {\n                renderProducts(products);\n            } else {\n                \/\/ Als de database leeg is, tonen we de fallback\n                renderProducts([getFallbackProduct()]);\n            }\n        } catch (error) {\n            console.warn('WooCommerce API fout, we laden de prachtige offline-preview fallback:', error);\n            \/\/ Fallback voor de Elementor preview (wanneer we niet op de live WooCommerce server draaien)\n            renderProducts([getFallbackProduct()]);\n        } finally {\n            \/\/ Verberg de laad-indicator en toon het grid\n            if (loader) loader.classList.add('hidden');\n            if (grid) grid.classList.remove('hidden');\n        }\n    }\n\n    \/\/ 9. DYNAMISCHE RENDERING VAN DE PRODUCTKAARTEN\n    function renderProducts(products) {\n        const grid = document.getElementById('productsGrid');\n        grid.innerHTML = ''; \/\/ Maak het grid eerst leeg\n\n        products.forEach(product => {\n            \/\/ Veilig parsen van prijzen\n            let priceFormatted = '\u20ac 24,95';\n            if (product.prices && product.prices.price) {\n                \/\/ Store API retourneert de prijs meestal in centen als string\n                const priceValue = parseFloat(product.prices.price) \/ 100;\n                priceFormatted = priceValue.toLocaleString('nl-NL', { style: 'currency', currency: 'EUR' });\n            } else if (product.price) {\n                priceFormatted = parseFloat(product.price).toLocaleString('nl-NL', { style: 'currency', currency: 'EUR' });\n            }\n\n            \/\/ Dwing de juiste permalink af voor product 34 onder de actieve URL-structuur\n            let productPermalink = product.permalink || '#';\n            if (product.id === 34 || product.id === '34') {\n                productPermalink = window.location.origin + '\/?product=koffiebox-proefbox';\n            }\n\n            \/\/ Veilig parsen van afbeeldingen of laden van onze prachtige Kraft-box fallback\n            let imageHtml = '';\n            if (product.images && product.images.length > 0 && !product.images[0].src.includes('placeholder')) {\n                \/\/ Als er een echte productafbeelding is ingesteld in WooCommerce, laden we die\n                imageHtml = `<img decoding=\"async\" src=\"${product.images[0].src}\" alt=\"${product.name}\" class=\"w-full h-full object-cover max-h-[300px]\" onerror=\"this.outerHTML=getKraftBoxFallbackHtml()\">`;\n            } else {\n                \/\/ Zo niet, dan genereren we de sfeervolle, procedurele Kraft-box!\n                imageHtml = getKraftBoxFallbackHtml();\n            }\n\n            \/\/ Strip eventuele HTML-tags uit de omschrijving\n            const desc = product.short_description \n                ? product.short_description.replace(\/<[^>]*>\/g, '') \n                : (product.description ? product.description.replace(\/<[^>]*>\/g, '') : 'Ontdek een rijke verzameling aan koffiesmaken uit alle hoeken van Europa.');\n\n            \/\/ Maak het productartikel aan\n            const article = document.createElement('article');\n            article.className = \"product-item w-full max-w-[360px] bg-white rounded-3xl border border-espresso border-opacity-5 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between cursor-pointer\";\n            \n            \/\/ Dwing de kaart om bij een klik door te linken naar de juiste productpagina\n            article.setAttribute('onclick', `window.location.href='${productPermalink}';`);\n\n            article.innerHTML = `\n                <div class=\"relative bg-[#F0E6D2] p-6 flex items-center justify-center aspect-square\">\n                    <span class=\"absolute top-4 left-4 bg-espresso text-white font-montserrat font-bold text-[10px] sm:text-xs py-1.5 px-3 rounded-full uppercase tracking-wider select-none z-10\">\n                        ${product.id === 34 ? 'Bestseller' : 'Unieke Selectie'}\n                    <\/span>\n                    ${imageHtml}\n                <\/div>\n                <div class=\"p-6 flex flex-col flex-grow justify-between\">\n                    <div>\n                        <div class=\"flex items-center justify-between mb-1.5\">\n                            <h2 class=\"font-montserrat font-bold text-lg text-espresso\">${product.name || 'Koffiebox Proefbox'}<\/h2>\n                            <div class=\"flex text-amber-500 text-xs\">\n                                <i class=\"fa-solid fa-star\"><\/i>\n                                <span class=\"text-espresso text-opacity-70 ml-1 text-xs font-bold font-sans\">4.9<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-xs text-karamel font-semibold mb-3 flex items-center gap-1.5\">\n                            <i class=\"fa-solid fa-mobile-screen-button\"><\/i> Inclusief digitale menukaart\n                        <\/p>\n                        <p class=\"text-sm text-espresso text-opacity-75 leading-relaxed mb-4 line-clamp-3\">\n                            ${desc}\n                        <\/p>\n                    <\/div>\n                    <div>\n                        <div class=\"text-xl font-extrabold text-espresso mb-4\">${priceFormatted} <span class=\"text-xs font-normal text-espresso text-opacity-65\">gratis verzending<\/span><\/div>\n                        <!-- We gebruiken event.stopPropagation() om te voorkomen dat een klik op de knop \u00f3\u00f3k de doorlink naar de productpagina triggert -->\n                        <button onclick=\"event.stopPropagation(); handleAddToCart(this, '${product.id}')\" class=\"w-full font-montserrat font-bold py-3 rounded-xl flex items-center justify-center gap-2\">\n                            <i class=\"fa-solid fa-cart-shopping\"><\/i> In Winkelmand\n                        <\/button>\n                    <\/div>\n                <\/div>\n            `;\n\n            grid.appendChild(article);\n        });\n    }\n\n    \/\/ 10. GENEREREN VAN DE PROCEDURELE KRAFT-BOX FALLBACK\n    function getKraftBoxFallbackHtml() {\n        return `\n            <div class=\"bg-[#D2B48C] border-2 border-[#8B5A2B] rounded-xl p-5 shadow-lg w-full max-w-[220px] aspect-[4\/3] flex flex-col justify-between transform transition-transform duration-300 hover:scale-105\">\n                <div class=\"border border-dashed border-[#5C3A21] p-1.5 text-center rounded-lg\">\n                    <span class=\"font-montserrat font-extrabold text-[#5C3A21] text-xs sm:text-sm tracking-widest\">KOFFIEBOX<\/span>\n                <\/div>\n                <div class=\"flex justify-between items-center text-[#5C3A21]\">\n                    <span class=\"text-[9px] font-bold\">PROEFBOX - 30 CUPS<\/span>\n                    <i class=\"fa-solid fa-qrcode text-2xl\"><\/i>\n                <\/div>\n            <\/div>\n        `;\n    }\n\n    \/\/ 11. OFFLINE \/ ELEMENTOR PREVIEW FALLBACK PRODUCT\n    function getFallbackProduct() {\n        return {\n            id: 34,\n            name: \"Koffiebox Proefbox\",\n            price: \"24.95\",\n            permalink: \"\/?product=koffiebox-proefbox\",\n            short_description: \"Ontvang 30 verschillende, heerlijke Nespresso\u00ae-geschikte cupjes uit Europa. Vind jouw favoriete koffie aan je eigen keukentafel.\",\n            images: [] \/\/ Leeg om de prachtige Kraft-box te triggeren\n        };\n    }\n\n    \/\/ 12. WINKELMAND TOEVOEGEN ANIMATIE & REDIRECT (page_id=7)\n    function handleAddToCart(button, productId) {\n        button.innerHTML = '<i class=\"fa-solid fa-circle-notch animate-spin\"><\/i> Toevoegen...';\n        button.disabled = true;\n        \n        setTimeout(() => {\n            button.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Toegevoegd!';\n            button.className = \"w-full font-montserrat font-bold py-3 rounded-xl flex items-center justify-center gap-2 bg-emerald-600 text-white\";\n            \n            \/\/ Na 1 seconde direct doorsturen naar de winkelwagenpagina! (page_id=7 met de juiste add-to-cart query)\n            setTimeout(() => {\n                window.location.href = window.location.origin + '\/?page_id=7&add-to-cart=' + productId;\n            }, 800);\n        }, 1000);\n    }\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Onze Producten Ontdek onze zorgvuldig geselecteerde koffieproducten. Handgemaakt met liefde en direct bezorgd door je brievenbus. Producten laden uit WooCommerce&#8230; Brievenbus Bezorging Past door de gleuf. Thuisblijven is niet nodig [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>productpagina - KoffieBox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/koffiebox.com\/?page_id=78\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"productpagina - KoffieBox\" \/>\n<meta property=\"og:description\" content=\"KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Onze Producten Ontdek onze zorgvuldig geselecteerde koffieproducten. Handgemaakt met liefde en direct bezorgd door je brievenbus. Producten laden uit WooCommerce&#8230; Brievenbus Bezorging Past door de gleuf. Thuisblijven is niet nodig [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/koffiebox.com\/?page_id=78\" \/>\n<meta property=\"og:site_name\" content=\"KoffieBox\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-08T15:16:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/?page_id=78\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/?page_id=78\",\"name\":\"productpagina - KoffieBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\"},\"datePublished\":\"2026-06-08T14:48:09+00:00\",\"dateModified\":\"2026-06-08T15:16:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/?page_id=78#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/koffiebox.com\\\/?page_id=78\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/?page_id=78#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/koffiebox.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"productpagina\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/\",\"name\":\"KoffieBox\",\"description\":\"H\u00e9t koffiecadeau door de brievenbus.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/koffiebox.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"productpagina - KoffieBox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/koffiebox.com\/?page_id=78","og_locale":"nl_NL","og_type":"article","og_title":"productpagina - KoffieBox","og_description":"KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Onze Producten Ontdek onze zorgvuldig geselecteerde koffieproducten. Handgemaakt met liefde en direct bezorgd door je brievenbus. Producten laden uit WooCommerce&#8230; Brievenbus Bezorging Past door de gleuf. Thuisblijven is niet nodig [&hellip;]","og_url":"https:\/\/koffiebox.com\/?page_id=78","og_site_name":"KoffieBox","article_modified_time":"2026-06-08T15:16:50+00:00","twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/koffiebox.com\/?page_id=78","url":"https:\/\/koffiebox.com\/?page_id=78","name":"productpagina - KoffieBox","isPartOf":{"@id":"https:\/\/koffiebox.com\/#website"},"datePublished":"2026-06-08T14:48:09+00:00","dateModified":"2026-06-08T15:16:50+00:00","breadcrumb":{"@id":"https:\/\/koffiebox.com\/?page_id=78#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/koffiebox.com\/?page_id=78"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/koffiebox.com\/?page_id=78#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/koffiebox.com\/"},{"@type":"ListItem","position":2,"name":"productpagina"}]},{"@type":"WebSite","@id":"https:\/\/koffiebox.com\/#website","url":"https:\/\/koffiebox.com\/","name":"KoffieBox","description":"H\u00e9t koffiecadeau door de brievenbus.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/koffiebox.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=78"}],"version-history":[{"count":17,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}