Módulos y secciones de la web

Layout (cómo se apilan las secciones en la web) + tabla de módulos: IDs DOM, qué muestra cada bloque, flags public_section_visibility y APIs. Referencia: establecimiento.php · paginas/get_pagina_establecimiento.php.

Flujo de lectura (orden en el DOM)

Layout en pantalla — qué muestra cada sección

Misma estructura HTML en móvil y escritorio; el CSS (est-pc-dashboard, est-pc-sidebar, est-pc-main) reorganiza columnas desde ~1024px. Debajo: vista simplificada (wireframe). Los bloques ocultos con display:none hasta que haya datos (ej. sin banners, sin cupones).

Vista:

Móvil / tablet estrecha — todo en una columna, arriba → abajo.

Flotantes · #estStitchNavBack · #estStitchShareBtn

Volver al mapa y compartir (esquinas). Siempre visibles en la capa Stitch.

#estPcBannerWrap → #estBannerSlider o #estHero

Carrusel full-bleed (fotos/videos JSON) o una sola imagen portada. Overlay: nombre, slogan, puntos de slide, ayuda, FAB calificar.

#estBackBtnOverBanner · #estSearchBtnOverBanner · cuenta

Volver y buscar sobre el banner; menú perfil si hay sesión.

#estPreludeStack

Orden interno (puede cambiar con data-est-layout): CTAs, luego #estEstablishmentInfo (solo cupones) y #estTrustChipsSection (chips aparte).

#estCtaActionsSection · ctas

4 tarjetas: WhatsApp, Cómo llegar, Ver carta, Reservar. CTAs reales vienen de d.ctas[] cuando existen.

#estCuponesBelt · coupons

Scroll horizontal de tarjetas cupón (imagen producto, %, precio, link a cupon.php). Badge HOT es maquetación.

#estTrustChipsSection → #estTrustChips · trust_chips

Sección propia; dentro, pills desde marketing (trust_chips[]).

#estScroll → #estPcDashboard

En móvil: categorías, destacados, catálogo, mapa, reseñas, about y lista cupones van en columna (sidebar y main se apilan).

#estCategoriesSection

“Te ofrecemos”: íconos categorías + link “Ver más” a productos?establecimiento_id=.

#estTopProductsSection

Carrusel “Productos destacados” (tarjetas tipo ribbon / más pedidos).

#estProductsSection

Título “Nuestros Productos”, filtros pill + orden, rejilla #estProductGrid con tarjetas de carta.

#estMapSection

Mapa / placeholder + “Abrir en Maps” si hay coordenadas.

#estRatingSection

Promedio, estrellas, desglose, reseñas recientes, botón ver todas.

#estAboutSection

“Información”: tarjetas horario, contacto, etc. desde datos de la página.

#estCuponesSection · coupons

Lista vertical de cupones (mismo origen que la cinta, formato lista).

#estSearchOverlay

Modal búsqueda en catálogo (no es una “sección” del scroll; capa encima).

#estStickyBarFixedWrapper

Barra fija al hacer scroll: nombre establecimiento + estado + mini CTAs (JS mueve contenido aquí).

Leyenda

Ficha Vista establecimiento.php · Producto producto.php · Panel empresa / marketing · API JSON público.

Flags public_section_visibility

Se guardan en BD (establecimiento_paginas.public_section_visibility) y el payload incluye public_section_visibility + arrays vacíos si el bloque está off. En front: window.__estPubVis y función estPubVisOn('ctas'|'promos'|'trust_chips'|'coupons') en establecimiento.php.

Tabla de módulos

Ámbito ID / selector Nombre Visibilidad Datos (API / BD) Archivos
Panel empresa — Marketing (relación)
company/sections/empresa_marketing.php — visibilidad de bloques, pestaña Tema (public_theme_slug), temas en company/includes/chancay_establishment_themes.php. La ficha aplica data-public-theme, data-est-layout, data-est-ui.
Vista alternativa /s/… (Stitch / Atmospheric)
establecimiento-stitch.php + includes/establecimiento-stitch-atmospheric.php (→ webs/rikchariwayki/stitch-atmospheric/) + js/establecimiento-stitch-app.js. Misma API; DOM distinto (#estBannerSlider en hero Tailwind, etc.). Tema en document.documentElement.