Skip to main content

​
Overview

The product catalog is the main browsing interface for customers to discover and add automotive parts to their cart. The catalog displays products in a grid layout with search functionality and real-time stock availability.
The catalog is accessible at /catalogo and serves as the central hub for product discovery.

​
Key Features

Product Search

Full-text search functionality allows customers to quickly find specific parts

Category Filtering

Products organized by automotive categories for easy browsing

Stock Visibility

Real-time inventory counts displayed for each product

Quick Add to Cart

One-click add to cart functionality from the catalog view

​
Product Categories

The catalog organizes automotive parts into the following categories:
  • Filtros (Filters) - Oil filters, air filters, fuel filters
  • Frenos (Brakes) - Brake pads, brake discs, brake fluid
  • Eléctrico (Electrical) - Batteries, alternators, starters
  • Lubricantes (Lubricants) - Engine oils, transmission fluids
  • Suspensión (Suspension) - Shock absorbers, springs, bushings
  • Encendido (Ignition) - Spark plugs, ignition coils

​
Catalog Implementation

​
Route Definition

The catalog is registered in routes/web.php:9-11: 
Route::get('/catalogo', function () {
    return view('catalogos.catalogo');
})->name('catalogo');

​
Catalog View Structure

The main catalog view is located at resources/views/catalogos/catalogo.blade.php and extends the base layout: 
@extends('layouts.app')

@section('content')
    <!-- Header with navigation and cart -->
    <header class="header">
        <div class="header-container">
            <a href="{{ route('catalogo') }}" class="logo">MACUIN</a>
            <div class="header-right">
                <a href="{{ route('pedidos') }}" class="nav-link">Mis Pedidos</a>
                <a href="{{ route('carrito') }}" class="cart-link">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count">2</span>
                </a>
                <a href="{{ route('login') }}" class="user-link">
                    <i class="fas fa-user-circle"></i>
                </a>
            </div>
        </div>
    </header>
@endsection

​
Search Functionality

The catalog includes a search bar for filtering products (resources/views/catalogos/catalogo.blade.php:28-31): 
<div class="search-container">
    <i class="fas fa-search search-icon"></i>
    <input type="text" class="search-input" placeholder="Buscar autopartes...">
</div>

​
Product Card Layout

Each product is displayed in a card format with complete information: 
<div class="product-card">
    <div class="product-image">
        <i class="fas fa-cube"></i>
    </div>
    <div class="product-info">
        <span class="product-category">Filtros</span>
        <h3 class="product-name">Filtro de Aceite</h3>
        <div class="product-footer">
            <span class="product-price">$15</span>
            <span class="product-stock available">
                <i class="fas fa-check-circle"></i> 45 disponibles
            </span>
        </div>
        <button class="btn-add-cart">Agregar al Carrito</button>
    </div>
</div>
Products display real-time stock levels. Out-of-stock items show a disabled “Sin Stock” button instead of the add-to-cart button.

​
Stock Status Display

​
Available Products

Products with inventory show a green status indicator: 
<span class="product-stock available">
    <i class="fas fa-check-circle"></i> 45 disponibles
</span>
<button class="btn-add-cart">Agregar al Carrito</button>

​
Out of Stock Products

Products without inventory display a disabled state (resources/views/catalogos/catalogo.blade.php:72-86): 
<div class="product-card">
    <div class="product-image">
        <i class="fas fa-cube"></i>
    </div>
    <div class="product-info">
        <span class="product-category">Encendido</span>
        <h3 class="product-name">Bujías NGK</h3>
        <div class="product-footer">
            <span class="product-price">$32</span>
            <span class="product-stock out-of-stock">
                <i class="fas fa-times-circle"></i> Agotado
            </span>
        </div>
        <button class="btn-out-stock" disabled>Sin Stock</button>
    </div>
</div>

​
Example Products

The catalog displays a variety of automotive parts with different price points and stock levels:
ProductCategoryPriceStock
Filtro de AceiteFiltros$1545 available
Pastillas de FrenoFrenos$8923 available
Bujías NGKEncendido$32Out of stock
Batería 12VEléctrico$1,29912 available
Amortiguador DelanteroSuspensión$2,4508 available
Aceite Sintético 5W-30Lubricantes$4556 available
The catalog uses a responsive grid layout that adapts to different screen sizes for optimal browsing on desktop and mobile devices.

​
User Journey

  1. Customer navigates to /catalogo
  2. Browse products by scrolling or use the search bar to find specific parts
  3. View product details including category, price, and stock availability
  4. Click “Agregar al Carrito” to add items to the shopping cart
  5. Cart counter in header updates to reflect added items
  6. Continue shopping or proceed to /carrito to review the cart
The catalog header provides quick access to:
  • MACUIN Logo - Returns to catalog home
  • Mis Pedidos - View order history
  • Cart Icon - Shows item count and links to /carrito
  • User Icon - Access login/account management

Build docs developers (and LLMs) love

Get started for freeTalk to us