Workshop Kit · referencia del widget
Publicadogbp-card-preview
Maqueta en vivo de cómo se va a renderizar el Google Business Profile del operador en los resultados de búsqueda — construida con lo que MuntinContext tenga hasta ahora. Captura el único campo específico de GBP que ninguna otra lección recoge (la categoría principal, desde una taxonomía de 27 categorías de restaurante más una salida "Otra"), y luego renderiza una ficha con nombre, categoría, estado abierto/cerrado de hoy desde hours, dirección, teléfono, descripción, badge de conteo de fotos, color de acento desde palette, y una lista de revisión que marca los campos faltantes.
Demo en vivo
Elige una categoría principal. La vista previa de la ficha se actualiza inmediatamente; la lista de revisión abajo muestra qué otros campos siguen faltando. Abre las lecciones del bootcamp (L4 → L7 → L8 → L10) para llenar los otros campos y mira la ficha completarse sola.
Sin bloque de configuración — la lista de categorías principales viene incluida
Contrato
| Comportamiento | Notas |
|---|---|
Lee restaurantProfile.{name,cuisine,address,phone} |
Nombre + dirección + teléfono se muestran en la ficha. La cocina no se muestra directamente (la categoría la sobrescribe para el renderizado de GBP). |
Lee hours |
Computa el estado abierto/cerrado de hoy con un punto coloreado + etiqueta ("Abierto · 11:00–22:00" / "Cerrado hoy" / "Horario no establecido"). |
Lee palette[0] |
Tinta el placeholder de foto + la píldora CTA. Cae a teal. |
Lee shotList.length |
Muestra un badge de "N fotos lista(s)". La revisión va de faltante (0) a parcial (1-2) a lista (3+). |
Lee gbpDescription |
Se renderiza debajo de la dirección, recortada a 3 líneas (coincide con la truncación del resultado de búsqueda de Google). |
Lee gbp.primaryCategory |
Pre-llena el select al remontar. |
Escribe gbp.primaryCategory |
El id de la categoría seleccionada, o el texto libre del operador cuando se elige "Otra". |
| Re-render en vivo | Se suscribe a mtn:context-change; cualquier otro widget en la página (o la sincronización entre dispositivos llegando) re-renderiza la ficha sin remontar. |
Marcado
Sin bloque de configuración. El widget lee lo que necesita y escribe solo gbp.primaryCategory.
Accesibilidad
- El
<select>de categoría principal está etiquetado. "Otra" revela un input de texto de seguimiento con su propio aria-label. - La vista previa de la ficha se renderiza como HTML semántico (
<article>+ headings + párrafos), así los lectores de pantalla pueden navegar las secciones directamente en vez de interpretar el layout visual. - El estado abierto/cerrado usa un punto coloreado Y una etiqueta textual ("Abierto · 11:00–22:00"), así los modos de alto contraste no pierden significado.
- Las filas de revisión son
<li>s con badges de estado como texto ("Listo" / "Falta" / "Parcial") — los colores refuerzan, no reemplazan, la etiqueta. - Seleccionar una categoría anuncia "Categoría principal puesta a …" vía una región polite en vivo.
Por qué una vista previa, no un formulario
El operador ya llenó la mayoría de estos campos en otras partes (nombre en L1/L5a, dirección + teléfono en L10, horas en L10, descripción en L11a, fotos en L9a/b). Pedirles que llenen los mismos campos por segunda vez dentro de la L11 es la razón más común por la que los operadores se salen. La vista previa reutiliza los datos en su lugar: les muestra cómo el mismo contexto se renderiza en la superficie específica de Google, señala lo que todavía falta (con enlaces directos de vuelta a donde se llena), y les hace solo la pregunta que Google hace que nadie más hace — cuál es la categoría principal.
Dónde se publica
- L11a — GBP desde cero (vista previa antes de escribir la descripción)m3-assemble/fresh/gbp
- L11b — Reparación de GBP (vista previa después de nombrar las 3 reparaciones principales)m3-assemble/rebuild/gbp
La herramienta standalone GBP Grader califica un perfil real por URL; este widget muestra la vista previa de cómo se debería ver la ficha antes de salir en vivo.
Código fuente
/tools/_shared/workshop/gbp-card-preview.js — ~290 LOC. Exporta { tag, contextKeys, mount, serialize }. La taxonomía de 27 categorías vive arriba del archivo en tablas bilingües EN/ES; todayStatus() computa la píldora abierto/cerrado desde hours; readContext() lee MuntinContext fresco en cada re-render para que los commits externos (cambios de paleta, fotos seleccionadas nuevas, etc.) fluyan sin remontar.