# Hub de Autogestión WooCommerce (`hub-woo.html`) — Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build a single-file, self-contained HTML deliverable (`hub-woo.html`) that lets a non-tech-savvy WooCommerce store owner self-manage their store, with bilingual ES/EN content, interactive checklists, search, progress/achievements, and agency-friendly share links. **Architecture:** One self-contained HTML file with three ` ``` - [ ] **Step 2: Sanity check the scaffold** Run: ``` Get-Content "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" | Select-String -Pattern 'id="hub-config"','id="hub-data"','id="hub-engine"','data-theme="dark"' ``` Expected: 4 matches. The page will render an empty shell (sidebar/main empty) — that's fine until engine is added. - [ ] **Step 3: Commit** ```bash git add hub-woo.html git commit -m "feat: add tutorial data for pagos, clientes, reportes, correos, avanzados" ``` --- ### Task 7: DATA — MOCKUPS (SVG del panel) y ZONAS **Files:** - Modify: `hub-woo.html` — inside `` with the core engine (state, persistence wrapper, i18n, theme, escaping, router). Later tasks append functions inside the same IIFE before the `init()` call. ```html ``` - [ ] **Step 2: Verify no syntax errors yet** Run: ``` node --check "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" 2>&1 | Out-Null ``` (Expected: this will fail because hub-woo.html is HTML, not JS. Instead extract the engine and check it.) Instead run the real check (extract script content and syntax-check with Node): ```powershell $html = Get-Content -Raw "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" $m = [regex]::Match($html, '', 'Singleline') Set-Content -Path "$env:TEMP\engine.js" -Value $m.Groups[1].Value node --check "$env:TEMP\engine.js" ``` Expected: no output (no syntax errors). NOTE: `node --check` succeeds only if the snippet parses; the IIFE references undefined functions (renderAll etc.) but that's runtime, not syntax — OK. - [ ] **Step 3: Commit** ```bash git add hub-woo.html git commit -m "feat: add engine core (state, i18n, theme, router)" ``` --- ### Task 9: ENGINE — renderizador de mockups SVG **Files:** - Modify: `hub-woo.html` — inside ` ``` - [ ] **Step 2: Verify the engine is complete and references resolve** Run: ``` $html = Get-Content -Raw "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" $m = [regex]::Match($html, '', 'Singleline') Set-Content -Path "$env:TEMP\engine.js" -Value $m.Groups[1].Value node --check "$env:TEMP\engine.js" ``` Expected: no output. Then confirm every function referenced in engine exists: ``` Select-String -Path "$env:TEMP\engine.js" -Pattern 'function (init|renderAll|bindSearch|bindChecklist|renderChecklist|bindVideo|renderFaq|renderGlosario|renderSidebar|renderHome|renderSection|renderTutorial|renderLogros|applyLang|bindToggles|bindFab|bindTop)' ``` Expected: 16 matches. - [ ] **Step 3: Open the file in a browser and smoke-test** Open `hub-woo.html` in Chrome (double-click). Expected: - Dark theme, "coordenadas.co · Guía de tu Tienda" in the header - Sidebar shows progress bar (0%) + sections - Home shows hero search + "Empieza aquí" card + section cards + achievements row - Click "Productos y catálogo" → section page with tutorial list - Click "Agregar un producto nuevo" → tutorial page with steps, mockups (SVG), checklist, WhatsApp help box - Video block renders a YouTube iframe (may be slow offline; fallback visible only if error) If anything is broken, fix before committing. - [ ] **Step 4: Commit** ```bash git add hub-woo.html git commit -m "feat: add search, checklists, video, FAQ, glossary, toggles, init" ``` --- ### Task 12: Validation script (`validate-hub.js`) **Files:** - Create: `C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\validate-hub.js` - [ ] **Step 1: Create the validation script** ```js // validate-hub.js // Verifica la integridad de los datos del hub sin abrir un navegador. // Uso: node validate-hub.js [ruta-al-hub-woo.html] const fs = require("fs"); const path = require("path"); const htmlPath = process.argv[2] || path.join(__dirname, "hub-woo.html"); const html = fs.readFileSync(htmlPath, "utf8"); function grab(id) { const m = html.match(new RegExp(`` with: ```html ``` - [ ] **Step 2: Verify** Run: ``` Select-String -Path "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" -Pattern '"crear-producto":\s*"6OJSAn6A5mA"' ``` Expected: 1 match. - [ ] **Step 3: Commit** ```bash git add hub-woo.html git commit -m "feat: add CONFIG block with client data and video catalog" ``` --- ### Task 3: DATA — secciones, logros, glosario, faq, I18N **Files:** - Modify: `hub-woo.html` — insert into `` with: ```html ``` Note: `tutoriales`, `MOCKUPS`, and `ZONAS` are added to this same `DATA` object in Tasks 4–6 by inserting them before the closing `};`. The closing of the object stays after `I18N`; each later task inserts its keys just before the final `};`. - [ ] **Step 2: Verify** Run: ``` Select-String -Path "C:\Users\User\Documents\opencode_apps\marketing_brains\Coordenadas\hub-woo.html" -Pattern 'logro-primer-producto','"access"','correos-automaticos' | Measure-Object ``` Expected: count >= 3. - [ ] **Step 3: Commit** ```bash git add hub-woo.html git commit -m "feat: add DATA sections, achievements, glossary, FAQ, I18N" ``` --- ### Task 4: DATA — tutoriales de Acceso y Productos **Files:** - Modify: `hub-woo.html` — inside `