{"id":38,"date":"2026-02-14T19:41:25","date_gmt":"2026-02-14T18:41:25","guid":{"rendered":"https:\/\/boutizouabio.com\/?page_id=38"},"modified":"2026-02-21T14:45:05","modified_gmt":"2026-02-21T13:45:05","slug":"shop","status":"publish","type":"page","link":"https:\/\/boutizouabio.com\/?page_id=38","title":{"rendered":"Shop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"38\" class=\"elementor elementor-38\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1728884 e-con-full e-flex e-con e-parent\" data-id=\"1728884\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1c3a4e elementor-widget elementor-widget-html\" data-id=\"c1c3a4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- GLOBAL VARIABLES --- *\/\r\n    :root {\r\n        --text-dark: #222222;\r\n        --border-color: #e1e1e1;\r\n        --font-main: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    #goli-shop-app {\r\n        font-family: var(--font-main);\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 20px 0;\r\n    }\r\n\r\n    \/* --- TOP FILTER NAVIGATION --- *\/\r\n    .shop-filter-nav {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 30px;\r\n        margin-bottom: 40px;\r\n        flex-wrap: nowrap;\r\n        overflow-x: auto;\r\n        padding-bottom: 10px;\r\n        scrollbar-width: none; \/* Hide scrollbar Firefox *\/\r\n    }\r\n    .shop-filter-nav::-webkit-scrollbar { display: none; \/* Hide scrollbar Chrome\/Safari *\/ }\r\n\r\n    .nav-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        cursor: pointer;\r\n        transition: transform 0.2s;\r\n        min-width: 80px;\r\n    }\r\n    .nav-item:hover { transform: translateY(-3px); }\r\n\r\n    .nav-img-wrap {\r\n        width: 70px;\r\n        height: 70px;\r\n        border-radius: 50%;\r\n        padding: 4px;\r\n        background: transparent;\r\n        border: 2px solid transparent;\r\n        transition: all 0.3s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 8px;\r\n    }\r\n    \r\n    .nav-item.active .nav-img-wrap {\r\n        border-color: var(--theme-color);\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    .nav-img-wrap img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .nav-label {\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        color: var(--text-dark);\r\n        text-align: center;\r\n    }\r\n\r\n    \/* --- PRODUCT GRID --- *\/\r\n    .shop-product-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n        gap: 25px;\r\n        align-items: start;\r\n    }\r\n\r\n    \/* --- PRODUCT CARD --- *\/\r\n    .g-card {\r\n        border-radius: 12px;\r\n        padding: 25px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: order 0.4s ease; \/* For sorting *\/\r\n    }\r\n\r\n    .g-card-title {\r\n        font-size: 20px;\r\n        font-weight: 800;\r\n        color: var(--theme-color);\r\n        text-align: center;\r\n        margin-bottom: 20px;\r\n        min-height: 48px; \/* Aligns titles if lengths vary *\/\r\n    }\r\n\r\n    .g-card-body {\r\n        display: flex;\r\n        gap: 15px;\r\n        margin-bottom: 20px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* Left Image Area *\/\r\n    .g-card-left {\r\n        flex: 1;\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .g-card-left img {\r\n        max-width: 100%;\r\n        height: auto;\r\n        transform: scale(1.1); \/* Make bottle pop *\/\r\n    }\r\n\r\n    \/* Right Pricing Area *\/\r\n    .g-card-right {\r\n        flex: 1.2;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n    }\r\n    .g-price-box {\r\n        background: var(--theme-color);\r\n        border-radius: 10px;\r\n        padding: 15px;\r\n        color: white;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n    }\r\n    .g-price-title {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n    }\r\n    .g-price-main {\r\n        margin-bottom: 5px;\r\n        line-height: 1;\r\n    }\r\n    .g-price-big { font-size: 28px; font-weight: 800; }\r\n    .g-price-small { font-size: 12px; font-weight: 600; opacity: 0.9; }\r\n    \r\n    .g-price-sub { font-size: 11px; opacity: 0.9; }\r\n    .g-strike { text-decoration: line-through; opacity: 0.7; margin-left: 4px; }\r\n\r\n    \/* Bottom Controls *\/\r\n    .g-pack-row {\r\n        display: flex;\r\n        gap: 8px;\r\n        margin-bottom: 15px;\r\n    }\r\n    .g-pack-btn {\r\n        flex: 1;\r\n        background: white;\r\n        border: 2px solid white;\r\n        color: black;\r\n        font-weight: 700;\r\n        font-size: 13px;\r\n        padding: 10px 0;\r\n        text-align: center;\r\n        border-radius: 30px;\r\n        cursor: pointer;\r\n        transition: 0.2s;\r\n    }\r\n    .g-pack-btn.active {\r\n        background: var(--theme-color);\r\n        color: white;\r\n        border-color: var(--theme-color);\r\n    }\r\n\r\n    .g-add-btn {\r\n        width: 100%;\r\n        background: black;\r\n        color: white;\r\n        font-weight: 800;\r\n        font-size: 16px;\r\n        padding: 15px;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        text-transform: uppercase;\r\n        transition: opacity 0.2s;\r\n    }\r\n    .g-add-btn:hover { opacity: 0.8; }\r\n\r\n    \/* --- MOBILE RESPONSIVE FIXES --- *\/\r\n    @media(max-width: 768px) {\r\n        \/* Keeps the top navigation circles centered on mobile *\/\r\n        .shop-filter-nav { \r\n            justify-content: center; \r\n            padding: 0 10px; \r\n        }\r\n        \r\n        \/* Stacks the image and price nicely on very small screens *\/\r\n        .g-card-body {\r\n            flex-direction: column;\r\n            text-align: center;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"goli-shop-app\">\r\n    <div class=\"shop-filter-nav\" id=\"filter-nav\"><\/div>\r\n    \r\n    <div class=\"shop-product-grid\" id=\"product-grid\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/**\r\n * =========================================\r\n * YOUR SHOP DATABASE (Edit this section)\r\n * =========================================\r\n *\/\r\nconst ShopDB = {\r\n    currency: \" \u062f.\u0645.\",\r\n    products: [\r\n        {\r\n            id: \"ashwa\",\r\n            title: \"Ashwagandha Gummies\",\r\n            shortName: \"Ashwa\", \/\/ Text under the top circle\r\n            themeColor: \"#008ebc\", \/\/ Main Blue\r\n            themeBg: \"#e6f6fa\", \/\/ Light Blue Background\r\n            filterImg: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\", \/\/ Circle Image\r\n            defaultPack: 3,\r\n            packs: {\r\n                1: { id: 416, total: 200, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                3: { id: 417, total: 350, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                5: { id: 418, total: 750, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" }\r\n            }\r\n        },\r\n        {\r\n            id: \"acv\",\r\n            title: \"Apple Cider Vinegar\",\r\n            shortName: \"ACV\",\r\n            themeColor: \"#d1242b\", \/\/ Main Red\r\n            themeBg: \"#fbeaea\", \/\/ Light Red Background\r\n            filterImg: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\", \/\/ Replace with ACV image\r\n            defaultPack: 3,\r\n            packs: {\r\n                1: { id: 501, total: 200, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                3: { id: 502, total: 350, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                5: { id: 503, total: 750, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" }\r\n            }\r\n        },\r\n        {\r\n            id: \"supergreens\",\r\n            title: \"Supergreens Gummies\",\r\n            shortName: \"Greens\",\r\n            themeColor: \"#00994d\", \/\/ Main Green\r\n            themeBg: \"#e6f5ec\", \/\/ Light Green Background\r\n            filterImg: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\", \/\/ Replace with Greens image\r\n            defaultPack: 3,\r\n            packs: {\r\n                1: { id: 601, total: 200, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                3: { id: 602, total: 350, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" },\r\n                5: { id: 603, total: 750, img: \"https:\/\/boutizouabio.com\/wp-content\/uploads\/2026\/02\/ashwa-3pack-shop-1_600x600.jpeg\" }\r\n            }\r\n        }\r\n        \/\/ YOU CAN COPY AND ADD MORE PRODUCTS HERE!\r\n    ]\r\n};\r\n\r\n\/**\r\n * =========================================\r\n * SHOP LOGIC (Do not edit below)\r\n * =========================================\r\n *\/\r\nconst shopApp = {\r\n    filter: null, \/\/ Holds the currently clicked circle ID\r\n    selectedPacks: {}, \/\/ Remembers which pack is selected for each product\r\n\r\n    init: function() {\r\n        \/\/ Set default packs on load\r\n        ShopDB.products.forEach(p => {\r\n            this.selectedPacks[p.id] = p.defaultPack;\r\n        });\r\n        this.renderAll();\r\n    },\r\n\r\n    setFilter: function(id) {\r\n        \/\/ If clicking the same filter, turn it off. Otherwise, set it.\r\n        this.filter = this.filter === id ? null : id;\r\n        this.renderAll();\r\n    },\r\n\r\n    setPack: function(productId, packSize) {\r\n        this.selectedPacks[productId] = packSize;\r\n        this.renderAll(); \/\/ Re-render grid to update prices\r\n    },\r\n\r\n    renderAll: function() {\r\n        this.renderNav();\r\n        this.renderGrid();\r\n    },\r\n\r\n    renderNav: function() {\r\n        const navEl = document.getElementById('filter-nav');\r\n        let html = '';\r\n\r\n        ShopDB.products.forEach(p => {\r\n            const isActive = this.filter === p.id ? 'active' : '';\r\n            html += `\r\n                <div class=\"nav-item ${isActive}\" onclick=\"shopApp.setFilter('${p.id}')\">\r\n                    <div class=\"nav-img-wrap\" style=\"--theme-color: ${p.themeColor}\">\r\n                        <img decoding=\"async\" src=\"${p.filterImg}\" alt=\"${p.shortName}\">\r\n                    <\/div>\r\n                    <div class=\"nav-label\">${p.shortName}<\/div>\r\n                <\/div>\r\n            `;\r\n        });\r\n        navEl.innerHTML = html;\r\n    },\r\n\r\n    renderGrid: function() {\r\n        const gridEl = document.getElementById('product-grid');\r\n        let html = '';\r\n\r\n        ShopDB.products.forEach(p => {\r\n            const currentPack = this.selectedPacks[p.id];\r\n            const packData = p.packs[currentPack];\r\n            const cur = ShopDB.currency;\r\n            \r\n            \/\/ Math\r\n            const unitPrice = (packData.total \/ currentPack).toFixed(2);\r\n            const fakeTotal = (packData.total * 1.2).toFixed(2);\r\n\r\n            \/\/ Sorting Logic: If this product is the active filter, set order to -1 (moves to front)\r\n            const sortOrder = this.filter === p.id ? -1 : 0;\r\n\r\n            html += `\r\n                <div class=\"g-card\" style=\"background-color: ${p.themeBg}; --theme-color: ${p.themeColor}; order: ${sortOrder};\">\r\n                    <div class=\"g-card-title\">${p.title}<\/div>\r\n                    \r\n                    <div class=\"g-card-body\">\r\n                        <div class=\"g-card-left\">\r\n                            <img decoding=\"async\" src=\"${packData.img}\" alt=\"${p.title}\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"g-card-right\">\r\n                            <div class=\"g-price-box\">\r\n                                <div class=\"g-price-title\">One-time Purchase<\/div>\r\n                                <div class=\"g-price-main\">\r\n                                    <span class=\"g-price-big\">${unitPrice}<\/span><span class=\"g-price-small\">${cur}\/each<\/span>\r\n                                <\/div>\r\n                                <div class=\"g-price-sub\">\r\n                                    Total: ${packData.total.toFixed(2)}${cur} \r\n                                    <span class=\"g-strike\">${fakeTotal}${cur}<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"g-pack-row\">\r\n                        <div class=\"g-pack-btn ${currentPack === 1 ? 'active' : ''}\" onclick=\"shopApp.setPack('${p.id}', 1)\">1-PACK<\/div>\r\n                        <div class=\"g-pack-btn ${currentPack === 3 ? 'active' : ''}\" onclick=\"shopApp.setPack('${p.id}', 3)\">3-PACK<\/div>\r\n                        <div class=\"g-pack-btn ${currentPack === 5 ? 'active' : ''}\" onclick=\"shopApp.setPack('${p.id}', 5)\">5-PACK<\/div>\r\n                    <\/div>\r\n\r\n                    <button class=\"g-add-btn\" id=\"btn_${p.id}\" onclick=\"shopApp.addToCart('${p.id}')\">ADD TO CART<\/button>\r\n                <\/div>\r\n            `;\r\n        });\r\n\r\n        gridEl.innerHTML = html;\r\n    },\r\n\r\n    addToCart: function(productId) {\r\n        const currentPack = this.selectedPacks[productId];\r\n        const productData = ShopDB.products.find(p => p.id === productId);\r\n        const variationId = productData.packs[currentPack].id;\r\n        \r\n        const btn = document.getElementById('btn_' + productId);\r\n        const originalText = btn.innerText;\r\n\r\n        \/\/ Visual feedback\r\n        btn.innerText = \"ADDING...\";\r\n        btn.style.opacity = \"0.7\";\r\n\r\n        \/\/ AJAX Add to Cart\r\n        let formData = new FormData();\r\n        formData.append('add-to-cart', variationId);\r\n        formData.append('quantity', 1);\r\n\r\n        fetch(window.location.pathname, {\r\n            method: 'POST',\r\n            body: formData\r\n        })\r\n        .then(response => {\r\n            btn.innerText = \"\u2714 ADDED\";\r\n            btn.style.opacity = \"1\";\r\n            setTimeout(() => { btn.innerText = originalText; }, 2500);\r\n\r\n            \/\/ Open Side Cart Drawer\r\n            if (typeof jQuery !== 'undefined') {\r\n                jQuery(document.body).trigger('wc_fragment_refresh');\r\n                jQuery(document.body).trigger('added_to_cart', [null, null, jQuery(btn)]);\r\n            }\r\n        })\r\n        .catch(error => {\r\n            window.location.href = '\/?add-to-cart=' + variationId + '&quantity=1';\r\n        });\r\n    }\r\n};\r\n\r\n\/\/ Start the app when the page loads\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    shopApp.init();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boutizouabio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38"}],"version-history":[{"count":127,"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/boutizouabio.com\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions\/832"}],"wp:attachment":[{"href":"https:\/\/boutizouabio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}