Saltar al contenido principal

Draft vs Published

OmniBuy separa el estado de edición del estado en vivo. Esto permite que los merchants editen su tienda sin afectar a los visitantes.

Dos columnas en la base de datos

ColumnaPropósito¿Quién la lee?
theme_settings_draftEstado del editor (ediciones del merchant)Theme Editor preview, ?preview=1
theme_settingsConfiguración publicada en producciónStorefront en vivo

La misma separación existe en tenant_themes:

  • settings_draft — borrador
  • settings — publicado

Flujo de edición

Merchant abre Theme Editor
→ loadDraft() lee theme_settings_draft
→ Editor muestra el estado del borrador
→ Merchant modifica secciones, colores, variantes
→ saveDraft() guarda en theme_settings_draft
→ Preview iframe carga con ?preview=1 (lee draft)

Merchant hace clic en "Publicar"
→ Publish() copia settings_draft → settings
→ Ahora los visitantes ven los cambios

Preview con query param

El storefront detecta ?preview=1 en la URL y cambia el comportamiento:

// internal/storefront/adapters/inbound/http/handler.go
if r.URL.Query().Get("preview") == "1" {
// Lee theme_settings_draft (borrador)
settings = loadThemeSettingsDraft(ctx, tenantID)
themeFS = themeSource.OpenPreview(ctx, tenantID, themeName) // aplica overrides de draft
}

En preview también se inyecta un overlay visual que muestra controles flotantes sobre las secciones para volver al editor.

Code Editor y draft

El code editor (para archivos .html, .css, .js) también usa el sistema draft/published:

  1. Los archivos editados se guardan como overrides del tenant en GCS.
  2. En preview, OpenPreview() aplica los overrides de draft encima del tema publicado.
  3. Al publicar, los overrides se consolidan en la release.
themes/tenants/<tenant_id>/<theme_name>/overrides/sections/hero.html ← draft

Preset de secciones

El Theme Editor soporta presets — layouts predefinidos que reordenan y configuran las secciones de la homepage:

// config/settings_schema.json
"presets": {
"default": {
"section_order": ["hero", "collections", "featured_products", "value_props"],
"sections": {
"hero": { "variant_id": "carousel" },
"collections": { "columns": 4 }
}
},
"dark": { ... },
"minimal": {
"section_order": ["hero", "featured_products", "rich_text", "newsletter"]
}
}

Cuando un merchant selecciona un preset, se sobreescribe section_order y los valores de cada sección en el borrador.