WhatsApp Shop \u2014 Paste-ready<\/title>\r\n<style>\r\n :root{\r\n --bg:#f6f9fb; --card:#ffffff; --muted:#6b7280; --accent:#06b6d4;\r\n --accent-2:#0891b2; --radius:12px; --max:1100px; --shadow:0 8px 30px rgba(2,6,23,0.08);\r\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n }\r\n *{box-sizing:border-box}\r\n body{margin:0;background:var(--bg);color:#0f172a; -webkit-font-smoothing:antialiased}\r\n .wrap{max-width:var(--max);margin:28px auto;padding:20px}\r\n header{display:flex;align-items:center;justify-content:space-between;gap:12px}\r\n header h1{margin:0;font-size:20px}\r\n .controls{display:flex;gap:10px;align-items:center}\r\n .btn{background:var(--accent);border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}\r\n .btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(6,182,212,0.18)}\r\n .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}\r\n .card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:280px}\r\n .thumb{width:100%;height:160px;border-radius:10px;object-fit:cover;background:#efefef}\r\n .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\r\n .title{font-weight:600;font-size:15px}\r\n .price{font-weight:700}\r\n .desc{color:var(--muted);font-size:13px;margin-top:8px;flex:1}\r\n .product-actions{display:flex;gap:8px;margin-top:12px;align-items:center}\r\n .product-actions input[type=\"number\"]{width:68px;padding:6px;border-radius:8px;border:1px solid #e6eef0}\r\n .floating-cart{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;padding:12px;border-radius:999px;box-shadow:0 10px 30px rgba(2,6,23,0.12);display:flex;gap:10px;align-items:center;cursor:pointer;z-index:1200}\r\n .drawer{position:fixed;right:0;top:0;height:100vh;width:380px;background:var(--card);box-shadow:-20px 0 60px rgba(2,6,23,0.12);transform:translateX(110%);transition:transform .28s ease;padding:18px;overflow:auto;z-index:1199}\r\n .drawer.open{transform:translateX(0)}\r\n .cart-item{display:flex;gap:10px;margin-bottom:12px}\r\n .cart-item img{width:72px;height:72px;object-fit:cover;border-radius:8px}\r\n .muted{color:var(--muted);font-size:13px}\r\n .admin{margin-top:14px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#f8fbfc);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}\r\n input,select,textarea{padding:8px;border-radius:8px;border:1px solid #e6eef0;width:100%}\r\n .small{font-size:13px;color:var(--muted)}\r\n footer{margin-top:22px;color:var(--muted);font-size:13px;text-align:center}\r\n @media (max-width:520px){ .drawer{width:92vw} .thumb{height:120px} }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\" role=\"application\">\r\n <header>\r\n <h1>WhatsApp Shop \u2014 Paste-ready<\/h1>\r\n <div class=\"controls\">\r\n <button class=\"btn\" id=\"openAdminBtn\">Admin<\/button>\r\n <button class=\"btn ghost\" id=\"resetDemoBtn\">Reset demo<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"storeArea\">\r\n <div id=\"productGrid\" class=\"grid\" aria-live=\"polite\"><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"floating-cart\" id=\"cartBtn\" title=\"Open cart\">\r\n \ud83d\uded2 <span id=\"cartCount\">0<\/span> \u2022 View cart\r\n <\/div>\r\n\r\n \r\n <aside class=\"drawer\" id=\"cartDrawer\" aria-hidden=\"true\">\r\n <h3>Your Cart<\/h3>\r\n <div id=\"cartList\"><\/div>\r\n <div class=\"small\" style=\"margin-top:10px\">Total: <strong id=\"cartTotal\">NGN 0<\/strong><\/div>\r\n <div style=\"display:flex;gap:8px;margin-top:12px\">\r\n <button class=\"btn\" id=\"checkoutBtn\">Checkout via WhatsApp<\/button>\r\n <button class=\"btn ghost\" id=\"clearCartBtn\">Clear<\/button>\r\n <\/div>\r\n\r\n <hr style=\"margin:14px 0\">\r\n\r\n <div class=\"admin\" id=\"adminPanel\" style=\"display:none\">\r\n <h4>Admin \u2014 Add product \/ CSV import<\/h4>\r\n <form id=\"productForm\">\r\n <input id=\"p_title\" placeholder=\"Title\" required style=\"margin-bottom:8px\"\/><br>\r\n <input id=\"p_price\" placeholder=\"Price (e.g. 3500)\" required style=\"margin-bottom:8px\"\/><br>\r\n <input id=\"p_image\" placeholder=\"Image URL\" style=\"margin-bottom:8px\"\/><br>\r\n <textarea id=\"p_desc\" placeholder=\"Short description\" rows=\"2\" style=\"margin-bottom:8px\"><\/textarea><br>\r\n <div style=\"display:flex;gap:8px\">\r\n <button class=\"btn\" type=\"submit\">Save product<\/button>\r\n <button type=\"button\" class=\"btn ghost\" id=\"importCsvBtn\">Import CSV<\/button>\r\n <\/div>\r\n <\/form>\r\n <input type=\"file\" id=\"csvFile\" accept=\".csv\" style=\"display:none;margin-top:10px\"\/>\r\n <p class=\"small\">CSV headers: id,title,price,image,description,sku,stock<\/p>\r\n\r\n <hr style=\"margin:14px 0\">\r\n <h4>WP REST integration (optional)<\/h4>\r\n <p class=\"small\">Enable WP REST to load products from your WordPress backend automatically.<\/p>\r\n <label class=\"small\">Endpoint: <input id=\"wpUrl\" placeholder=\"https:\/\/example.com\/wp-json\/wp\/v2\/products\" \/><\/label>\r\n <div style=\"display:flex;gap:8px;margin-top:8px\">\r\n <button class=\"btn\" id=\"enableWpBtn\">Load from WP REST<\/button>\r\n <button class=\"btn ghost\" id=\"disableWpBtn\">Disable WP REST<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n <footer>\r\n Tip: Replace the WhatsApp number inside the code with your number in international format (no +).\r\n <\/footer>\r\n <\/div>\r\n\r\n<script>\r\n\/* ---------------- CONFIG ---------------- *\/\r\nconst PHONE_NUMBER = 'REPLACE_WITH_YOUR_PHONE'; \/\/ <- change this to your WhatsApp number (no +)\r\nconst CURRENCY = 'NGN';\r\nconst WP_REST = { enabled: false, url: '' }; \/\/ set enabled true and url to your WP endpoint if desired\r\n\/* ---------------------------------------- *\/\r\n\r\n\/* Demo products: 40 items (used if localStorage empty or REST disabled) *\/\r\nconst demoProducts = Array.from({length:40}, (_,i) => ({\r\n id: 'p'+(i+1),\r\n title: `Product ${i+1}`,\r\n price: Math.round((i+1)*450 + Math.random()*250),\r\n image: `https:\/\/picsum.photos\/seed\/prod${i+1}\/600\/400`,\r\n description: `Short description for product ${i+1}.`\r\n}));\r\n\r\n\/* Local storage keys *\/\r\nconst LS_PRODUCTS = 'wa_shop_products_v1';\r\nconst LS_CART = 'wa_shop_cart_v1';\r\n\r\n\/* Helpers *\/\r\nconst $ = (sel, ctx=document) => ctx.querySelector(sel);\r\nconst $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));\r\nfunction formatPrice(n){ return Number(n).toLocaleString(); }\r\n\r\n\/* Product storage\/load *\/\r\nfunction getProducts(){\r\n const raw = localStorage.getItem(LS_PRODUCTS);\r\n if(raw){ try { return JSON.parse(raw); } catch(e){ localStorage.removeItem(LS_PRODUCTS); } }\r\n localStorage.setItem(LS_PRODUCTS, JSON.stringify(demoProducts));\r\n return demoProducts;\r\n}\r\nfunction saveProducts(arr){ localStorage.setItem(LS_PRODUCTS, JSON.stringify(arr)); }\r\n\r\n\/* Cart storage *\/\r\nfunction getCart(){ return JSON.parse(localStorage.getItem(LS_CART) || '[]'); }\r\nfunction saveCart(cart){ localStorage.setItem(LS_CART, JSON.stringify(cart)); updateCartUI(); }\r\n\r\n\/* Render product grid *\/\r\nfunction renderProducts(){\r\n const grid = $('#productGrid');\r\n grid.innerHTML = '';\r\n const products = getProducts();\r\n products.forEach(p=>{\r\n const div = document.createElement('div');\r\n div.className = 'card';\r\n div.innerHTML = `\r\n <img decoding=\"async\" class=\"thumb\" src=\"${escapeHtml(p.image||'')}\" alt=\"${escapeHtml(p.title)}\" onerror=\"this.src='https:\/\/via.placeholder.com\/400x300?text=No+Image'\"\/>\r\n <div class=\"meta\">\r\n <div class=\"title\">${escapeHtml(p.title)}<\/div>\r\n <div class=\"price\">${CURRENCY} ${formatPrice(p.price||0)}<\/div>\r\n <\/div>\r\n <div class=\"desc\">${escapeHtml(p.description||'')}<\/div>\r\n <div class=\"product-actions\">\r\n <input type=\"number\" min=\"1\" value=\"1\" id=\"qty_${p.id}\" \/>\r\n <button class=\"btn addBtn\" data-id=\"${p.id}\">Add<\/button>\r\n <button class=\"btn ghost buyBtn\" data-id=\"${p.id}\">Buy<\/button>\r\n <\/div>\r\n `;\r\n grid.appendChild(div);\r\n });\r\n}\r\n\r\n\/* Cart UI *\/\r\nfunction updateCartUI(){\r\n const cart = getCart();\r\n const count = cart.reduce((s,i)=>s+i.qty,0);\r\n $('#cartCount').textContent = count;\r\n const list = $('#cartList');\r\n list.innerHTML = '';\r\n const products = getProducts();\r\n let total = 0;\r\n cart.forEach(item=>{\r\n const p = products.find(x=>x.id===item.id) || {title:'Unknown',price:0,image:''};\r\n total += (p.price||0) * item.qty;\r\n const el = document.createElement('div');\r\n el.className = 'cart-item';\r\n el.innerHTML = `\r\n <img decoding=\"async\" src=\"${escapeHtml(p.image||'')}\" onerror=\"this.src='https:\/\/via.placeholder.com\/72x72?text=No+Img'\"\/>\r\n <div style=\"flex:1\">\r\n <div style=\"font-weight:600\">${escapeHtml(p.title)}<\/div>\r\n <div class=\"small\">${CURRENCY} ${formatPrice(p.price)} \u00d7 ${item.qty}<\/div>\r\n <div style=\"margin-top:6px;display:flex;gap:6px\">\r\n <button class=\"btn ghost decr\" data-id=\"${item.id}\">-<\/button>\r\n <button class=\"btn ghost incr\" data-id=\"${item.id}\">+<\/button>\r\n <button class=\"btn ghost rem\" data-id=\"${item.id}\">Remove<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n list.appendChild(el);\r\n });\r\n $('#cartTotal').textContent = `${CURRENCY} ${formatPrice(total)}`;\r\n \/\/ attach handlers\r\n $$('.incr').forEach(b=>b.onclick = ()=>changeQty(b.dataset.id,1));\r\n $$('.decr').forEach(b=>b.onclick = ()=>changeQty(b.dataset.id,-1));\r\n $$('.rem').forEach(b=>b.onclick = ()=>removeFromCart(b.dataset.id));\r\n}\r\n\r\n\/* Cart operations *\/\r\nfunction changeQty(id,delta){\r\n const cart = getCart();\r\n const idx = cart.findIndex(i=>i.id===id);\r\n if(idx===-1) return;\r\n cart[idx].qty += delta;\r\n if(cart[idx].qty <= 0) cart.splice(idx,1);\r\n saveCart(cart);\r\n}\r\nfunction addToCart(id,qty=1){\r\n const cart = getCart();\r\n const idx = cart.findIndex(i=>i.id===id);\r\n if(idx>-1) cart[idx].qty += qty; else cart.push({id,qty});\r\n saveCart(cart);\r\n toast('Added to cart');\r\n}\r\nfunction removeFromCart(id){\r\n const cart = getCart().filter(i=>i.id!==id);\r\n saveCart(cart);\r\n}\r\nfunction clearCart(){ localStorage.removeItem(LS_CART); updateCartUI(); toast('Cart cleared'); }\r\n\r\n\/* Checkout via WhatsApp *\/\r\nfunction checkoutViaWhatsApp(){\r\n if (PHONE_NUMBER === 'REPLACE_WITH_YOUR_PHONE'){ alert('Please set your WhatsApp phone number in the code.'); return; }\r\n const cart = getCart();\r\n if(cart.length === 0) { alert('Your cart is empty'); return; }\r\n const products = getProducts();\r\n let message = '*Order from WhatsApp Shop*%0A';\r\n let total = 0;\r\n cart.forEach((item, i) => {\r\n const p = products.find(x=>x.id===item.id) || {title:'Unknown',price:0};\r\n const line = `${i+1}. ${p.title} x${item.qty} - ${CURRENCY} ${formatPrice((p.price||0)*item.qty)}`;\r\n message += line + '%0A';\r\n total += (p.price||0)*item.qty;\r\n });\r\n message += `%0A*Total:* ${CURRENCY} ${formatPrice(total)}%0A`;\r\n message += '%0A*Customer Name:*%0A*Shipping Address:*%0A';\r\n const wa = `https:\/\/wa.me\/${PHONE_NUMBER}?text=${message}`;\r\n window.open(wa,'_blank');\r\n}\r\n\r\n\/* CSV parse and import *\/\r\nfunction parseCSV(text){\r\n const lines = text.split(\/\\r?\\n\/).filter(Boolean);\r\n if(lines.length < 2) return [];\r\n const header = lines[0].split(',').map(h=>h.trim());\r\n const rows = lines.slice(1).map(line=>{\r\n \/\/ naive CSV split: good for simple CSVs (no quoted commas)\r\n const cols = line.split(',').map(c=>c.trim());\r\n const obj = {};\r\n header.forEach((h,i)=>obj[h] = cols[i] || '');\r\n return obj;\r\n });\r\n return rows;\r\n}\r\n\r\n\/* Toast *\/\r\nfunction toast(msg){\r\n const t = document.createElement('div');\r\n t.textContent = msg;\r\n t.style.cssText = 'position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#111;color:#fff;padding:8px 12px;border-radius:8px;z-index:2000';\r\n document.body.appendChild(t);\r\n setTimeout(()=>t.remove(),1600);\r\n}\r\n\r\n\/* Simple escape to avoid injecting HTML from product data *\/\r\nfunction escapeHtml(str=''){ return String(str).replace(\/[&<>\"']\/g, s=>({ '&':'&','<':'<','>':'>','\"':'"',\"'\":''' }[s])); }\r\n\r\n\/* Attach events and initialize *\/\r\ndocument.addEventListener('click', (e) => {\r\n if(e.target.matches('.addBtn')) {\r\n const id = e.target.dataset.id;\r\n const qty = Number($('#qty_'+id).value) || 1;\r\n addToCart(id, qty);\r\n }\r\n if(e.target.matches('.buyBtn')) {\r\n const id = e.target.dataset.id;\r\n const qty = Number($('#qty_'+id).value) || 1;\r\n addToCart(id, qty);\r\n checkoutViaWhatsApp();\r\n }\r\n});\r\n\r\n\/* Drawer & controls *\/\r\n$('#cartBtn').addEventListener('click', ()=> $('#cartDrawer').classList.toggle('open'));\r\n$('#clearCartBtn').addEventListener('click', clearCart);\r\n$('#checkoutBtn').addEventListener('click', checkoutViaWhatsApp);\r\n$('#openAdminBtn').addEventListener('click', ()=> {\r\n const panel = $('#adminPanel');\r\n panel.style.display = panel.style.display === 'none' ? 'block' : 'none';\r\n});\r\n$('#resetDemoBtn').addEventListener('click', ()=> { localStorage.removeItem(LS_PRODUCTS); localStorage.removeItem(LS_CART); renderProducts(); updateCartUI(); toast('Demo reset'); });\r\n\r\n\/* Product form *\/\r\n$('#productForm').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const arr = getProducts();\r\n const id = 'p' + Date.now();\r\n const obj = {\r\n id,\r\n title: $('#p_title').value || 'Untitled',\r\n price: Number($('#p_price').value) || 0,\r\n image: $('#p_image').value || '',\r\n description: $('#p_desc').value || ''\r\n };\r\n arr.unshift(obj);\r\n saveProducts(arr);\r\n renderProducts();\r\n $('#productForm').reset();\r\n toast('Product added (local demo)');\r\n});\r\n\r\n\/* CSV import *\/\r\n$('#importCsvBtn').addEventListener('click', ()=> $('#csvFile').click());\r\n$('#csvFile').addEventListener('change', (e) => {\r\n const f = e.target.files[0]; if(!f) return;\r\n const reader = new FileReader();\r\n reader.onload = (ev) => {\r\n const rows = parseCSV(ev.target.result);\r\n const arr = getProducts();\r\n rows.forEach(r => {\r\n const obj = {\r\n id: r.id || 'p' + Date.now() + Math.random().toString(36).slice(2,6),\r\n title: r.title || r.name || 'Imported',\r\n price: Number(r.price) || 0,\r\n image: r.image || '',\r\n description: r.description || ''\r\n };\r\n arr.unshift(obj);\r\n });\r\n saveProducts(arr);\r\n renderProducts();\r\n toast('CSV imported');\r\n };\r\n reader.readAsText(f);\r\n});\r\n\r\n\/* WP REST integration (optional)\r\n Example: if your WP overrides products, enable and set WP_REST.url.\r\n This code expects a JSON array of product objects with keys:\r\n id, title, price, image, description\r\n You can customize mapping inside loadFromWP().\r\n*\/\r\n$('#enableWpBtn').addEventListener('click', async ()=> {\r\n const url = $('#wpUrl').value.trim();\r\n if(!url) return alert('Enter WP REST endpoint URL first');\r\n WP_REST.enabled = true; WP_REST.url = url;\r\n await loadFromWP();\r\n});\r\n$('#disableWpBtn').addEventListener('click', ()=> {\r\n WP_REST.enabled = false; WP_REST.url = '';\r\n localStorage.removeItem(LS_PRODUCTS); renderProducts(); updateCartUI(); toast('WP REST disabled \u2014 reverted to demo\/local products');\r\n});\r\n\r\nasync function loadFromWP(){\r\n if(!WP_REST.enabled || !WP_REST.url) return;\r\n try{\r\n const res = await fetch(WP_REST.url);\r\n if(!res.ok) throw new Error('Failed to fetch');\r\n const data = await res.json();\r\n \/\/ Map fetched WP objects to local format. Adjust mapping depending on your WP output.\r\n const mapped = data.map(item => ({\r\n id: item.id ? String(item.id) : (item.slug || item.title?.rendered || Math.random().toString(36).slice(2,8)),\r\n title: item.title?.rendered || item.title || 'Untitled',\r\n price: item.meta?.price || (item.price || 0),\r\n image: (item._embedded?.['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]?.source_url) || item.featured_image || '',\r\n description: (item.excerpt?.rendered || item.description || '').replace(\/<[^>]+>\/g,'') \/\/ strip tags\r\n }));\r\n saveProducts(mapped);\r\n renderProducts();\r\n updateCartUI();\r\n toast('Loaded products from WP REST');\r\n }catch(err){\r\n console.error(err);\r\n alert('Unable to load from WP REST. Check the URL and CORS \/ auth settings.');\r\n }\r\n}\r\n\r\n\/* init *\/\r\n(function init(){\r\n \/\/ If WP_REST.enabled true at top and url set, attempt load\r\n if(WP_REST.enabled && WP_REST.url) loadFromWP();\r\n renderProducts();\r\n updateCartUI();\r\n})();\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\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>WhatsApp Shop \u2014 Paste-ready WhatsApp Shop \u2014 Paste-ready Admin Reset demo \ud83d\uded2 0 \u2022 View cart Your Cart Total: NGN 0 Checkout via WhatsApp Clear Admin \u2014 Add product \/ CSV import Save product Import CSV CSV headers: id,title,price,image,description,sku,stock WP REST integration (optional) Enable WP REST to load products from your WordPress backend automatically. Endpoint: […]<\/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-1511","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":0,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages\/1511\/revisions"}],"wp:attachment":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/media?parent=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nWhatsApp Shop \u2014 Paste-ready<\/title>\r\n<style>\r\n :root{\r\n --bg:#f6f9fb; --card:#ffffff; --muted:#6b7280; --accent:#06b6d4;\r\n --accent-2:#0891b2; --radius:12px; --max:1100px; --shadow:0 8px 30px rgba(2,6,23,0.08);\r\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n }\r\n *{box-sizing:border-box}\r\n body{margin:0;background:var(--bg);color:#0f172a; -webkit-font-smoothing:antialiased}\r\n .wrap{max-width:var(--max);margin:28px auto;padding:20px}\r\n header{display:flex;align-items:center;justify-content:space-between;gap:12px}\r\n header h1{margin:0;font-size:20px}\r\n .controls{display:flex;gap:10px;align-items:center}\r\n .btn{background:var(--accent);border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}\r\n .btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(6,182,212,0.18)}\r\n .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}\r\n .card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:280px}\r\n .thumb{width:100%;height:160px;border-radius:10px;object-fit:cover;background:#efefef}\r\n .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\r\n .title{font-weight:600;font-size:15px}\r\n .price{font-weight:700}\r\n .desc{color:var(--muted);font-size:13px;margin-top:8px;flex:1}\r\n .product-actions{display:flex;gap:8px;margin-top:12px;align-items:center}\r\n .product-actions input[type=\"number\"]{width:68px;padding:6px;border-radius:8px;border:1px solid #e6eef0}\r\n .floating-cart{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;padding:12px;border-radius:999px;box-shadow:0 10px 30px rgba(2,6,23,0.12);display:flex;gap:10px;align-items:center;cursor:pointer;z-index:1200}\r\n .drawer{position:fixed;right:0;top:0;height:100vh;width:380px;background:var(--card);box-shadow:-20px 0 60px rgba(2,6,23,0.12);transform:translateX(110%);transition:transform .28s ease;padding:18px;overflow:auto;z-index:1199}\r\n .drawer.open{transform:translateX(0)}\r\n .cart-item{display:flex;gap:10px;margin-bottom:12px}\r\n .cart-item img{width:72px;height:72px;object-fit:cover;border-radius:8px}\r\n .muted{color:var(--muted);font-size:13px}\r\n .admin{margin-top:14px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#f8fbfc);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}\r\n input,select,textarea{padding:8px;border-radius:8px;border:1px solid #e6eef0;width:100%}\r\n .small{font-size:13px;color:var(--muted)}\r\n footer{margin-top:22px;color:var(--muted);font-size:13px;text-align:center}\r\n @media (max-width:520px){ .drawer{width:92vw} .thumb{height:120px} }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\" role=\"application\">\r\n <header>\r\n <h1>WhatsApp Shop \u2014 Paste-ready<\/h1>\r\n <div class=\"controls\">\r\n <button class=\"btn\" id=\"openAdminBtn\">Admin<\/button>\r\n <button class=\"btn ghost\" id=\"resetDemoBtn\">Reset demo<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"storeArea\">\r\n <div id=\"productGrid\" class=\"grid\" aria-live=\"polite\"><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"floating-cart\" id=\"cartBtn\" title=\"Open cart\">\r\n \ud83d\uded2 <span id=\"cartCount\">0<\/span> \u2022 View cart\r\n <\/div>\r\n\r\n \r\n <aside class=\"drawer\" id=\"cartDrawer\" aria-hidden=\"true\">\r\n <h3>Your Cart<\/h3>\r\n <div id=\"cartList\"><\/div>\r\n <div class=\"small\" style=\"margin-top:10px\">Total: <strong id=\"cartTotal\">NGN 0<\/strong><\/div>\r\n <div style=\"display:flex;gap:8px;margin-top:12px\">\r\n <button class=\"btn\" id=\"checkoutBtn\">Checkout via WhatsApp<\/button>\r\n <button class=\"btn ghost\" id=\"clearCartBtn\">Clear<\/button>\r\n <\/div>\r\n\r\n <hr style=\"margin:14px 0\">\r\n\r\n <div class=\"admin\" id=\"adminPanel\" style=\"display:none\">\r\n <h4>Admin \u2014 Add product \/ CSV import<\/h4>\r\n <form id=\"productForm\">\r\n <input id=\"p_title\" placeholder=\"Title\" required style=\"margin-bottom:8px\"\/><br>\r\n <input id=\"p_price\" placeholder=\"Price (e.g. 3500)\" required style=\"margin-bottom:8px\"\/><br>\r\n <input id=\"p_image\" placeholder=\"Image URL\" style=\"margin-bottom:8px\"\/><br>\r\n <textarea id=\"p_desc\" placeholder=\"Short description\" rows=\"2\" style=\"margin-bottom:8px\"><\/textarea><br>\r\n <div style=\"display:flex;gap:8px\">\r\n <button class=\"btn\" type=\"submit\">Save product<\/button>\r\n <button type=\"button\" class=\"btn ghost\" id=\"importCsvBtn\">Import CSV<\/button>\r\n <\/div>\r\n <\/form>\r\n <input type=\"file\" id=\"csvFile\" accept=\".csv\" style=\"display:none;margin-top:10px\"\/>\r\n <p class=\"small\">CSV headers: id,title,price,image,description,sku,stock<\/p>\r\n\r\n <hr style=\"margin:14px 0\">\r\n <h4>WP REST integration (optional)<\/h4>\r\n <p class=\"small\">Enable WP REST to load products from your WordPress backend automatically.<\/p>\r\n <label class=\"small\">Endpoint: <input id=\"wpUrl\" placeholder=\"https:\/\/example.com\/wp-json\/wp\/v2\/products\" \/><\/label>\r\n <div style=\"display:flex;gap:8px;margin-top:8px\">\r\n <button class=\"btn\" id=\"enableWpBtn\">Load from WP REST<\/button>\r\n <button class=\"btn ghost\" id=\"disableWpBtn\">Disable WP REST<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n <footer>\r\n Tip: Replace the WhatsApp number inside the code with your number in international format (no +).\r\n <\/footer>\r\n <\/div>\r\n\r\n<script>\r\n\/* ---------------- CONFIG ---------------- *\/\r\nconst PHONE_NUMBER = 'REPLACE_WITH_YOUR_PHONE'; \/\/ <- change this to your WhatsApp number (no +)\r\nconst CURRENCY = 'NGN';\r\nconst WP_REST = { enabled: false, url: '' }; \/\/ set enabled true and url to your WP endpoint if desired\r\n\/* ---------------------------------------- *\/\r\n\r\n\/* Demo products: 40 items (used if localStorage empty or REST disabled) *\/\r\nconst demoProducts = Array.from({length:40}, (_,i) => ({\r\n id: 'p'+(i+1),\r\n title: `Product ${i+1}`,\r\n price: Math.round((i+1)*450 + Math.random()*250),\r\n image: `https:\/\/picsum.photos\/seed\/prod${i+1}\/600\/400`,\r\n description: `Short description for product ${i+1}.`\r\n}));\r\n\r\n\/* Local storage keys *\/\r\nconst LS_PRODUCTS = 'wa_shop_products_v1';\r\nconst LS_CART = 'wa_shop_cart_v1';\r\n\r\n\/* Helpers *\/\r\nconst $ = (sel, ctx=document) => ctx.querySelector(sel);\r\nconst $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));\r\nfunction formatPrice(n){ return Number(n).toLocaleString(); }\r\n\r\n\/* Product storage\/load *\/\r\nfunction getProducts(){\r\n const raw = localStorage.getItem(LS_PRODUCTS);\r\n if(raw){ try { return JSON.parse(raw); } catch(e){ localStorage.removeItem(LS_PRODUCTS); } }\r\n localStorage.setItem(LS_PRODUCTS, JSON.stringify(demoProducts));\r\n return demoProducts;\r\n}\r\nfunction saveProducts(arr){ localStorage.setItem(LS_PRODUCTS, JSON.stringify(arr)); }\r\n\r\n\/* Cart storage *\/\r\nfunction getCart(){ return JSON.parse(localStorage.getItem(LS_CART) || '[]'); }\r\nfunction saveCart(cart){ localStorage.setItem(LS_CART, JSON.stringify(cart)); updateCartUI(); }\r\n\r\n\/* Render product grid *\/\r\nfunction renderProducts(){\r\n const grid = $('#productGrid');\r\n grid.innerHTML = '';\r\n const products = getProducts();\r\n products.forEach(p=>{\r\n const div = document.createElement('div');\r\n div.className = 'card';\r\n div.innerHTML = `\r\n <img decoding=\"async\" class=\"thumb\" src=\"${escapeHtml(p.image||'')}\" alt=\"${escapeHtml(p.title)}\" onerror=\"this.src='https:\/\/via.placeholder.com\/400x300?text=No+Image'\"\/>\r\n <div class=\"meta\">\r\n <div class=\"title\">${escapeHtml(p.title)}<\/div>\r\n <div class=\"price\">${CURRENCY} ${formatPrice(p.price||0)}<\/div>\r\n <\/div>\r\n <div class=\"desc\">${escapeHtml(p.description||'')}<\/div>\r\n <div class=\"product-actions\">\r\n <input type=\"number\" min=\"1\" value=\"1\" id=\"qty_${p.id}\" \/>\r\n <button class=\"btn addBtn\" data-id=\"${p.id}\">Add<\/button>\r\n <button class=\"btn ghost buyBtn\" data-id=\"${p.id}\">Buy<\/button>\r\n <\/div>\r\n `;\r\n grid.appendChild(div);\r\n });\r\n}\r\n\r\n\/* Cart UI *\/\r\nfunction updateCartUI(){\r\n const cart = getCart();\r\n const count = cart.reduce((s,i)=>s+i.qty,0);\r\n $('#cartCount').textContent = count;\r\n const list = $('#cartList');\r\n list.innerHTML = '';\r\n const products = getProducts();\r\n let total = 0;\r\n cart.forEach(item=>{\r\n const p = products.find(x=>x.id===item.id) || {title:'Unknown',price:0,image:''};\r\n total += (p.price||0) * item.qty;\r\n const el = document.createElement('div');\r\n el.className = 'cart-item';\r\n el.innerHTML = `\r\n <img decoding=\"async\" src=\"${escapeHtml(p.image||'')}\" onerror=\"this.src='https:\/\/via.placeholder.com\/72x72?text=No+Img'\"\/>\r\n <div style=\"flex:1\">\r\n <div style=\"font-weight:600\">${escapeHtml(p.title)}<\/div>\r\n <div class=\"small\">${CURRENCY} ${formatPrice(p.price)} \u00d7 ${item.qty}<\/div>\r\n <div style=\"margin-top:6px;display:flex;gap:6px\">\r\n <button class=\"btn ghost decr\" data-id=\"${item.id}\">-<\/button>\r\n <button class=\"btn ghost incr\" data-id=\"${item.id}\">+<\/button>\r\n <button class=\"btn ghost rem\" data-id=\"${item.id}\">Remove<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n list.appendChild(el);\r\n });\r\n $('#cartTotal').textContent = `${CURRENCY} ${formatPrice(total)}`;\r\n \/\/ attach handlers\r\n $$('.incr').forEach(b=>b.onclick = ()=>changeQty(b.dataset.id,1));\r\n $$('.decr').forEach(b=>b.onclick = ()=>changeQty(b.dataset.id,-1));\r\n $$('.rem').forEach(b=>b.onclick = ()=>removeFromCart(b.dataset.id));\r\n}\r\n\r\n\/* Cart operations *\/\r\nfunction changeQty(id,delta){\r\n const cart = getCart();\r\n const idx = cart.findIndex(i=>i.id===id);\r\n if(idx===-1) return;\r\n cart[idx].qty += delta;\r\n if(cart[idx].qty <= 0) cart.splice(idx,1);\r\n saveCart(cart);\r\n}\r\nfunction addToCart(id,qty=1){\r\n const cart = getCart();\r\n const idx = cart.findIndex(i=>i.id===id);\r\n if(idx>-1) cart[idx].qty += qty; else cart.push({id,qty});\r\n saveCart(cart);\r\n toast('Added to cart');\r\n}\r\nfunction removeFromCart(id){\r\n const cart = getCart().filter(i=>i.id!==id);\r\n saveCart(cart);\r\n}\r\nfunction clearCart(){ localStorage.removeItem(LS_CART); updateCartUI(); toast('Cart cleared'); }\r\n\r\n\/* Checkout via WhatsApp *\/\r\nfunction checkoutViaWhatsApp(){\r\n if (PHONE_NUMBER === 'REPLACE_WITH_YOUR_PHONE'){ alert('Please set your WhatsApp phone number in the code.'); return; }\r\n const cart = getCart();\r\n if(cart.length === 0) { alert('Your cart is empty'); return; }\r\n const products = getProducts();\r\n let message = '*Order from WhatsApp Shop*%0A';\r\n let total = 0;\r\n cart.forEach((item, i) => {\r\n const p = products.find(x=>x.id===item.id) || {title:'Unknown',price:0};\r\n const line = `${i+1}. ${p.title} x${item.qty} - ${CURRENCY} ${formatPrice((p.price||0)*item.qty)}`;\r\n message += line + '%0A';\r\n total += (p.price||0)*item.qty;\r\n });\r\n message += `%0A*Total:* ${CURRENCY} ${formatPrice(total)}%0A`;\r\n message += '%0A*Customer Name:*%0A*Shipping Address:*%0A';\r\n const wa = `https:\/\/wa.me\/${PHONE_NUMBER}?text=${message}`;\r\n window.open(wa,'_blank');\r\n}\r\n\r\n\/* CSV parse and import *\/\r\nfunction parseCSV(text){\r\n const lines = text.split(\/\\r?\\n\/).filter(Boolean);\r\n if(lines.length < 2) return [];\r\n const header = lines[0].split(',').map(h=>h.trim());\r\n const rows = lines.slice(1).map(line=>{\r\n \/\/ naive CSV split: good for simple CSVs (no quoted commas)\r\n const cols = line.split(',').map(c=>c.trim());\r\n const obj = {};\r\n header.forEach((h,i)=>obj[h] = cols[i] || '');\r\n return obj;\r\n });\r\n return rows;\r\n}\r\n\r\n\/* Toast *\/\r\nfunction toast(msg){\r\n const t = document.createElement('div');\r\n t.textContent = msg;\r\n t.style.cssText = 'position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#111;color:#fff;padding:8px 12px;border-radius:8px;z-index:2000';\r\n document.body.appendChild(t);\r\n setTimeout(()=>t.remove(),1600);\r\n}\r\n\r\n\/* Simple escape to avoid injecting HTML from product data *\/\r\nfunction escapeHtml(str=''){ return String(str).replace(\/[&<>\"']\/g, s=>({ '&':'&','<':'<','>':'>','\"':'"',\"'\":''' }[s])); }\r\n\r\n\/* Attach events and initialize *\/\r\ndocument.addEventListener('click', (e) => {\r\n if(e.target.matches('.addBtn')) {\r\n const id = e.target.dataset.id;\r\n const qty = Number($('#qty_'+id).value) || 1;\r\n addToCart(id, qty);\r\n }\r\n if(e.target.matches('.buyBtn')) {\r\n const id = e.target.dataset.id;\r\n const qty = Number($('#qty_'+id).value) || 1;\r\n addToCart(id, qty);\r\n checkoutViaWhatsApp();\r\n }\r\n});\r\n\r\n\/* Drawer & controls *\/\r\n$('#cartBtn').addEventListener('click', ()=> $('#cartDrawer').classList.toggle('open'));\r\n$('#clearCartBtn').addEventListener('click', clearCart);\r\n$('#checkoutBtn').addEventListener('click', checkoutViaWhatsApp);\r\n$('#openAdminBtn').addEventListener('click', ()=> {\r\n const panel = $('#adminPanel');\r\n panel.style.display = panel.style.display === 'none' ? 'block' : 'none';\r\n});\r\n$('#resetDemoBtn').addEventListener('click', ()=> { localStorage.removeItem(LS_PRODUCTS); localStorage.removeItem(LS_CART); renderProducts(); updateCartUI(); toast('Demo reset'); });\r\n\r\n\/* Product form *\/\r\n$('#productForm').addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const arr = getProducts();\r\n const id = 'p' + Date.now();\r\n const obj = {\r\n id,\r\n title: $('#p_title').value || 'Untitled',\r\n price: Number($('#p_price').value) || 0,\r\n image: $('#p_image').value || '',\r\n description: $('#p_desc').value || ''\r\n };\r\n arr.unshift(obj);\r\n saveProducts(arr);\r\n renderProducts();\r\n $('#productForm').reset();\r\n toast('Product added (local demo)');\r\n});\r\n\r\n\/* CSV import *\/\r\n$('#importCsvBtn').addEventListener('click', ()=> $('#csvFile').click());\r\n$('#csvFile').addEventListener('change', (e) => {\r\n const f = e.target.files[0]; if(!f) return;\r\n const reader = new FileReader();\r\n reader.onload = (ev) => {\r\n const rows = parseCSV(ev.target.result);\r\n const arr = getProducts();\r\n rows.forEach(r => {\r\n const obj = {\r\n id: r.id || 'p' + Date.now() + Math.random().toString(36).slice(2,6),\r\n title: r.title || r.name || 'Imported',\r\n price: Number(r.price) || 0,\r\n image: r.image || '',\r\n description: r.description || ''\r\n };\r\n arr.unshift(obj);\r\n });\r\n saveProducts(arr);\r\n renderProducts();\r\n toast('CSV imported');\r\n };\r\n reader.readAsText(f);\r\n});\r\n\r\n\/* WP REST integration (optional)\r\n Example: if your WP overrides products, enable and set WP_REST.url.\r\n This code expects a JSON array of product objects with keys:\r\n id, title, price, image, description\r\n You can customize mapping inside loadFromWP().\r\n*\/\r\n$('#enableWpBtn').addEventListener('click', async ()=> {\r\n const url = $('#wpUrl').value.trim();\r\n if(!url) return alert('Enter WP REST endpoint URL first');\r\n WP_REST.enabled = true; WP_REST.url = url;\r\n await loadFromWP();\r\n});\r\n$('#disableWpBtn').addEventListener('click', ()=> {\r\n WP_REST.enabled = false; WP_REST.url = '';\r\n localStorage.removeItem(LS_PRODUCTS); renderProducts(); updateCartUI(); toast('WP REST disabled \u2014 reverted to demo\/local products');\r\n});\r\n\r\nasync function loadFromWP(){\r\n if(!WP_REST.enabled || !WP_REST.url) return;\r\n try{\r\n const res = await fetch(WP_REST.url);\r\n if(!res.ok) throw new Error('Failed to fetch');\r\n const data = await res.json();\r\n \/\/ Map fetched WP objects to local format. Adjust mapping depending on your WP output.\r\n const mapped = data.map(item => ({\r\n id: item.id ? String(item.id) : (item.slug || item.title?.rendered || Math.random().toString(36).slice(2,8)),\r\n title: item.title?.rendered || item.title || 'Untitled',\r\n price: item.meta?.price || (item.price || 0),\r\n image: (item._embedded?.['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]?.source_url) || item.featured_image || '',\r\n description: (item.excerpt?.rendered || item.description || '').replace(\/<[^>]+>\/g,'') \/\/ strip tags\r\n }));\r\n saveProducts(mapped);\r\n renderProducts();\r\n updateCartUI();\r\n toast('Loaded products from WP REST');\r\n }catch(err){\r\n console.error(err);\r\n alert('Unable to load from WP REST. Check the URL and CORS \/ auth settings.');\r\n }\r\n}\r\n\r\n\/* init *\/\r\n(function init(){\r\n \/\/ If WP_REST.enabled true at top and url set, attempt load\r\n if(WP_REST.enabled && WP_REST.url) loadFromWP();\r\n renderProducts();\r\n updateCartUI();\r\n})();\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\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>WhatsApp Shop \u2014 Paste-ready WhatsApp Shop \u2014 Paste-ready Admin Reset demo \ud83d\uded2 0 \u2022 View cart Your Cart Total: NGN 0 Checkout via WhatsApp Clear Admin \u2014 Add product \/ CSV import Save product Import CSV CSV headers: id,title,price,image,description,sku,stock WP REST integration (optional) Enable WP REST to load products from your WordPress backend automatically. Endpoint: […]<\/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-1511","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":0,"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/pages\/1511\/revisions"}],"wp:attachment":[{"href":"https:\/\/copyhubstore.xyz\/wp-json\/wp\/v2\/media?parent=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}