ZenPaw \u2014 Sanctuary Cart<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'zen-deep': '#2C362A',\r\n 'zen-green': '#4A5D45',\r\n 'zen-gold': '#C5A059',\r\n 'zen-ivory': '#FDFCF9',\r\n 'zen-sand': '#F2EEE5',\r\n },\r\n fontFamily: {\r\n sans: ['Instrument Sans', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n .grain {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 999;\r\n pointer-events: none;\r\n opacity: 0.04;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n }\r\n \/* Fade transition class for dynamic loading *\/\r\n .syncing { opacity: 0.5; pointer-events: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-zen-ivory text-zen-deep font-sans selection:bg-zen-gold selection:text-white overflow-x-hidden pt-32\">\r\n <div class=\"grain\"><\/div>\r\n\r\n \r\n <nav class=\"fixed top-8 left-1\/2 -translate-x-1\/2 z-[100] w-[92%] max-w-4xl\">\r\n <div class=\"bg-zen-deep\/95 backdrop-blur-xl border border-white\/10 rounded-full px-8 py-4 flex items-center justify-between shadow-2xl\">\r\n <a href=\"\/\" class=\"flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity\">\r\n <div class=\"w-8 h-8 bg-zen-gold rounded-full flex items-center justify-center\"><\/div>\r\n <span class=\"font-bold text-white tracking-tighter text-xl\">ZenPaw<\/span>\r\n <\/a>\r\n <div class=\"flex items-center gap-4\">\r\n <span id=\"cart-status\" class=\"text-[10px] uppercase font-bold text-gray-400 tracking-widest hidden sm:block\">\r\n Syncing Sanctuary...\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav> \r\n\r\n <div class=\"max-w-6xl mx-auto px-6\">\r\n \r\n <div class=\"mb-16 text-center space-y-4\">\r\n <h1 class=\"text-5xl md:text-7xl font-serif tracking-tighter\">Sanctuary <span class=\"italic text-zen-green\">Selections<\/span><\/h1>\r\n <div class=\"flex items-center justify-center gap-4 text-[10px] font-bold uppercase tracking-[0.3em] text-zen-gold\">\r\n Cart\r\n <span class=\"text-zen-deep opacity-20\">\u2014\u2014<\/span>\r\n <span class=\"text-gray-400\">Checkout<\/span>\r\n <span class=\"text-zen-deep opacity-20\">\u2014\u2014<\/span>\r\n <span class=\"text-gray-400\">Manifest<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-12 gap-16\">\r\n \r\n <div id=\"cart-items-container\" class=\"lg:col-span-8 space-y-8 transition-opacity duration-300\">\r\n \r\n <div class=\"p-16 text-center\">\r\n <div class=\"w-8 h-8 mx-auto border-4 border-zen-sand border-t-zen-gold rounded-full animate-spin mb-4\"><\/div>\r\n <p class=\"text-xs text-gray-400 font-bold uppercase tracking-widest\">Connecting to WooCommerce...<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-summary-container\" class=\"lg:col-span-4\" style=\"display: none;\">\r\n <div class=\"bg-zen-deep text-white rounded-[3rem] p-10 shadow-2xl space-y-8 sticky top-32\">\r\n <h4 class=\"text-2xl font-serif\">Manifest Summary<\/h4>\r\n <div class=\"space-y-4 text-sm font-light\">\r\n <div class=\"flex justify-between text-gray-400\">\r\n Subtotal <span id=\"cart-subtotal\" class=\"text-white\">...<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-gray-400\">\r\n Eco-Sourced Shipping <span class=\"text-white\">FREE<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-gray-400\">\r\n Tax Estimates <span id=\"cart-tax\" class=\"text-white\">...<\/span>\r\n <\/div>\r\n <div class=\"h-px bg-white\/10 my-6\"><\/div>\r\n <div class=\"flex justify-between items-baseline\">\r\n <span class=\"text-lg font-serif\">Total Due<\/span>\r\n <span id=\"cart-total\" class=\"text-3xl font-serif text-zen-gold\">...<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n \r\n <a href=\"https:\/\/zenpawpetwellness.com\/?page_id=17\" class=\"block w-full text-center bg-zen-gold text-zen-deep py-5 rounded-3xl font-bold uppercase tracking-widest text-[10px] hover:shadow-lg hover:scale-[1.02] transition-all\">\r\n Proceed to Checkout\r\n <\/a>\r\n <p class=\"text-[9px] text-center text-gray-500 uppercase tracking-widest opacity-60\">Secure Encrypted Transaction<\/p>\r\n <\/div>\r\n \r\n <div class=\"pt-8 border-t border-white\/5 flex items-center gap-4\">\r\n <div class=\"w-10 h-10 border border-zen-gold\/30 rounded-full flex items-center justify-center text-zen-gold\">\r\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg>\r\n <\/div>\r\n <p class=\"text-[10px] text-gray-400 leading-relaxed uppercase tracking-wider\">100% Botanical Sanctuary Guarantee<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n\r\n <footer class=\"bg-zen-deep text-white py-24 px-6 mt-24\">\r\n <div class=\"max-w-6xl mx-auto text-center space-y-8\">\r\n <div class=\"flex items-center justify-center gap-3\">\r\n <div class=\"w-8 h-8 bg-zen-gold rounded-full\"><\/div>\r\n <span class=\"text-2xl font-serif tracking-tighter uppercase\">ZenPaw Sanctuary<\/span>\r\n <\/div>\r\n <p class=\"text-[10px] uppercase tracking-[0.5em] text-gray-600\">\u00a9 2024 Botanical Sanctuary Group \u2014 Longevity by Nature<\/p>\r\n <\/div>\r\n <\/footer> \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const cartContainer = document.getElementById('cart-items-container');\r\n const cartStatus = document.getElementById('cart-status');\r\n const summaryContainer = document.getElementById('cart-summary-container');\r\n const subtotalEl = document.getElementById('cart-subtotal');\r\n const taxEl = document.getElementById('cart-tax');\r\n const totalEl = document.getElementById('cart-total');\r\n\r\n \/\/ Store Cart Token to authenticate headless API requests\r\n let cartToken = localStorage.getItem('wc_cart_token') || '';\r\n\r\n \/\/ Format raw WooCommerce API price (e.g. 8900 -> SGD 89.00)\r\n function formatPrice(amountString, totalsObj) {\r\n const amount = parseInt(amountString, 10);\r\n const decimals = totalsObj.currency_minor_unit;\r\n const currencyCode = totalsObj.currency_code; \/\/ e.g., SGD, AUD\r\n const formattedValue = (amount \/ Math.pow(10, decimals)).toFixed(decimals);\r\n return `${currencyCode} ${formattedValue}`;\r\n }\r\n\r\n \/\/ Central Fetch Function for WooCommerce Store API (v1)\r\n async function fetchCart() {\r\n try {\r\n const headers = {};\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting to support Plain Permalinks\r\n const response = await fetch('\/?rest_route=\/wc\/store\/v1\/cart', { headers });\r\n \r\n \/\/ Capture headless session token if provided\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n if (!response.ok) throw new Error('Failed to fetch cart data.');\r\n \r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('WooCommerce API Error:', error);\r\n cartContainer.innerHTML = `\r\n <div class=\"p-8 bg-white rounded-3xl border border-red-100 text-center space-y-4 shadow-sm\">\r\n <p class=\"text-red-400 font-bold uppercase tracking-widest text-xs\">Connection Error<\/p>\r\n <p class=\"text-sm text-gray-500\">Could not connect to WooCommerce API. Please ensure this code is running directly on your WordPress site (zenpawpetwellness.com) so the API can authenticate.<\/p>\r\n <\/div>`;\r\n cartStatus.innerText = \"Cart Offline\";\r\n }\r\n }\r\n\r\n \/\/ Remove Item Function\r\n window.removeItem = async function(itemKey) {\r\n try {\r\n cartContainer.classList.add('syncing');\r\n const headers = { 'Content-Type': 'application\/json' };\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting\r\n const response = await fetch(`\/?rest_route=\/wc\/store\/v1\/cart\/items\/${itemKey}`, {\r\n method: 'DELETE',\r\n headers: headers\r\n });\r\n\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('Error removing item:', error);\r\n fetchCart(); \/\/ Re-sync to prevent broken state\r\n } finally {\r\n cartContainer.classList.remove('syncing');\r\n }\r\n };\r\n\r\n \/\/ Update Quantity Function\r\n window.updateQuantity = async function(itemKey, newQty) {\r\n if (newQty < 1) return; \/\/ Prevent 0 (use remove instead)\r\n \r\n try {\r\n cartContainer.classList.add('syncing');\r\n const headers = { 'Content-Type': 'application\/json' };\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting\r\n const response = await fetch(`\/?rest_route=\/wc\/store\/v1\/cart\/items\/${itemKey}`, {\r\n method: 'PUT',\r\n headers: headers,\r\n body: JSON.stringify({ quantity: newQty })\r\n });\r\n\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('Error updating quantity:', error);\r\n fetchCart(); \r\n } finally {\r\n cartContainer.classList.remove('syncing');\r\n }\r\n };\r\n\r\n \/\/ Render DOM Elements based on Data\r\n function renderCart(cart) {\r\n const itemCount = cart.items_count || 0;\r\n cartStatus.innerText = `Cart Status: ${itemCount} Item${itemCount !== 1 ? 's' : ''}`;\r\n\r\n \/\/ Handle Empty Cart\r\n if (itemCount === 0) {\r\n summaryContainer.style.display = 'none';\r\n cartContainer.innerHTML = `\r\n <div class=\"flex flex-col items-center justify-center p-16 bg-white rounded-[3rem] shadow-sm border border-gray-100 text-center space-y-6\">\r\n <div class=\"w-20 h-20 bg-zen-sand rounded-full flex items-center justify-center text-zen-gold\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-3xl font-serif text-zen-deep tracking-tight\">Your sanctuary cart is empty<\/h3>\r\n <a href=\"\/#offers\" class=\"bg-zen-gold text-white px-8 py-3 rounded-full text-[10px] font-bold uppercase tracking-widest hover:bg-zen-deep transition-colors mt-4 inline-block shadow-md\">Explore Collection<\/a>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n summaryContainer.style.display = 'block';\r\n\r\n \/\/ Build HTML for each item dynamically\r\n let itemsHtml = cart.items.map(item => {\r\n const fallbackImg = 'https:\/\/images.unsplash.com\/photo-1589924691106-073b69a59b86?auto=format&fit=crop&q=80&w=400';\r\n const imageSrc = item.images && item.images.length > 0 ? item.images[0].src : fallbackImg;\r\n const priceFormatted = formatPrice(item.totals.line_total, cart.totals);\r\n\r\n return `\r\n <div class=\"flex flex-col sm:flex-row items-center gap-8 p-8 bg-white rounded-[3rem] shadow-sm border border-gray-100 group hover:shadow-md transition-shadow relative\">\r\n \r\n <div class=\"w-32 h-32 bg-zen-sand rounded-3xl overflow-hidden shrink-0\">\r\n <img decoding=\"async\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\" src=\"${imageSrc}\" alt=\"${item.name}\" \/>\r\n <\/div>\r\n \r\n \r\n <div class=\"flex-grow space-y-2 text-center sm:text-left\">\r\n <span class=\"text-[10px] font-bold text-zen-gold uppercase tracking-widest\">Sanctuary Item<\/span>\r\n <h3 class=\"text-2xl font-serif text-zen-deep\">${item.name}<\/h3>\r\n \r\n <p class=\"text-xs text-gray-400 font-light\">${item.short_description ? item.short_description.replace(\/<[^>]*>?\/gm, '') : 'Premium Botanical Remedy'}<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-6\">\r\n \r\n <div class=\"flex items-center border border-zen-sand rounded-full px-4 py-2 gap-4\">\r\n <button onclick=\"updateQuantity('${item.key}', ${item.quantity - 1})\" class=\"text-zen-gold hover:text-zen-deep transition-colors\">\u2014<\/button>\r\n <span class=\"text-sm font-bold w-4 text-center\">${item.quantity}<\/span>\r\n <button onclick=\"updateQuantity('${item.key}', ${item.quantity + 1})\" class=\"text-zen-gold hover:text-zen-deep transition-colors\">+<\/button>\r\n <\/div>\r\n \r\n <div class=\"text-right min-w-[80px]\">\r\n <p class=\"text-xl font-serif whitespace-nowrap\">${priceFormatted}<\/p>\r\n <\/div>\r\n \r\n <button onclick=\"removeItem('${item.key}')\" class=\"text-gray-300 hover:text-red-400 transition-colors bg-white p-2 rounded-full border border-transparent hover:border-red-100 shadow-sm hover:shadow\" title=\"Remove item\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ Append bottom actions (Coupon & Back link)\r\n itemsHtml += `\r\n <div class=\"flex flex-col sm:flex-row justify-between items-center gap-6 pt-8\">\r\n <a class=\"text-xs font-bold uppercase tracking-widest text-zen-deep border-b-2 border-zen-gold pb-1 hover:gap-4 transition-all flex items-center gap-2\" href=\"\/#offers\">\r\n Return to Sanctuary\r\n <\/a>\r\n <div class=\"flex gap-4 w-full sm:w-auto\">\r\n <input class=\"bg-white border border-zen-sand rounded-full px-6 py-3 text-xs focus:outline-none focus:border-zen-gold w-full sm:w-48 shadow-sm\" type=\"text\" placeholder=\"Offer Code\" \/>\r\n <button class=\"bg-zen-sand text-zen-deep px-6 py-3 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-zen-gold hover:text-white transition-colors shadow-sm\">Apply<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n cartContainer.innerHTML = itemsHtml;\r\n\r\n \/\/ Update Sidebar Summary Totals\r\n subtotalEl.innerText = formatPrice(cart.totals.total_items, cart.totals);\r\n taxEl.innerText = formatPrice(cart.totals.total_tax, cart.totals);\r\n totalEl.innerText = formatPrice(cart.totals.total_price, cart.totals);\r\n }\r\n\r\n \/\/ Run on initial load\r\n fetchCart();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>ZenPaw \u2014 Sanctuary Cart ZenPaw Syncing Sanctuary… Sanctuary Selections Cart \u2014\u2014 Checkout \u2014\u2014 Manifest Connecting to WooCommerce… Manifest Summary Subtotal … Eco-Sourced Shipping FREE Tax Estimates … Total Due … Proceed to Checkout Secure Encrypted Transaction 100% Botanical Sanctuary Guarantee ZenPaw Sanctuary \u00a9 2024 Botanical Sanctuary Group \u2014 Longevity by Nature<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":25,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n ZenPaw \u2014 Sanctuary Cart<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'zen-deep': '#2C362A',\r\n 'zen-green': '#4A5D45',\r\n 'zen-gold': '#C5A059',\r\n 'zen-ivory': '#FDFCF9',\r\n 'zen-sand': '#F2EEE5',\r\n },\r\n fontFamily: {\r\n sans: ['Instrument Sans', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n .grain {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 999;\r\n pointer-events: none;\r\n opacity: 0.04;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n }\r\n \/* Fade transition class for dynamic loading *\/\r\n .syncing { opacity: 0.5; pointer-events: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-zen-ivory text-zen-deep font-sans selection:bg-zen-gold selection:text-white overflow-x-hidden pt-32\">\r\n <div class=\"grain\"><\/div>\r\n\r\n \r\n <nav class=\"fixed top-8 left-1\/2 -translate-x-1\/2 z-[100] w-[92%] max-w-4xl\">\r\n <div class=\"bg-zen-deep\/95 backdrop-blur-xl border border-white\/10 rounded-full px-8 py-4 flex items-center justify-between shadow-2xl\">\r\n <a href=\"\/\" class=\"flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity\">\r\n <div class=\"w-8 h-8 bg-zen-gold rounded-full flex items-center justify-center\"><\/div>\r\n <span class=\"font-bold text-white tracking-tighter text-xl\">ZenPaw<\/span>\r\n <\/a>\r\n <div class=\"flex items-center gap-4\">\r\n <span id=\"cart-status\" class=\"text-[10px] uppercase font-bold text-gray-400 tracking-widest hidden sm:block\">\r\n Syncing Sanctuary...\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav> \r\n\r\n <div class=\"max-w-6xl mx-auto px-6\">\r\n \r\n <div class=\"mb-16 text-center space-y-4\">\r\n <h1 class=\"text-5xl md:text-7xl font-serif tracking-tighter\">Sanctuary <span class=\"italic text-zen-green\">Selections<\/span><\/h1>\r\n <div class=\"flex items-center justify-center gap-4 text-[10px] font-bold uppercase tracking-[0.3em] text-zen-gold\">\r\n Cart\r\n <span class=\"text-zen-deep opacity-20\">\u2014\u2014<\/span>\r\n <span class=\"text-gray-400\">Checkout<\/span>\r\n <span class=\"text-zen-deep opacity-20\">\u2014\u2014<\/span>\r\n <span class=\"text-gray-400\">Manifest<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-12 gap-16\">\r\n \r\n <div id=\"cart-items-container\" class=\"lg:col-span-8 space-y-8 transition-opacity duration-300\">\r\n \r\n <div class=\"p-16 text-center\">\r\n <div class=\"w-8 h-8 mx-auto border-4 border-zen-sand border-t-zen-gold rounded-full animate-spin mb-4\"><\/div>\r\n <p class=\"text-xs text-gray-400 font-bold uppercase tracking-widest\">Connecting to WooCommerce...<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-summary-container\" class=\"lg:col-span-4\" style=\"display: none;\">\r\n <div class=\"bg-zen-deep text-white rounded-[3rem] p-10 shadow-2xl space-y-8 sticky top-32\">\r\n <h4 class=\"text-2xl font-serif\">Manifest Summary<\/h4>\r\n <div class=\"space-y-4 text-sm font-light\">\r\n <div class=\"flex justify-between text-gray-400\">\r\n Subtotal <span id=\"cart-subtotal\" class=\"text-white\">...<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-gray-400\">\r\n Eco-Sourced Shipping <span class=\"text-white\">FREE<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-gray-400\">\r\n Tax Estimates <span id=\"cart-tax\" class=\"text-white\">...<\/span>\r\n <\/div>\r\n <div class=\"h-px bg-white\/10 my-6\"><\/div>\r\n <div class=\"flex justify-between items-baseline\">\r\n <span class=\"text-lg font-serif\">Total Due<\/span>\r\n <span id=\"cart-total\" class=\"text-3xl font-serif text-zen-gold\">...<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n \r\n <a href=\"https:\/\/zenpawpetwellness.com\/?page_id=17\" class=\"block w-full text-center bg-zen-gold text-zen-deep py-5 rounded-3xl font-bold uppercase tracking-widest text-[10px] hover:shadow-lg hover:scale-[1.02] transition-all\">\r\n Proceed to Checkout\r\n <\/a>\r\n <p class=\"text-[9px] text-center text-gray-500 uppercase tracking-widest opacity-60\">Secure Encrypted Transaction<\/p>\r\n <\/div>\r\n \r\n <div class=\"pt-8 border-t border-white\/5 flex items-center gap-4\">\r\n <div class=\"w-10 h-10 border border-zen-gold\/30 rounded-full flex items-center justify-center text-zen-gold\">\r\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg>\r\n <\/div>\r\n <p class=\"text-[10px] text-gray-400 leading-relaxed uppercase tracking-wider\">100% Botanical Sanctuary Guarantee<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n\r\n <footer class=\"bg-zen-deep text-white py-24 px-6 mt-24\">\r\n <div class=\"max-w-6xl mx-auto text-center space-y-8\">\r\n <div class=\"flex items-center justify-center gap-3\">\r\n <div class=\"w-8 h-8 bg-zen-gold rounded-full\"><\/div>\r\n <span class=\"text-2xl font-serif tracking-tighter uppercase\">ZenPaw Sanctuary<\/span>\r\n <\/div>\r\n <p class=\"text-[10px] uppercase tracking-[0.5em] text-gray-600\">\u00a9 2024 Botanical Sanctuary Group \u2014 Longevity by Nature<\/p>\r\n <\/div>\r\n <\/footer> \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const cartContainer = document.getElementById('cart-items-container');\r\n const cartStatus = document.getElementById('cart-status');\r\n const summaryContainer = document.getElementById('cart-summary-container');\r\n const subtotalEl = document.getElementById('cart-subtotal');\r\n const taxEl = document.getElementById('cart-tax');\r\n const totalEl = document.getElementById('cart-total');\r\n\r\n \/\/ Store Cart Token to authenticate headless API requests\r\n let cartToken = localStorage.getItem('wc_cart_token') || '';\r\n\r\n \/\/ Format raw WooCommerce API price (e.g. 8900 -> SGD 89.00)\r\n function formatPrice(amountString, totalsObj) {\r\n const amount = parseInt(amountString, 10);\r\n const decimals = totalsObj.currency_minor_unit;\r\n const currencyCode = totalsObj.currency_code; \/\/ e.g., SGD, AUD\r\n const formattedValue = (amount \/ Math.pow(10, decimals)).toFixed(decimals);\r\n return `${currencyCode} ${formattedValue}`;\r\n }\r\n\r\n \/\/ Central Fetch Function for WooCommerce Store API (v1)\r\n async function fetchCart() {\r\n try {\r\n const headers = {};\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting to support Plain Permalinks\r\n const response = await fetch('\/?rest_route=\/wc\/store\/v1\/cart', { headers });\r\n \r\n \/\/ Capture headless session token if provided\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n if (!response.ok) throw new Error('Failed to fetch cart data.');\r\n \r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('WooCommerce API Error:', error);\r\n cartContainer.innerHTML = `\r\n <div class=\"p-8 bg-white rounded-3xl border border-red-100 text-center space-y-4 shadow-sm\">\r\n <p class=\"text-red-400 font-bold uppercase tracking-widest text-xs\">Connection Error<\/p>\r\n <p class=\"text-sm text-gray-500\">Could not connect to WooCommerce API. Please ensure this code is running directly on your WordPress site (zenpawpetwellness.com) so the API can authenticate.<\/p>\r\n <\/div>`;\r\n cartStatus.innerText = \"Cart Offline\";\r\n }\r\n }\r\n\r\n \/\/ Remove Item Function\r\n window.removeItem = async function(itemKey) {\r\n try {\r\n cartContainer.classList.add('syncing');\r\n const headers = { 'Content-Type': 'application\/json' };\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting\r\n const response = await fetch(`\/?rest_route=\/wc\/store\/v1\/cart\/items\/${itemKey}`, {\r\n method: 'DELETE',\r\n headers: headers\r\n });\r\n\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('Error removing item:', error);\r\n fetchCart(); \/\/ Re-sync to prevent broken state\r\n } finally {\r\n cartContainer.classList.remove('syncing');\r\n }\r\n };\r\n\r\n \/\/ Update Quantity Function\r\n window.updateQuantity = async function(itemKey, newQty) {\r\n if (newQty < 1) return; \/\/ Prevent 0 (use remove instead)\r\n \r\n try {\r\n cartContainer.classList.add('syncing');\r\n const headers = { 'Content-Type': 'application\/json' };\r\n if (cartToken) headers['Cart-Token'] = cartToken;\r\n\r\n \/\/ UPDATED: Using ?rest_route= formatting\r\n const response = await fetch(`\/?rest_route=\/wc\/store\/v1\/cart\/items\/${itemKey}`, {\r\n method: 'PUT',\r\n headers: headers,\r\n body: JSON.stringify({ quantity: newQty })\r\n });\r\n\r\n if (response.headers.has('Cart-Token')) {\r\n cartToken = response.headers.get('Cart-Token');\r\n localStorage.setItem('wc_cart_token', cartToken);\r\n }\r\n\r\n const cart = await response.json();\r\n renderCart(cart);\r\n } catch (error) {\r\n console.error('Error updating quantity:', error);\r\n fetchCart(); \r\n } finally {\r\n cartContainer.classList.remove('syncing');\r\n }\r\n };\r\n\r\n \/\/ Render DOM Elements based on Data\r\n function renderCart(cart) {\r\n const itemCount = cart.items_count || 0;\r\n cartStatus.innerText = `Cart Status: ${itemCount} Item${itemCount !== 1 ? 's' : ''}`;\r\n\r\n \/\/ Handle Empty Cart\r\n if (itemCount === 0) {\r\n summaryContainer.style.display = 'none';\r\n cartContainer.innerHTML = `\r\n <div class=\"flex flex-col items-center justify-center p-16 bg-white rounded-[3rem] shadow-sm border border-gray-100 text-center space-y-6\">\r\n <div class=\"w-20 h-20 bg-zen-sand rounded-full flex items-center justify-center text-zen-gold\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-3xl font-serif text-zen-deep tracking-tight\">Your sanctuary cart is empty<\/h3>\r\n <a href=\"\/#offers\" class=\"bg-zen-gold text-white px-8 py-3 rounded-full text-[10px] font-bold uppercase tracking-widest hover:bg-zen-deep transition-colors mt-4 inline-block shadow-md\">Explore Collection<\/a>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n summaryContainer.style.display = 'block';\r\n\r\n \/\/ Build HTML for each item dynamically\r\n let itemsHtml = cart.items.map(item => {\r\n const fallbackImg = 'https:\/\/images.unsplash.com\/photo-1589924691106-073b69a59b86?auto=format&fit=crop&q=80&w=400';\r\n const imageSrc = item.images && item.images.length > 0 ? item.images[0].src : fallbackImg;\r\n const priceFormatted = formatPrice(item.totals.line_total, cart.totals);\r\n\r\n return `\r\n <div class=\"flex flex-col sm:flex-row items-center gap-8 p-8 bg-white rounded-[3rem] shadow-sm border border-gray-100 group hover:shadow-md transition-shadow relative\">\r\n \r\n <div class=\"w-32 h-32 bg-zen-sand rounded-3xl overflow-hidden shrink-0\">\r\n <img decoding=\"async\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\" src=\"${imageSrc}\" alt=\"${item.name}\" \/>\r\n <\/div>\r\n \r\n \r\n <div class=\"flex-grow space-y-2 text-center sm:text-left\">\r\n <span class=\"text-[10px] font-bold text-zen-gold uppercase tracking-widest\">Sanctuary Item<\/span>\r\n <h3 class=\"text-2xl font-serif text-zen-deep\">${item.name}<\/h3>\r\n \r\n <p class=\"text-xs text-gray-400 font-light\">${item.short_description ? item.short_description.replace(\/<[^>]*>?\/gm, '') : 'Premium Botanical Remedy'}<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-6\">\r\n \r\n <div class=\"flex items-center border border-zen-sand rounded-full px-4 py-2 gap-4\">\r\n <button onclick=\"updateQuantity('${item.key}', ${item.quantity - 1})\" class=\"text-zen-gold hover:text-zen-deep transition-colors\">\u2014<\/button>\r\n <span class=\"text-sm font-bold w-4 text-center\">${item.quantity}<\/span>\r\n <button onclick=\"updateQuantity('${item.key}', ${item.quantity + 1})\" class=\"text-zen-gold hover:text-zen-deep transition-colors\">+<\/button>\r\n <\/div>\r\n \r\n <div class=\"text-right min-w-[80px]\">\r\n <p class=\"text-xl font-serif whitespace-nowrap\">${priceFormatted}<\/p>\r\n <\/div>\r\n \r\n <button onclick=\"removeItem('${item.key}')\" class=\"text-gray-300 hover:text-red-400 transition-colors bg-white p-2 rounded-full border border-transparent hover:border-red-100 shadow-sm hover:shadow\" title=\"Remove item\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ Append bottom actions (Coupon & Back link)\r\n itemsHtml += `\r\n <div class=\"flex flex-col sm:flex-row justify-between items-center gap-6 pt-8\">\r\n <a class=\"text-xs font-bold uppercase tracking-widest text-zen-deep border-b-2 border-zen-gold pb-1 hover:gap-4 transition-all flex items-center gap-2\" href=\"\/#offers\">\r\n Return to Sanctuary\r\n <\/a>\r\n <div class=\"flex gap-4 w-full sm:w-auto\">\r\n <input class=\"bg-white border border-zen-sand rounded-full px-6 py-3 text-xs focus:outline-none focus:border-zen-gold w-full sm:w-48 shadow-sm\" type=\"text\" placeholder=\"Offer Code\" \/>\r\n <button class=\"bg-zen-sand text-zen-deep px-6 py-3 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-zen-gold hover:text-white transition-colors shadow-sm\">Apply<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n cartContainer.innerHTML = itemsHtml;\r\n\r\n \/\/ Update Sidebar Summary Totals\r\n subtotalEl.innerText = formatPrice(cart.totals.total_items, cart.totals);\r\n taxEl.innerText = formatPrice(cart.totals.total_tax, cart.totals);\r\n totalEl.innerText = formatPrice(cart.totals.total_price, cart.totals);\r\n }\r\n\r\n \/\/ Run on initial load\r\n fetchCart();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>ZenPaw \u2014 Sanctuary Cart ZenPaw Syncing Sanctuary… Sanctuary Selections Cart \u2014\u2014 Checkout \u2014\u2014 Manifest Connecting to WooCommerce… Manifest Summary Subtotal … Eco-Sourced Shipping FREE Tax Estimates … Total Due … Proceed to Checkout Secure Encrypted Transaction 100% Botanical Sanctuary Guarantee ZenPaw Sanctuary \u00a9 2024 Botanical Sanctuary Group \u2014 Longevity by Nature<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":25,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/zenpawpetwellness.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}