{"id":29,"date":"2026-11-04T21:46:36","date_gmt":"2026-11-04T21:46:36","guid":{"rendered":"https:\/\/powerstationspecialist.nl\/?page_id=29"},"modified":"2026-11-04T21:47:23","modified_gmt":"2026-11-04T21:47:23","slug":"zonnepanelen","status":"publish","type":"page","link":"https:\/\/powerstationspecialist.nl\/index.php\/zonnepanelen\/","title":{"rendered":"Zonnepanelen"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Solar Panel Keuzetool<\/title>\n<style>\n    \/* Modern & Clean WordPress-friendly CSS *\/\n    .ecoflow-tool-wrapper {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        color: #1a1a1a;\n        background-color: #f8f9fa;\n        padding: 24px;\n        border-radius: 12px;\n        max-width: 1200px;\n        margin: 0 auto;\n        box-sizing: border-box;\n    }\n\n    .ecoflow-tool-wrapper *, .ecoflow-tool-wrapper *::before, .ecoflow-tool-wrapper *::after {\n        box-sizing: border-box;\n    }\n\n    .ecoflow-header {\n        text-align: center;\n        margin-bottom: 30px;\n    }\n\n    .ecoflow-header h2 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #0f172a;\n        margin-bottom: 8px;\n    }\n\n    .ecoflow-header p {\n        font-size: 15px;\n        color: #64748b;\n        margin: 0;\n    }\n\n    \/* Filter Grid Container *\/\n    .ecoflow-filters {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n        gap: 20px;\n        background: #ffffff;\n        padding: 24px;\n        border-radius: 10px;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n        margin-bottom: 30px;\n    }\n\n    .filter-group {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .filter-group-full {\n        grid-column: 1 \/ -1;\n        border-top: 1px solid #f1f5f9;\n        padding-top: 15px;\n        margin-top: 5px;\n    }\n\n    .filter-group label.filter-title {\n        font-size: 14px;\n        font-weight: 600;\n        color: #334155;\n        margin-bottom: 8px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .filter-val {\n        color: #81d742;\n        font-weight: 700;\n        text-align: right;\n    }\n\n    \/* Horizontale Checkbox Lijsten (Merken, Typen, Connectors & Eigenschappen) *\/\n    .brand-checkbox-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 16px;\n        align-items: center;\n    }\n\n    .checkbox-item {\n        display: inline-flex !important;\n        align-items: center;\n        gap: 8px;\n        font-size: 14px;\n        font-weight: 500 !important;\n        color: #334155;\n        cursor: pointer;\n        margin: 0 !important;\n        line-height: 1;\n        user-select: none;\n    }\n\n    .checkbox-item input[type=\"checkbox\"] {\n        accent-color: #81d742;\n        width: 16px;\n        height: 16px;\n        margin: 0;\n        padding: 0;\n        cursor: pointer;\n        flex-shrink: 0;\n    }\n\n    .filter-group input[type=\"range\"] {\n        width: 100%;\n        accent-color: #81d742;\n        cursor: pointer;\n        height: 6px;\n        background: #e2e8f0;\n        border-radius: 3px;\n        outline: none;\n        margin-top: 8px;\n    }\n\n    .filter-actions {\n        grid-column: 1 \/ -1;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        border-top: 1px solid #f1f5f9;\n        padding-top: 15px;\n        margin-top: 5px;\n    }\n\n    .btn-reset {\n        background: transparent;\n        border: 1px solid #cbd5e1;\n        color: #475569;\n        padding: 8px 16px;\n        border-radius: 6px;\n        font-size: 13px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.2s ease;\n    }\n\n    .btn-reset:hover {\n        background: #f1f5f9;\n        color: #1e293b;\n        border-color: #94a3b8;\n    }\n\n    \/* Results Grid *\/\n    .ecoflow-results-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n    }\n\n    .ecoflow-card {\n        background: #ffffff;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n        display: flex;\n        flex-direction: column;\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\n        border: 1px solid #e2e8f0;\n    }\n\n    .ecoflow-card:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);\n    }\n\n    \/* Afbeelding Styling (Ongewijzigd) *\/\n    .ecoflow-card-img-wrapper {\n        width: 100%;\n        height: 180px;\n        background: #ffffff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 16px;\n        border-bottom: 1px solid #f1f5f9;\n    }\n\n    .ecoflow-card-img {\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n    }\n\n    \/* Compacter gemaakte Card Header *\/\n    .ecoflow-card-header {\n        background: #f8fafc;\n        padding: 12px 16px;\n        border-bottom: 1px solid #f1f5f9;\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n    }\n\n    .ecoflow-brand-badge {\n        display: inline-block;\n        font-size: 10px;\n        font-weight: 600;\n        text-transform: none;\n        letter-spacing: 0.3px;\n        background: #e2e8f0;\n        color: #475569;\n        padding: 1px 6px;\n        border-radius: 4px;\n        margin-bottom: 2px;\n    }\n\n    .ecoflow-card-header h3 {\n        margin: 0;\n        font-size: 16px;\n        font-weight: 700;\n        color: #0f172a;\n        line-height: 1.25;\n    }\n\n    \/* Prijs Box & Label *\/\n    .ecoflow-price-box {\n        text-align: right;\n    }\n\n    .ecoflow-price-label {\n        display: block;\n        font-size: 10px;\n        font-weight: 600;\n        color: #64748b;\n        margin-bottom: 1px;\n    }\n\n    .ecoflow-price {\n        font-size: 14px;\n        font-weight: 700;\n        color: #81d742;\n    }\n\n    \/* Compacter gemaakte Card Body & Specificaties *\/\n    .ecoflow-card-body {\n        padding: 14px 16px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .specs-list {\n        list-style: none;\n        padding: 0;\n        margin: 0 0 10px 0;\n    }\n\n    .specs-list li {\n        display: flex;\n        justify-content: space-between;\n        padding: 4px 0;\n        border-bottom: 1px dashed #f1f5f9;\n        font-size: 13px;\n    }\n\n    .specs-list li:last-child {\n        border-bottom: none;\n    }\n\n    .specs-label {\n        color: #64748b;\n    }\n\n    .specs-value {\n        font-weight: 600;\n        color: #334155;\n        text-align: right;\n    }\n\n    \/* Compacter gemaakte Extra Info Block *\/\n    .ecoflow-extra-info {\n        font-size: 12px;\n        color: #475569;\n        background-color: #f8fafc;\n        border-left: 3px solid #81d742;\n        padding: 8px 10px;\n        border-radius: 0 6px 6px 0;\n        margin-bottom: 12px;\n        line-height: 1.35;\n    }\n\n    \/* Compacter gemaakte Knoppen *\/\n    .ecoflow-btn-group {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        gap: 6px;\n        width: 100%;\n        margin-top: auto;\n    }\n\n    .btn-view, .btn-secondary, .btn-tertiary {\n        width: 100%;\n        display: block;\n        text-align: center;\n        padding: 7px 10px;\n        border-radius: 6px;\n        text-decoration: none;\n        font-weight: 600;\n        font-size: 12px;\n        transition: all 0.2s ease;\n    }\n\n    .btn-view {\n        background: #81d742;\n        color: #ffffff;\n    }\n\n    .btn-view:hover {\n        background: #71be39;\n        color: #ffffff;\n    }\n\n    .btn-secondary {\n        background: transparent;\n        border: 1px solid #81d742;\n        color: #1a1a1a;\n    }\n\n    .btn-secondary:hover {\n        background: #81d742;\n        color: #ffffff;\n    }\n\n    .btn-tertiary {\n        background: #f1f5f9;\n        border: 1px solid #cbd5e1;\n        color: #475569;\n    }\n\n    .btn-tertiary:hover {\n        background: #e2e8f0;\n        color: #1e293b;\n        border-color: #94a3b8;\n    }\n\n    \/* No results message *\/\n    .no-results {\n        grid-column: 1 \/ -1;\n        text-align: center;\n        padding: 40px;\n        background: #ffffff;\n        border-radius: 10px;\n        color: #64748b;\n        font-size: 15px;\n        border: 1px solid #e2e8f0;\n    }\n<\/style>\n\n<div class=\"ecoflow-tool-wrapper\">\n    <div class=\"ecoflow-header\">\n        <h2>Vind jouw ideale Zonnepaneel<\/h2>\n        <p>Filter op vermogen (Wp), gewicht, type paneel, connector, overige eigenschappen en merk.<\/p>\n    <\/div>\n\n    <div class=\"ecoflow-filters\">\n        <div class=\"filter-group\">\n            <label for=\"wpRange\" class=\"filter-title\">\n                <span>Minimaal Vermogen<\/span>\n                <span class=\"filter-val\"><span id=\"wpVal\">0<\/span> Wp<\/span>\n            <\/label>\n            <input type=\"range\" id=\"wpRange\" step=\"10\">\n        <\/div>\n\n        <div class=\"filter-group\">\n            <label for=\"weightRange\" class=\"filter-title\">\n                <span>Maximaal Gewicht<\/span>\n                <span class=\"filter-val\"><span id=\"weightVal\">0<\/span> kg<\/span>\n            <\/label>\n            <input type=\"range\" id=\"weightRange\" step=\"0.5\">\n        <\/div>\n\n        <div class=\"filter-group filter-group-full\">\n            <label class=\"filter-title\"><span>Merk<\/span><\/label>\n            <div id=\"brandCheckboxContainer\" class=\"brand-checkbox-list\"><\/div>\n        <\/div>\n\n        <div class=\"filter-group filter-group-full\">\n            <label class=\"filter-title\"><span>Type Zonnepaneel<\/span><\/label>\n            <div id=\"typeCheckboxContainer\" class=\"brand-checkbox-list\"><\/div>\n        <\/div>\n\n        <div class=\"filter-group filter-group-full\">\n            <label class=\"filter-title\"><span>Connector Type<\/span><\/label>\n            <div id=\"connectorCheckboxContainer\" class=\"brand-checkbox-list\"><\/div>\n        <\/div>\n\n        <div class=\"filter-group filter-group-full\">\n            <label class=\"filter-title\"><span>Overige eigenschappen:<\/span><\/label>\n            <div id=\"propertyCheckboxContainer\" class=\"brand-checkbox-list\"><\/div>\n        <\/div>\n\n        <div class=\"filter-actions\">\n            <button type=\"button\" class=\"btn-reset\" id=\"resetBtn\">Filters resetten<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"ecoflow-results-grid\" id=\"resultsContainer\"><\/div>\n<\/div>\n\n<script>\n    \/\/ Zonnepanelen dataset\n    const solarProducts = [\n        {\n            name: \"EcoFlow 110W Portable Solar Panel\",\n            brand: \"EcoFlow\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=EcoFlow+110W\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 299,-\",\n            wp: 110,\n            weight: 4.0,\n            connector: \"MC4\",\n            type: [\"Opvouwbaar\"],\n            properties: [\"IP68 Waterdicht\", \"Inclusief Draagtas\", \"Verstelbare Standaard\"],\n            extraInfo: \"Inklapbaar en waterdicht (IP68). Inclusief draagtas die dient als standaard.\",\n            url1: \"#\",\n            url1Text: \"Bekijk Model\",\n            url2: \"#\",\n            url2Text: \"Huren\",\n            url3: \"#\",\n            url3Text: \"Specificaties\"\n        },\n        {\n            name: \"EcoFlow 100W Flexible Solar Panel\",\n            brand: \"EcoFlow\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=EcoFlow+100W+Flex\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 199,-\",\n            wp: 100,\n            weight: 2.3,\n            connector: \"MC4\",\n            type: [\"Flexibel\"],\n            properties: [\"Buigzaam tot 258\u00b0\", \"Lichtgewicht\", \"Glas-vrij\"],\n            extraInfo: \"Buigzaam tot 258 graden, ideaal voor het gebogen dak van campers en boten.\",\n            url1: \"#\",\n            url1Text: \"Bekijk Model\",\n            url2: \"\",\n            url3: \"#\",\n            url3Text: \"Specificaties\"\n        },\n        {\n            name: \"EcoFlow 220W Bifacial Solar Panel\",\n            brand: \"EcoFlow\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=EcoFlow+220W+Bifacial\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 499,-\",\n            wp: 220,\n            weight: 9.5,\n            connector: \"MC4\",\n            type: [\"Opvouwbaar\"],\n            properties: [\"Bifacial \/ Dubbelzijdig\", \"IP68 Waterdicht\", \"Gehard Glas\"],\n            extraInfo: \"Dubbelzijdig zonnepaneel voor tot 25% extra opbrengst via omgevingslicht.\",\n            url1: \"#\",\n            url1Text: \"Bekijk Model\",\n            url2: \"#\",\n            url2Text: \"Huren\",\n            url3: \"#\",\n            url3Text: \"Specificaties\"\n        },\n        {\n            name: \"EcoFlow 400W Rigid Solar Panel\",\n            brand: \"EcoFlow\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=EcoFlow+400W+Rigid\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 599,-\",\n            wp: 400,\n            weight: 21.8,\n            connector: \"MC4\",\n            type: [\"Aluminium frame\"],\n            properties: [\"Vaste Montage\", \"Corrosiebestendig\", \"Hoge Effici\u00ebntie\"],\n            extraInfo: \"Vast zonnepaneel met stevig aluminium frame voor camper- of dakmontage.\",\n            url1: \"#\",\n            url1Text: \"Bestellen\",\n            url2: \"\",\n            url3: \"#\",\n            url3Text: \"Handleiding\"\n        },\n        {\n            name: \"Anker SOLIX PS100 Solar Panel\",\n            brand: \"Anker SOLIX\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=Anker+SOLIX+PS100\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 299,-\",\n            wp: 100,\n            weight: 4.1,\n            connector: \"XT60\",\n            type: [\"Opvouwbaar\"],\n            properties: [\"Lichtgewicht\", \"IP67 Spatwaterdicht\"],\n            extraInfo: \"Direct aan te sluiten op Anker en EcoFlow powerstations met XT60 ingang.\",\n            url1: \"#\",\n            url1Text: \"Bekijk Model\",\n            url2: \"\",\n            url3: \"\"\n        },\n        {\n            name: \"Jackery SolarSaga 100W\",\n            brand: \"Jackery\",\n            image: \"https:\/\/via.placeholder.com\/300x200?text=Jackery+SolarSaga+100W\",\n            priceLabel: \"Adviesprijs\",\n            price: \"\u20ac 329,-\",\n            wp: 100,\n            weight: 4.7,\n            connector: \"DC8020\",\n            type: [\"Opvouwbaar\"],\n            properties: [\"USB Poorten\", \"Inklapbare Handgreep\"],\n            extraInfo: \"Lichtgewicht opvouwbaar paneel uitgerust met USB-A en USB-C uitgangen.\",\n            url1: \"#\",\n            url1Text: \"Bekijk Model\",\n            url2: \"\",\n            url3: \"\"\n        }\n    ];\n\n    \/\/ DOM Elementen\n    const brandCheckboxContainer = document.getElementById('brandCheckboxContainer');\n    const typeCheckboxContainer = document.getElementById('typeCheckboxContainer');\n    const connectorCheckboxContainer = document.getElementById('connectorCheckboxContainer');\n    const propertyCheckboxContainer = document.getElementById('propertyCheckboxContainer');\n    const wpRange = document.getElementById('wpRange');\n    const weightRange = document.getElementById('weightRange');\n\n    const wpVal = document.getElementById('wpVal');\n    const weightVal = document.getElementById('weightVal');\n\n    const resultsContainer = document.getElementById('resultsContainer');\n    const resetBtn = document.getElementById('resetBtn');\n\n    \/\/ Helper om items veilig om te zetten naar array\n    function toArray(val) {\n        if (!val) return [];\n        return Array.isArray(val) ? val : [val];\n    }\n\n    \/\/ Merk-checkboxes genereren\n    function initBrandFilter() {\n        if (!brandCheckboxContainer) return;\n        const uniqueBrands = [...new Set(solarProducts.map(p => p.brand).filter(Boolean))].sort();\n        brandCheckboxContainer.innerHTML = '';\n\n        uniqueBrands.forEach(brand => {\n            const label = document.createElement('label');\n            label.className = 'checkbox-item';\n            label.innerHTML = `\n                <input type=\"checkbox\" class=\"brand-checkbox\" value=\"${brand}\">\n                <span>${brand}<\/span>\n            `;\n            brandCheckboxContainer.appendChild(label);\n        });\n\n        document.querySelectorAll('.brand-checkbox').forEach(cb => {\n            cb.addEventListener('change', filterAndRenderProducts);\n        });\n    }\n\n    \/\/ Type Zonnepaneel checkboxes dynamisch genereren\n    function initTypeFilter() {\n        if (!typeCheckboxContainer) return;\n        const rawTypes = solarProducts.flatMap(p => toArray(p.type));\n        const uniqueTypes = [...new Set(rawTypes.filter(Boolean))].sort();\n        typeCheckboxContainer.innerHTML = '';\n\n        uniqueTypes.forEach(type => {\n            const label = document.createElement('label');\n            label.className = 'checkbox-item';\n            label.innerHTML = `\n                <input type=\"checkbox\" class=\"type-checkbox\" value=\"${type}\">\n                <span>${type}<\/span>\n            `;\n            typeCheckboxContainer.appendChild(label);\n        });\n\n        document.querySelectorAll('.type-checkbox').forEach(cb => {\n            cb.addEventListener('change', filterAndRenderProducts);\n        });\n    }\n\n    \/\/ Connector-checkboxes genereren\n    function initConnectorFilter() {\n        if (!connectorCheckboxContainer) return;\n        const uniqueConnectors = [...new Set(solarProducts.map(p => p.connector).filter(Boolean))].sort();\n        connectorCheckboxContainer.innerHTML = '';\n\n        uniqueConnectors.forEach(conn => {\n            const label = document.createElement('label');\n            label.className = 'checkbox-item';\n            label.innerHTML = `\n                <input type=\"checkbox\" class=\"connector-checkbox\" value=\"${conn}\">\n                <span>${conn}<\/span>\n            `;\n            connectorCheckboxContainer.appendChild(label);\n        });\n\n        document.querySelectorAll('.connector-checkbox').forEach(cb => {\n            cb.addEventListener('change', filterAndRenderProducts);\n        });\n    }\n\n    \/\/ Overige eigenschappen checkboxes dynamisch genereren op basis van de dataset\n    function initPropertyFilter() {\n        if (!propertyCheckboxContainer) return;\n        const rawProps = solarProducts.flatMap(p => toArray(p.properties));\n        const uniqueProps = [...new Set(rawProps.filter(Boolean))].sort();\n        propertyCheckboxContainer.innerHTML = '';\n\n        uniqueProps.forEach(prop => {\n            const label = document.createElement('label');\n            label.className = 'checkbox-item';\n            label.innerHTML = `\n                <input type=\"checkbox\" class=\"property-checkbox\" value=\"${prop}\">\n                <span>${prop}<\/span>\n            `;\n            propertyCheckboxContainer.appendChild(label);\n        });\n\n        document.querySelectorAll('.property-checkbox').forEach(cb => {\n            cb.addEventListener('change', filterAndRenderProducts);\n        });\n    }\n\n    \/\/ Range-sliders initialiseren\n    function initFilterRanges() {\n        if (!solarProducts.length) return;\n\n        const wps = solarProducts.map(p => p.wp || 0);\n        const weights = solarProducts.map(p => p.weight || 0);\n\n        wpRange.min = 0;\n        wpRange.max = Math.max(...wps);\n        wpRange.value = 0;\n\n        const minWeight = Math.floor(Math.min(...weights));\n        const maxWeight = Math.ceil(Math.max(...weights));\n        weightRange.min = minWeight;\n        weightRange.max = maxWeight;\n        weightRange.value = maxWeight;\n    }\n\n    \/\/ Filter- en renderlogica\n    function filterAndRenderProducts() {\n        const checkedBrandElements = document.querySelectorAll('.brand-checkbox:checked');\n        const selectedBrands = Array.from(checkedBrandElements).map(cb => cb.value);\n\n        const checkedTypeElements = document.querySelectorAll('.type-checkbox:checked');\n        const selectedTypes = Array.from(checkedTypeElements).map(cb => cb.value);\n\n        const checkedConnectorElements = document.querySelectorAll('.connector-checkbox:checked');\n        const selectedConnectors = Array.from(checkedConnectorElements).map(cb => cb.value);\n\n        const checkedPropertyElements = document.querySelectorAll('.property-checkbox:checked');\n        const selectedProperties = Array.from(checkedPropertyElements).map(cb => cb.value);\n\n        const minWp = parseInt(wpRange.value) || 0;\n        const maxWeight = parseFloat(weightRange.value) || 0;\n\n        wpVal.textContent = minWp;\n        weightVal.textContent = maxWeight.toFixed(1);\n\n        const filtered = solarProducts.filter(product => {\n            const matchesBrand = selectedBrands.length === 0 || selectedBrands.includes(product.brand);\n\n            const productTypes = toArray(product.type);\n            const matchesType = selectedTypes.length === 0 || productTypes.some(t => selectedTypes.includes(t));\n\n            const matchesConnector = selectedConnectors.length === 0 || selectedConnectors.includes(product.connector);\n\n            const productProperties = toArray(product.properties);\n            const matchesProperty = selectedProperties.length === 0 || selectedProperties.some(p => selectedProperties.includes(p));\n\n            return matchesBrand &&\n                   matchesType &&\n                   matchesConnector &&\n                   matchesProperty &&\n                   product.wp >= minWp &&\n                   product.weight <= maxWeight;\n        });\n\n        resultsContainer.innerHTML = '';\n\n        if (filtered.length === 0) {\n            resultsContainer.innerHTML = `\n                <div class=\"no-results\">\n                    Geen zonnepanelen gevonden die voldoen aan deze specifieke criteria. Probeer je filters iets te verruimen.\n                <\/div>\n            `;\n            return;\n        }\n\n        filtered.forEach(product => {\n            const card = document.createElement('div');\n            card.className = 'ecoflow-card';\n\n            const mainUrl = product.url1 || product.url;\n            const mainUrlText = product.url1Text || product.urlText || 'Bekijk Model';\n            const firstButtonHTML = (mainUrl && mainUrl.trim() !== '') \n                ? `<a href=\"${mainUrl}\" class=\"btn-view\">${mainUrlText}<\/a>` \n                : '';\n\n            const secondButtonHTML = (product.url2 && product.url2.trim() !== '') \n                ? `<a href=\"${product.url2}\" class=\"btn-secondary\">${product.url2Text || 'Huren'}<\/a>` \n                : '';\n\n            const thirdButtonHTML = (product.url3 && product.url3.trim() !== '') \n                ? `<a href=\"${product.url3}\" class=\"btn-tertiary\">${product.url3Text || 'Meer info'}<\/a>` \n                : '';\n\n            const extraInfoHTML = (product.extraInfo && product.extraInfo.trim() !== '')\n                ? `<div class=\"ecoflow-extra-info\">${product.extraInfo}<\/div>`\n                : '';\n\n            const displayTypes = toArray(product.type).join(', ') || '-';\n            const displayProperties = toArray(product.properties).join(', ') || '-';\n\n            card.innerHTML = `\n                ${product.image ? `\n                    <div class=\"ecoflow-card-img-wrapper\">\n                        <img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\" class=\"ecoflow-card-img\" loading=\"lazy\">\n                    <\/div>\n                ` : ''}\n                <div class=\"ecoflow-card-header\">\n                    <div>\n                        ${product.brand ? `<span class=\"ecoflow-brand-badge\">${product.brand}<\/span>` : ''}\n                        <h3>${product.name}<\/h3>\n                    <\/div>\n                    <div class=\"ecoflow-price-box\">\n                        ${product.priceLabel ? `<span class=\"ecoflow-price-label\">${product.priceLabel}<\/span>` : ''}\n                        <span class=\"ecoflow-price\">${product.price}<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"ecoflow-card-body\">\n                    <ul class=\"specs-list\">\n                        <li>\n                            <span class=\"specs-label\">Vermogen<\/span>\n                            <span class=\"specs-value\">${product.wp} Wp<\/span>\n                        <\/li>\n                        <li>\n                            <span class=\"specs-label\">Gewicht<\/span>\n                            <span class=\"specs-value\">${product.weight} kg<\/span>\n                        <\/li>\n                        <li>\n                            <span class=\"specs-label\">Type Paneel<\/span>\n                            <span class=\"specs-value\">${displayTypes}<\/span>\n                        <\/li>\n                        <li>\n                            <span class=\"specs-label\">Connector Type<\/span>\n                            <span class=\"specs-value\">${product.connector}<\/span>\n                        <\/li>\n                        <li>\n                            <span class=\"specs-label\">Eigenschappen<\/span>\n                            <span class=\"specs-value\">${displayProperties}<\/span>\n                        <\/li>\n                    <\/ul>\n                    ${extraInfoHTML}\n                    <div class=\"ecoflow-btn-group\">\n                        ${firstButtonHTML}\n                        ${secondButtonHTML}\n                        ${thirdButtonHTML}\n                    <\/div>\n                <\/div>\n            `;\n            resultsContainer.appendChild(card);\n        });\n    }\n\n    \/\/ Event listeners\n    wpRange.addEventListener('input', filterAndRenderProducts);\n    weightRange.addEventListener('input', filterAndRenderProducts);\n\n    resetBtn.addEventListener('click', () => {\n        document.querySelectorAll('.brand-checkbox, .connector-checkbox, .type-checkbox, .property-checkbox').forEach(cb => cb.checked = false);\n        initFilterRanges();\n        filterAndRenderProducts();\n    });\n\n    \/\/ Init direct bij laden\n    initBrandFilter();\n    initTypeFilter();\n    initConnectorFilter();\n    initPropertyFilter();\n    initFilterRanges();\n    filterAndRenderProducts();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Solar Panel Keuzetool Vind jouw ideale Zonnepaneel Filter op vermogen (Wp), gewicht, type paneel, connector, overige eigenschappen en merk. Minimaal Vermogen 0 Wp Maximaal Gewicht 0 kg Merk Type Zonnepaneel Connector Type Overige eigenschappen: Filters resetten<\/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-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":2,"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/powerstationspecialist.nl\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}