Reservar cita
Elige uno o varios servicios, día y hora para tu cita
+
+
+
Horario
+
+
+ Lunes a Viernes
+ 9:30 — 13:30 / 16:30 — 20:30
+
+
+ Sábados
+ 9:00 — 14:00
+
+
+ Domingos y festivos
+ Cerrado
+
+
+
Llámanos o reserva online. Te atendemos con o sin cita.
+
+
Cargando servicios…
@@ -138,7 +126,7 @@
-
Selecciona primero el servicio que deseas
+
Selecciona primero el/los servicio(s) que deseas
@@ -205,8 +193,8 @@
@@ -221,59 +209,94 @@
const PROVIDER_ID = 1;
// ---- Service selector state ----
- let selectedCategory = null;
let selectedServices = []; // [{id, nombre, duracion}]
let totalDuration = 0;
let allServices = []; // cache de servicios EA
- // ---- Services (ahora desde EasyAppointments) ----
- async function loadServices() {
- const grid = document.getElementById('services-grid');
+ // ---- Categories and Services from EasyAppointments ----
+ async function loadCategories() {
try {
- const res = await fetch('/ea-api/v1/services');
- if (!res.ok) throw new Error('HTTP ' + res.status);
- const services = await res.json();
+ let res = await fetch('/ea-api/v1/categories');
+ if (!res.ok) {
+ res = await fetch('/ea-api/v1/service_categories');
+ }
+ if (!res.ok) return [];
+ return await res.json();
+ } catch (e) {
+ console.warn('No se pudieron cargar las categorías de EA');
+ return [];
+ }
+ }
+
+ async function loadServices() {
+ const selectorContainer = document.getElementById('service-selector');
+ try {
+ const [servicesRes, categories] = await Promise.all([
+ fetch('/ea-api/v1/services'),
+ loadCategories()
+ ]);
+ if (!servicesRes.ok) throw new Error('HTTP ' + servicesRes.status);
+ const services = await servicesRes.json();
allServices = services;
- // Agrupamos en una categoría simple (puedes crear categorías en EA y extender esto)
- const fakeCategorias = [{
- nombre: "Servicios",
- imagen: "",
- servicios: services.map(s => ({
+ // Filter services to those assigned to this provider
+ let displayServices = services;
+ try {
+ const provRes = await fetch(`/ea-api/v1/providers/${PROVIDER_ID}`);
+ if (provRes.ok) {
+ const prov = await provRes.json();
+ const allowed = (prov.services || prov.service_ids || []).map(id => parseInt(id));
+ if (allowed.length > 0) {
+ displayServices = services.filter(s => allowed.includes(parseInt(s.id)));
+ }
+ }
+ } catch(e) {}
+
+ const catMap = {};
+ (categories || []).forEach(cat => {
+ catMap[cat.id] = cat;
+ });
+
+ const grouped = {};
+ displayServices.forEach(s => {
+ const catId = s.categoryId ?? s.serviceCategoryId ?? 'uncat';
+ if (!grouped[catId]) {
+ const catInfo = catMap[catId] || {};
+ grouped[catId] = {
+ nombre: catInfo.name || catInfo.title || 'Otros servicios',
+ imagen: '',
+ servicios: []
+ };
+ }
+ grouped[catId].servicios.push({
id: s.id,
nombre: s.name,
precio: (parseFloat(s.price) || 0) + " €",
duracion: s.duration || 30
- }))
- }];
+ });
+ });
- renderServices(fakeCategorias, grid);
+ let categorias = Object.values(grouped);
+ // Sort categories alphabetically for consistent order
+ categorias.sort((a, b) => a.nombre.localeCompare(b.nombre, 'es'));
+
+ // Sort services inside each category
+ categorias.forEach(cat => {
+ cat.servicios.sort((a, b) => a.nombre.localeCompare(b.nombre, 'es'));
+ });
+
+ if (categorias.length === 0 || displayServices.length === 0) {
+ selectorContainer.innerHTML = '
No hay servicios asignados para este proveedor o categorías.
';
+ return;
+ }
+
+ renderServiceSelector(categorias);
} catch (e) {
console.error(e);
- grid.innerHTML = '
No se pudieron cargar los servicios desde EasyAppointments.
';
+ if (selectorContainer) selectorContainer.innerHTML = '
No se pudieron cargar los servicios desde EasyAppointments.
';
}
}
- function renderServices(categorias, grid) {
- grid.innerHTML = categorias.map(cat => `
-
-
-
})
-
-
-
${esc(cat.nombre)}
-
- ${cat.servicios.map(s => `
- - ${esc(s.nombre)}${esc(s.precio)}
- `).join('')}
-
-
-
- `).join('');
-
- renderServiceSelector(categorias);
- }
-
function renderServiceSelector(categorias) {
const container = document.getElementById('service-selector');
container.innerHTML = categorias.map(cat => `
@@ -296,7 +319,10 @@
`).join('');
// Listener se añade una vez desde loadServices
- container.addEventListener('change', handleServiceChange);
+ if (!container.dataset.listenerAttached) {
+ container.addEventListener('change', handleServiceChange);
+ container.dataset.listenerAttached = 'true';
+ }
}
function handleServiceChange(e) {
@@ -315,11 +341,7 @@
totalDuration += parseInt(cb.dataset.duracion) || 30;
});
- // Lock to one category
- const first = document.querySelector('#service-selector input[type=checkbox]:checked');
- selectedCategory = first ? first.dataset.cat : null;
-
- updateServiceDisabledState();
+ // No lock to category anymore - services from different categories can be selected
updateServiceSummary();
if (selectedDate) {
@@ -331,19 +353,11 @@
} else {
const ph = document.getElementById('slots-placeholder');
ph.textContent = selectedServices.length === 0
- ? 'Selecciona primero el servicio que deseas'
+ ? 'Selecciona primero el/los servicio(s) que deseas'
: 'Selecciona un día en el calendario';
}
}
- function updateServiceDisabledState() {
- document.querySelectorAll('#service-selector .svc-cat-card').forEach(card => {
- const locked = selectedCategory !== null && card.dataset.cat !== selectedCategory;
- card.classList.toggle('svc-cat-locked', locked);
- card.querySelectorAll('input[type=checkbox]').forEach(cb => { cb.disabled = locked; });
- });
- }
-
function updateServiceSummary() {
const bar = document.getElementById('service-summary');
if (selectedServices.length === 0) { bar.style.display = 'none'; return; }
@@ -582,7 +596,7 @@
lastName: lastName,
email: email,
phone: telefono || '',
- notes: 'Creado desde web May HairCare'
+ notes: 'Creado desde web MAY Studio'
})
});