Home Productos: Categorías Jerárquicas, Stock Prominente & Sync Completo Extension

Tres mejoras implementadas en el catálogo público productos-dropi.php y en la extensión Chrome dropi-scraper/popup.js: (1) navegación de categorías en dos niveles, (2) ocultar proveedores, (3) stock destacado, y (4) botón "Sync Completo" de un solo click en la extensión.

1

Categorías Jerárquicas en Menú Superior

NUEVO

Antes

Un solo nivel de chips de categoría (flat)
<select> de categorías en el formulario de filtro
No había distinción entre categorías globales y sub-categorías
Sin taxonomía padre/hijo de categorías

Después

Fila de categorías globales (tabs superiores): Todos, Tecnología, Hogar, Moda & Belleza, etc.
Fila de sub-categorías (chips) filtradas dinámicamente por categoría global seleccionada
PHP calcula parent_category por producto con mapa de keywords
URL usa ?parent=X&cat=Y — compatible con deep-links y bookmarks
Eliminado <select> redundante del formulario

Taxonomía de Categorías Padres

Tecnología Hogar Moda & Belleza Salud & Fitness Mascotas Vehículos Kids Otros

// PHP: mapa de keywords para clasificar categorías en padres
$parentCategoryMap = [
    'Tecnología'      => ['tecnologia','gadgets','electrónica',...],
    'Hogar'           => ['hogar','cocina','decoración','oficina',...],
    'Moda & Belleza'  => ['moda','belleza','ropa',...],
    'Salud & Fitness' => ['fitness','salud','bienestar',...],
    ...
];
// Función que asigna parent_category a cada producto
function getProductParentCategory(string $cat, array $map): string { ... }

// URL de categoría global: ?parent=Tecnología
// URL de sub-categoría:    ?parent=Tecnología&cat=Gadgets

8

Categorías globales

N

Sub-cats dinámicas

0

JS para navegación

2

Ocultar Proveedores en el Home

FIX UI

Antes

Badge visible en cada tarjeta: "Fuente: WooCommerce" / "Fuente: Dropi Local"
Exponía la infraestructura técnica al cliente final

Después

Badge de fuente eliminado de las tarjetas públicas
Dato de proveedor sigue disponible en el modal de detalle (data-supplier) para uso interno
Vista limpia B2C sin exponer detalles técnicos

3

Stock Prominente en Tarjetas

MEJORADO

Antes

Badge siempre verde con texto "Validar"
No diferenciaba entre agotado, disponible con número, o sin info

Después

15 uds. — Stock numérico cuando Dropi lo reporta
Sin stock — Cuando stock = 0
Disponible — Cuando no hay dato numérico pero no está agotado
CSS con clases .stock-ok y .stock-out para colores semánticos

4

Botón "Sync Completo" — Extension Chrome

NUEVO

Flujo de 3 pasos en un solo click:

1/3 · Escanear

Extrae catálogo completo de Dropi (tarjetas de producto visibles en pantalla)

2/3 · Detalles

Abre URL de cada producto para extraer descripción, galería, specs, SKU, ubicación bodega

3/3 · Sync API

POST a api-dropshipping.php con todos los datos enriquecidos

Antes

3 botones separados: Escanear → Completar precios → Sincronizar API
Proceso manual y propenso a errores por omisión
Código duplicado entre los 3 handlers

Después

Nuevo botón ⚡ Sync Completo que encadena los 3 pasos automáticamente
Lógica extraída en funciones reutilizables: runScan(), runEnrich(), runSyncApi()
Botones individuales refactorizados para usar las mismas funciones
Barra de estado muestra "1/3 · 2/3 · 3/3" en tiempo real
Enrich ahora detecta productos sin has_details (no solo sin precio)

// popup.js — funciones extraídas
async function runScan(tab) { /* scan catalog → merge storage */ }
async function runEnrich(onProgress) { /* open each URL → scrape details */ }
async function runSyncApi(endpoint, products) { /* POST to API */ }

// Handler del nuevo botón
btnSyncComplete.addEventListener('click', async () => {
  // 1/3 Escanear
  await runScan(tab);
  // 2/3 Enriquecer (solo productos sin has_details)
  await runEnrich((i, total, name) => setStatus(`2/3 · ${i}/${total}: ${name}…`, 'info'));
  // 3/3 Sync API
  await runSyncApi(endpoint, finalProducts);
  setStatus('✅ Sync completo · X nuevos · Y actualizados', 'ok');
});

Archivos Modificados

productos-dropi.php PHP: taxonomía, filtros, HTML toolbar, card stock

dropi-scraper/popup.js JS: runScan/runEnrich/runSyncApi + btnSyncComplete

dropi-scraper/popup.html HTML: nuevo botón ⚡ Sync Completo