Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/diazdavilajesus16-stack/Sevicheria-Mar-sabroso/llms.txt

Use this file to discover all available pages before exploring further.

The menu on the home page is built from .card elements inside an Owl Carousel. You can add new dishes in two ways: by editing the HTML template directly (the fastest path for a visible result) or by creating records through the Django admin panel using the Plato model. Currently the frontend template uses hardcoded HTML, so only the first method automatically shows new dishes to visitors — read the note in Method 2 for details.

​
Method 1 — Edit the HTML template directly

1

Prepare the dish image

Place your dish photo inside static/assets/img/. The existing images use formats like .jpg, .webp, and .png. Aim for a consistent aspect ratio (roughly 4:3 or square) to match the other card thumbnails.
static/assets/img/
├── seviche.jpg
├── ceviche-mixto.jpg
├── pulpo.webp
└── your-new-dish.jpg   ← add here
2

Locate the menu carousel in home.html

Open core/templates/home.html and find the element with class owl-carousel menu-carousel. The existing dish cards are direct children of this element.
home.html
<div class="owl-carousel menu-carousel">
  <!-- existing cards -->
</div>
3

Copy the card template and fill in your dish details

Add a new .card div inside the carousel. Use this structure exactly — pay attention to the {% static %} tag, the .precio span format, and the agregarCarrito call which passes the dish name and price to the cart:
home.html
<div class="card">
  <img src="{% static 'assets/img/YOUR-IMAGE.jpg' %}" alt="Dish Name">
  <div class="card-content">
    <h3>Dish Name</h3>
    <p>Description of the dish.</p>
    <span class="precio">S/ XX.00</span>
    <button class="btn" onclick="agregarCarrito('Dish Name', XX)">Agregar 🛒</button>
  </div>
</div>
Replace YOUR-IMAGE.jpg with the filename you added in Step 1, fill in the dish name, description, and price. The second argument to agregarCarrito is a number (no quotes, no currency symbol).
4

Run collectstatic if deploying

If you are in a production environment, collect the new image into the static files directory:
python manage.py collectstatic
In local development with DEBUG = True Django serves static files automatically.

​
Method 2 — Django admin

The Django admin stores dish data in the database, but the current frontend template (home.html) uses hardcoded HTML cards. Records created through the admin will not automatically appear in the menu carousel until the template is updated to query and render Plato objects dynamically. Use Method 1 for immediate visible results.
1

Access the Django admin

Navigate to /admin/ in your browser and log in with a superuser account. If you have not created one yet:
python manage.py createsuperuser
2

Create a category if needed

Under the Menu app section, open Categorias and add a category (e.g., “Ceviches”, “Mariscos”, “Postres”). Each Plato record requires a linked Categoria.
3

Add a new Plato record

Open Platos and click Add plato. Fill in all fields:
FieldTypeNotes
nombreCharField (200)Dish name displayed on the menu
descripcionTextFieldShort description shown on the card
precioDecimalFieldUp to 8 digits, 2 decimal places (e.g., 25.00)
imagenImageFieldUploaded to media/platos/
disponibleBooleanFieldControls whether the dish is active; defaults to True
categoriaForeignKeySelect from existing categories
creadoDateTimeFieldSet automatically on creation
4

Connect admin data to the frontend (optional, requires dev work)

To make the menu render from the database instead of hardcoded HTML, update the Django view to pass a queryset and refactor the template. Example view change:
views.py
from menu.models import Plato

def home(request):
    platos = Plato.objects.filter(disponible=True)
    return render(request, 'home.html', {'platos': platos})
Then replace the hardcoded cards in the template with a template loop:
home.html
{% for plato in platos %}
<div class="card">
  <img src="{{ plato.imagen.url }}" alt="{{ plato.nombre }}">
  <div class="card-content">
    <h3>{{ plato.nombre }}</h3>
    <p>{{ plato.descripcion }}</p>
    <span class="precio">S/ {{ plato.precio }}</span>
    <button class="btn"
      onclick="agregarCarrito('{{ plato.nombre }}', {{ plato.precio }})">
      Agregar 🛒
    </button>
  </div>
</div>
{% endfor %}

​
Updating the promotions section

The promotions carousel works exactly like the menu carousel. Find the owl-carousel promo-carousel element in home.html and add new promotion cards using the same .card structure. Promotion images (combo photos) follow the same naming convention as dish images and are stored in the same static/assets/img/ directory: 
static/assets/img/
├── combo1.jpg
├── combo2.jpg
├── comboconchanegra.png
└── combomarisco.png
Keep promotion card descriptions short — two lines of text fits well within the card layout before it starts pushing down the price and button.

Build docs developers (and LLMs) love

Get started for freeTalk to us