# Sistema Dinámico de Productos Basado en Altura del Sidebar

## Descripción
Este sistema automáticamente ajusta la cantidad de productos mostrados en la página principal (`index.php`) basándose en la altura del sidebar izquierdo, **solo en pantallas de escritorio** (min-width: 992px).

## Funcionalidad

### ¿Cómo Funciona?
1. **Detección de Escritorio**: Solo se activa en pantallas ≥ 992px
2. **Medición Dinámica**: Compara la altura del sidebar (`#secondary`) vs el contenedor de productos (`.articleList`)
3. **Cálculo Inteligente**: Si el sidebar es más alto, calcula cuántos productos adicionales pueden caber
4. **Carga AJAX**: Solicita productos adicionales al servidor manteniendo los filtros actuales
5. **Renderizado Suave**: Añade los productos con animaciones CSS

### Componentes del Sistema

#### 1. JavaScript (`assets/js/dynamic-products.js`)
- **Clase**: `DynamicProductLoader`
- **Detección**: Verifica si es escritorio y encuentra elementos necesarios
- **Cálculo**: Determina productos adicionales basándose en altura disponible
- **AJAX**: Realiza peticiones asíncronas para cargar más productos
- **Renderizado**: Crea elementos HTML dinámicamente

#### 2. Backend PHP (modificación en `index.php`)
- **Endpoint AJAX**: Maneja peticiones con `?ajax=1`
- **Filtros**: Mantiene filtros de subsección, marca y búsqueda
- **Paginación**: Usa `offset` y `limit` para cargar productos específicos
- **JSON Response**: Devuelve productos formateados para JavaScript

#### 3. CSS (`assets/css/styles.css`)
- **Responsive**: Solo aplica estilos en escritorio
- **Animaciones**: Transiciones suaves para productos cargados
- **Loading**: Indicador visual durante la carga
- **Layout**: Optimizaciones para sidebar sticky

## Configuración

### Parámetros Principales
```javascript
this.maxProducts = 50;           // Límite máximo de productos
this.productHeight = 400;        // Altura estimada por producto (px)
this.productsPerRow = 4;         // Productos por fila en escritorio
```

### Límites de Seguridad
- **Productos por petición**: Máximo 20
- **Productos totales**: Máximo 50
- **Throttling**: Recalculos limitados a cambios significativos (>50px)

## Comportamiento

### Activación
✅ **Se activa cuando**:
- Pantalla ≥ 992px (escritorio)
- Página principal (`index.php` o `/`)
- Sidebar más alto que contenedor de productos

❌ **No se activa cuando**:
- Móvil o tablet (< 992px)
- Otras páginas del sitio
- Sidebar más bajo que productos
- Ya se alcanzó el límite máximo

### Eventos que Disparan Recálculo
1. **Resize de ventana** (con throttling de 250ms)
2. **Cambios en el sidebar** (via MutationObserver)
3. **Carga inicial** de la página

### Filtros Respetados
El sistema mantiene todos los filtros activos:
- **Subsección**: `?subseccion=X`
- **Marca**: `?marca=X`  
- **Búsqueda**: `?search=texto`

## Ventajas

### Para el Usuario
- **Mejor UX**: Aprovecha todo el espacio disponible
- **Navegación Eficiente**: Menos clics para ver más productos
- **Responsive**: Solo en escritorio donde tiene sentido

### Para el Rendimiento
- **Carga Inteligente**: Solo carga cuando es necesario
- **Lazy Loading**: Productos adicionales bajo demanda
- **Throttling**: Evita recálculos excesivos

### Para el SEO
- **Contenido Principal Intacto**: Los primeros productos siguen en HTML inicial
- **Progressive Enhancement**: Funciona sin JavaScript
- **No Afecta Indexación**: Los productos adicionales son bonus

## Implementación Técnica

### Flujo de Datos
```
1. DOMContentLoaded → Inicialización
2. Medición de alturas → Cálculo de productos necesarios  
3. Petición AJAX → Servidor procesa con filtros
4. Respuesta JSON → Renderizado dinámico
5. Animación CSS → Productos visibles
```

### Estructura de Petición AJAX
```
GET index.php?ajax=1&offset=12&limit=8&subseccion=3&marca=2
```

### Estructura de Respuesta JSON
```json
{
  "success": true,
  "products": [...],
  "count": 8,
  "offset": 12,
  "limit": 8
}
```

## Mantenimiento

### Logs de Consola
El sistema registra información útil:
```javascript
console.log(`Cargados ${count} productos adicionales. Total: ${total}`);
```

### Troubleshooting
- **No carga productos**: Verificar que sea escritorio y que el sidebar sea más alto
- **Productos duplicados**: Verificar offset en la petición AJAX
- **Error de carga**: Revisar logs de servidor para errores PHP

## Compatibilidad

### Navegadores Soportados
- ✅ Chrome/Edge/Safari modernos
- ✅ Firefox moderno
- ✅ Cualquier navegador con soporte para:
  - `fetch()` API
  - `MutationObserver`
  - CSS Grid/Flexbox
  - ES6 Classes

### Fallbacks
- **Sin JavaScript**: Funciona normalmente con productos iniciales
- **Móvil**: No interfiere, solo productos estáticos
- **Errores AJAX**: Falla silenciosamente, no rompe la página

---

## Autor
Sistema desarrollado para aprovechar dinámicamente el espacio vertical del sidebar en escritorio, mejorando la experiencia de navegación sin comprometer el rendimiento.