Saltar al contenido principal

Crear tu primera página pública

Vamos a construir la carta pública de la Cafetería Aroma en 5 minutos. Asumimos que ya tienes la tabla productos cargada con algunos registros.

Paso 1 — Abre Páginas Web​

En Configuración → Páginas Web. Verás:

  • Lista de páginas (izquierda) con las ya creadas + Header + Footer.
  • Editor central con vista previa a la derecha.
  • Botón Nueva página arriba a la derecha.

Paso 2 — Nueva página​

Click en Nueva página. Elige Con datos de una tabla y selecciona productos en el desplegable.

Escribe el Título (Nuestra carta) — es el <title> del navegador y el nombre en la lista.

Paso 3 — Escribir el HTML​

En el editor central, escribe la plantilla. Usa Bootstrap 5 (viene incluido en el layout).

<div class="container my-5">
  <h1>Nuestra carta</h1>

  <div class="row">
    {{#cada}}
      <div class="col-md-4 mb-4">
        <div class="card">
          <img src="{{img imagen_producto}}" class="card-img-top" alt="{{nombre_producto}}" />
          <div class="card-body">
            <h5 class="card-title">{{nombre_producto}}</h5>
            <p class="card-text">{{descripcion_producto}}</p>
            <strong>{{money precio_producto}}</strong>
          </div>
        </div>
      </div>
    {{/cada}}
  </div>
</div>

¿Qué está pasando?​

  • {{#cada}}...{{/cada}} — el HTML se repite por cada producto de la tabla.
  • {{nombre_producto}} — se reemplaza por el nombre de cada producto.
  • {{money precio_producto}} — se reemplaza por el precio formateado como dinero ($2.500).
  • {{img imagen_producto}} — inserta la URL de la imagen para usarla dentro de <img src="">.

Paso 4 — Chips a la derecha​

En el panel lateral derecho tienes los chips con las columnas de la tabla. Al hacer clic en uno, se inserta la etiqueta correspondiente en el editor donde tengas el cursor:

  • Chip imagen_producto → inserta {{img imagen_producto}}.
  • Chip precio_producto → inserta {{money precio_producto}} (si el tipo es Moneda) o {{precio_producto}}.
  • Chip nombre_producto → inserta {{nombre_producto}}.

Ahorra tiempo y evita typos.

Paso 5 — SEO​

Baja al acordeón SEO y redes sociales y completa:

  • Meta Title (lo que ve Google): Carta - Cafetería Aroma.
  • Meta Description: Café de especialidad, pastelería casera y sándwiches recién hechos. Providencia, Santiago.
  • OG Image (para redes sociales): sube una imagen 1200×630 px.

Paso 6 — Elegir acceso y guardar​

  • Acceso: Pública (por defecto). Para restringir por login ver Login público y control de acceso.
  • Nombre del archivo: carta (será la URL: tusitio.cl/carta).
  • Click en Crear página.

Ver el resultado​

Abre tusitio.cl/carta en una pestaña nueva. Verás las cards con los productos reales.

Y lo mejor: agregar un producto nuevo en el panel lo hace aparecer aquí sin tocar la página.

Editar después​

En la lista de páginas de la izquierda, click en el nombre. Se abre la misma pantalla con todo cargado. Modifica y Guardar cambios.

Los cambios están en producción al instante. Si el sitio muestra la versión vieja: Configuración → Apariencia → Purgar caché.

Arriba de la lista de páginas hay dos elementos fijos:

  • Header — encabezado que sale en todas las páginas. Ahí va el logo y el menú.
  • Footer — pie que sale en todas. Ahí van los datos de contacto y redes sociales.

Se editan igual que una página. Al guardar aplican inmediatamente en todo el sitio.

Errores comunes​

  • La página no muestra ningún dato: falta web/config.php. Entra una vez a Configuración → Páginas Web y el sistema lo crea solo. También puedes ejecutar sudo ./setup.sh.
  • Sale "Página no encontrada": verifica que Apache tenga mod_rewrite activado. Sin él, la URL sería tusitio.cl/web/page.php?slug=carta.
  • No se ve una imagen: la URL puede estar mal. Ver Las imágenes no se ven.
  • El precio sale como 2500 en vez de $2.500: usa {{money precio_producto}} en vez de {{precio_producto}}.

¿Qué sigue?​