# 🏍️ MOTORIDER CUSTOM THEME - Guía Completa de Instalación

## 📋 Información del Tema

- **Nombre:** Motorider Custom Theme
- **Versión:** 1.0
- **Desarrollado por:** QuieroVentas.cl
- **Cliente:** Motoryder SpA
- **Descripción:** Tema WordPress personalizado para tienda de repuestos y accesorios de motocicletas

---

## 🎨 Características del Tema

### ✨ Diseño y Estilo
- ✅ Colores corporativos (Negro, Blanco, Morado #A27BB3)
- ✅ 100% personalizado - Sin dependencias de otros temas
- ✅ Diseño responsive (móvil, tablet, desktop)
- ✅ Animaciones suaves y efectos hover
- ✅ Hero slider con 3 slides
- ✅ Slider infinito de logos de marcas
- ✅ Grid de productos moderno

### 🛒 E-commerce (WooCommerce)
- ✅ Integración completa con WooCommerce
- ✅ Diseño personalizado de tienda
- ✅ Página de producto individual
- ✅ Carrito de compras con contador
- ✅ Add to cart con AJAX

### 📱 Funcionalidades
- ✅ Menú móvil responsive
- ✅ Botón flotante de WhatsApp
- ✅ Smooth scroll
- ✅ Lazy loading de imágenes
- ✅ Botón "Volver arriba"
- ✅ Notificaciones dinámicas
- ✅ Header sticky

### 📄 Páginas Incluidas
- ✅ Home (front-page.php)
- ✅ Tienda (archive-product.php)
- ✅ Producto individual (single-product.php)
- ✅ Nosotros (page-nosotros.php)
- ✅ Contacto (page-contacto.php)
- ✅ Página genérica (page.php)

---

## 🚀 INSTALACIÓN PASO A PASO

### 1️⃣ Requisitos Previos

Asegúrate de tener instalado:
- XAMPP (con Apache y MySQL activos)
- WordPress (última versión)
- WooCommerce plugin

### 2️⃣ Instalar WordPress

Si aún no has instalado WordPress:

1. Descarga WordPress desde [wordpress.org](https://wordpress.org/download/)
2. Extrae el contenido en `c:\xampp\htdocs\MOTORIDER`
3. Crea una base de datos:
   - Abre `http://localhost/phpmyadmin`
   - Crea una nueva base de datos llamada `motorider_db`
4. Accede a `http://localhost/MOTORIDER` y sigue el asistente de instalación:
   - Base de datos: `motorider_db`
   - Usuario: `root`
   - Contraseña: (dejar en blanco en XAMPP)
   - Host: `localhost`

### 3️⃣ Activar el Tema

1. El tema ya está en: `wp-content\themes\motorider-custom\`
2. Ve a tu panel de WordPress: `http://localhost/MOTORIDER/wp-admin`
3. Ve a **Apariencia → Temas**
4. Activa **Motorider Custom Theme**

### 4️⃣ Instalar y Configurar WooCommerce

1. Ve a **Plugins → Añadir nuevo**
2. Busca "WooCommerce"
3. Instala y activa WooCommerce
4. Sigue el asistente de configuración:
   - País: Chile
   - Moneda: Peso chileno (CLP)
   - Configura los métodos de envío (Starken, Retiro en tienda)
   - Salta la configuración de pagos por ahora

### 5️⃣ Crear Páginas Principales

#### A. Página de Inicio
1. Ve a **Páginas → Añadir nueva**
2. Título: "Inicio"
3. Plantilla: No seleccionar ninguna (usará front-page.php automáticamente)
4. Publicar

#### B. Página Nosotros
1. Ve a **Páginas → Añadir nueva**
2. Título: "Nosotros"
3. En el panel derecho, selecciona **Plantilla → Página Nosotros**
4. Publicar

#### C. Página Contacto
1. Ve a **Páginas → Añadir nueva**
2. Título: "Contacto"
3. Plantilla: **Página Contacto**
4. Publicar

#### D. Configurar Página de Inicio
1. Ve a **Ajustes → Lectura**
2. Selecciona "Una página estática"
3. Página de inicio: **Inicio**
4. Guardar cambios

### 6️⃣ Configurar Menús

1. Ve a **Apariencia → Menús**
2. Crea un menú llamado "Menú Principal"
3. Agrega las siguientes páginas:
   - Inicio
   - Tienda (página de WooCommerce)
   - Nosotros
   - Contacto
4. Asigna el menú a **Menú Principal**
5. Guardar menú

### 7️⃣ Configurar el Personalizador

1. Ve a **Apariencia → Personalizar**

#### Logo:
- Ve a **Identidad del sitio → Seleccionar logo**
- Sube el logo desde `IMG\logo.png`

#### Hero Slider:
- Ve a **Hero Slider**
- Sube las 3 imágenes del slider (hero-1.jpg, hero-2.jpg, hero-3.jpg)
- Configura los títulos y textos para cada slide

#### Información de Contacto:
- Ve a **Información de Contacto**
- Teléfono: +56 9 XXXX XXXX
- WhatsApp: 569XXXXXXXX (sin el +)
- Email: contacto@motorider.cl
- Dirección: Tu dirección completa

#### Redes Sociales:
- Ve a **Redes Sociales**
- Facebook URL: https://facebook.com/motorider
- Instagram URL: https://instagram.com/motorider

### 8️⃣ Crear Categorías de Productos

1. Ve a **Productos → Categorías**
2. Crea las siguientes categorías (al menos 3 para empezar):
   - Luminescencia
   - Aceites
   - Repuestos
   - Accesorios
   - Pastillas de Freno
   - Filtros de Aceite

### 9️⃣ Crear Productos de Prueba

Crea al menos 6 productos para tener contenido:

1. Ve a **Productos → Añadir nuevo**
2. Ejemplo de producto:
   - **Nombre:** Aceite Sintético 10W-40
   - **Precio:** 15990
   - **Descripción corta:** Aceite sintético de alta calidad para motocicletas
   - **Descripción:** [Descripción completa del producto]
   - **Categoría:** Aceites
   - **Imagen destacada:** Sube una imagen
   - **Galería:** Agrega más imágenes
3. Repetir para más productos

### 🔟 Agregar Imágenes

Sigue las instrucciones del archivo `INSTRUCCIONES_IMAGENES.md` para:
- Mover el logo
- Generar/descargar todas las imágenes necesarias
- Colocar las imágenes en las carpetas correctas

---

## ⚙️ CONFIGURACIONES ADICIONALES

### Métodos de Envío

1. Ve a **WooCommerce → Ajustes → Envío**
2. Agrega zonas de envío para Chile
3. Configura los métodos:
   - Starken
   - Starken por pagar
   - Retiro en tienda

### Permalinks

1. Ve a **Ajustes → Enlaces permanentes**
2. Selecciona **Nombre de entrada**
3. Guardar cambios

### Widgets (Opcional)

1. Ve a **Apariencia → Widgets**
2. Puedes agregar widgets en las áreas de Footer si lo deseas

---

## 🎯 PERSONALIZACIÓN

### Cambiar Colores

Si necesitas cambiar los colores corporativos:
1. Edita `style.css`
2. Modifica las variables CSS en la sección `:root`:
```css
:root {
    --color-primary: #A27BB3;  /* Color morado */
    --color-black: #000000;
    --color-white: #FFFFFF;
}
```

### Agregar Más Slides al Hero

1. Ve a **Apariencia → Personalizar → Hero Slider**
2. Las imágenes ya están configuradas
3. O edita directamente `front-page.php` para agregar más slides

### Modificar el Footer

Edita el archivo `footer.php` para cambiar:
- Información de contacto
- Enlaces
- Texto del copyright

---

## 📱 FUNCIONALIDADES ESPECIALES

### Botón de WhatsApp

El botón flotante de WhatsApp se configura desde:
**Apariencia → Personalizar → Información de Contacto → WhatsApp**

Formato: Solo números, sin el símbolo +
Ejemplo: 569XXXXXXXX

### AJAX Add to Cart

Los productos se pueden agregar al carrito sin recargar la página.
Esto está implementado en `js/main.js`

### Animaciones

Las animaciones están activadas por defecto:
- Fade in al hacer scroll
- Hover effects en productos y categorías
- Slider animado de marcas
- Transiciones suaves

---

## 🐛 SOLUCIÓN DE PROBLEMAS

### El tema no se muestra correctamente

1. Verifica que WordPress esté instalado correctamente
2. Asegúrate de que Apache y MySQL estén activos en XAMPP
3. Limpia la caché del navegador (Ctrl + Shift + Delete)
4. Verifica que WooCommerce esté instalado y activo

### Las imágenes no se cargan

1. Verifica las rutas de las imágenes en `INSTRUCCIONES_IMAGENES.md`
2. Asegúrate de que las carpetas existan:
   - `wp-content\themes\motorider-custom\assets\images\`
   - `wp-content\themes\motorider-custom\assets\images\brands\`
3. Verifica permisos de carpetas

### Los productos no se muestran

1. Asegúrate de que WooCommerce esté activo
2. Crea al menos 1 producto de prueba
3. Verifica que el producto esté publicado y visible

### El menú móvil no funciona

1. Verifica que jQuery esté cargado
2. Revisa la consola del navegador (F12) para ver errores de JavaScript
3. Asegúrate de que `main.js` esté en la carpeta correcta

### Error 404 en las páginas

1. Ve a **Ajustes → Enlaces permanentes**
2. Simplemente haz clic en "Guardar cambios" sin modificar nada
3. Esto regenerará los permalinks

---

## 📚 ESTRUCTURA DE ARCHIVOS

```
motorider-custom/
├── style.css                 # Estilos principales del tema
├── functions.php            # Funciones y configuración
├── header.php               # Encabezado del sitio
├── footer.php               # Pie de página
├── front-page.php           # Página de inicio
├── index.php                # Plantilla por defecto
├── page.php                 # Plantilla de páginas
├── page-nosotros.php        # Plantilla Nosotros
├── page-contacto.php        # Plantilla Contacto
├── js/
│   └── main.js             # JavaScript personalizado
├── assets/
│   └── images/             # Imágenes del tema
│       └── brands/         # Logos de marcas
└── woocommerce/
    ├── archive-product.php  # Página de tienda
    └── single-product.php   # Página de producto
```

---

## 🔄 ACTUALIZACIONES FUTURAS

### Funcionalidades a agregar:

1. **Integración de pagos:**
   - Transbank (WebPay)
   - MercadoPago
   - Flow

2. **Mejoras en el carrito:**
   - Mini cart en el header
   - Checkout personalizado

3. **Blog:**
   - Sección de noticias/blog
   - Plantillas para posts

4. **Buscador avanzado:**
   - Filtros por categoría
   - Búsqueda por precio
   - Búsqueda AJAX

---

## 📞 SOPORTE

**Desarrollado por:** QuieroVentas.cl
**Sitio web:** https://quieroventas.cl
**Email:** contacto@quieroventas.cl

Para soporte técnico o consultas sobre el tema, contacta a QuieroVentas.cl

---

## 📝 NOTAS FINALES

- Este tema NO requiere plugins de page builders (Elementor, WPBakery, etc.)
- Todo está codificado directamente en PHP, HTML, CSS y JavaScript
- El tema es 100% personalizado y no depende de otros temas padre
- Optimizado para velocidad y SEO
- Compatible con las últimas versiones de WordPress y WooCommerce

---

## ✅ CHECKLIST DE INSTALACIÓN

- [ ] WordPress instalado y funcionando
- [ ] Tema activado
- [ ] WooCommerce instalado y configurado
- [ ] Páginas creadas (Inicio, Nosotros, Contacto)
- [ ] Menú configurado
- [ ] Logo subido
- [ ] Información de contacto configurada
- [ ] WhatsApp configurado
- [ ] Redes sociales configuradas
- [ ] Categorías de productos creadas
- [ ] Al menos 6 productos de prueba creados
- [ ] Imágenes subidas según INSTRUCCIONES_IMAGENES.md
- [ ] Permalinks actualizados
- [ ] Métodos de envío configurados
- [ ] Zona horaria configurada (Chile)

---

**¡Felicitaciones!** Tu sitio Motorider está listo para funcionar. 🎉

**Última actualización:** Noviembre 2025
