Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JuseAR27/Unisierra-eats/llms.txt

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

UniSierra Eats search is fully client-side. When a student types a term into the navigation bar and presses Enter or clicks the search button, the browser navigates to busqueda.html with the query encoded in the URL. The search page then fetches the complete product list from GET /api/productos and filters it in memory using JavaScript — no dedicated search endpoint is needed.

​
How Search Works

  1. The search bar in the navigation calls configurarBuscadorGlobal() on page load.
  2. When the student submits a query, the browser navigates to busqueda.html?q=<encoded term>.
  3. renderizarBusqueda() reads the q and categoria parameters from window.location.search.
  4. All products are fetched from the API via obtenerProductosAPI().
  5. The product list is filtered in memory against the query term and/or category.
  6. Matching products are rendered as result cards; a “not found” message is shown if the array is empty.
The global search bar is wired in configurarBuscadorGlobal(): 
function configurarBuscadorGlobal() {
    const inputBusqueda = document.querySelector('.search-bar input');
    const btnBusqueda = document.querySelector('.btn-search');
    if (!inputBusqueda || !btnBusqueda) return;

    const ejecutarBusqueda = () => {
        const termino = inputBusqueda.value.trim();
        if (termino !== "") window.location.href = `busqueda.html?q=${encodeURIComponent(termino)}`;
    };
    btnBusqueda.addEventListener('click', ejecutarBusqueda);
    inputBusqueda.addEventListener('keypress', (e) => { if (e.key === 'Enter') ejecutarBusqueda(); });
}
Both clicking the button and pressing Enter call ejecutarBusqueda(). Empty queries are ignored — the browser only navigates when the trimmed input is non-empty.

​
Filter Logic

After products are fetched, the renderizarBusqueda() function applies the text filter. Matching is case-insensitive and checks three fields: product name, description, and category. 
productos = productos.filter(p => 
    p.nombre.toLowerCase().includes(termino) || 
    p.descripcion.toLowerCase().includes(termino) ||
    (p.categoria && p.categoria.toLowerCase().includes(termino))
);
If a categoria query parameter is also present, a second filter pass is applied immediately after: 
if (categoria) {
    const terminoCat = categoria.toLowerCase();
    productos = productos.filter(p => 
        p.categoria && p.categoria.toLowerCase().includes(terminoCat)
    );
    if (titleElement) titleElement.textContent = `Categoría: ${categoria}`;
}
Both q and categoria can be combined in a single URL — for example busqueda.html?q=pollo&categoria=sanas returns only healthy products whose name, description, or category also contains “pollo”.

​
URL Query Parameters

ParameterTypeDescription
qStringFree-text search term, URL-encoded
categoriaStringCategory slug: comidas, bebidas, snacks, or sanas
Use the categoria query parameter to link students directly to a filtered category view — for example busqueda.html?categoria=bebidas shows all drinks without requiring the student to type anything. You can embed these links anywhere in the site’s HTML.

​
Browsable Categories

The four category slugs that can be passed to ?categoria= are:
SlugDescription
comidasMain cooked dishes
bebidasHot and cold drinks
snacksLight bites and quick snacks
sanasSalads and healthy options

​
Search Result Cards

Each product that matches the query is rendered as a result card by renderizarBusqueda(). The card includes:
  • Product image (clickable, navigates to detalle_producto.html?id=<id>)
  • Product name (also clickable)
  • Star rating rendered by generarEstrellas() with numeric score and review count
  • Price tier tag ($ or $$, computed client-side from precio)
  • Category tag labelled “Cafetería”
  • Description snippet — first 100 characters of descripcion
When no products match the query or category, the results container displays: 
No se encontraron productos que coincidan con tu búsqueda.

​
Search on the Menu Page

The menu page (menu.html) supports the same ?q= filtering via the renderizarMenu() function. It reads the q parameter from the URL and applies the identical three-field filter: 
if (query) {
    const termino = query.toLowerCase();
    productos = productos.filter(p => 
        p.nombre.toLowerCase().includes(termino) || 
        p.descripcion.toLowerCase().includes(termino) ||
        (p.categoria && p.categoria.toLowerCase().includes(termino))
    );
    document.title = `Resultados para "${query}" - UniSierra Eats`;
}
The menu page renders results as a styled list with name, description, and price, grouped under a heading that switches between “Catálogo General” and Resultados de búsqueda: "<term>" depending on whether a query is active.
The ?categoria= parameter is supported only on busqueda.html. The menu page (menu.html) reads only the ?q= parameter and does not apply a category filter pass.

​
Search Page vs. Menu Page

Featurebusqueda.htmlmenu.html
Supports ?q=YesYes
Supports ?categoria=YesNo
Card layoutImage + details cardsText list with prices
Star ratings shownYesNo
Navigates to detail pageYes (click image or name)Yes (click name)

Build docs developers (and LLMs) love

Get started for freeTalk to us