Skip to main content
The product details page provides in-depth information about individual items in the Tienda ETCA catalog. This page explains how to access and interpret product information.

​
Accessing Product Details

There are several ways to navigate to a product’s detail page:
  1. Browse the product catalog
  2. Find the product you’re interested in
  3. Click the “Ver detalles” link on the product card
  4. You’ll be taken to the dedicated details page for that product

​
Direct URL Access

Product details pages use the URL pattern: 
/productos/{product-id}
Each product has a unique ID that identifies it in the system.
The product ID is extracted from the URL using React Router’s useParams() hook and matched against the product catalog.

​
Product Details Display

The product details page shows comprehensive information about the selected item:

​
Page Title

The page header displays: 
Detalle del producto: {product-id}
This confirms which product you’re viewing by its unique identifier.

​
Product Information

When the product is successfully loaded, you’ll see:
  1. Product Name: The full name of the item (displayed as an <h3> heading)
  2. Product Image: A larger view of the product photo
  3. Category: The product category (e.g., “Arcos”, “Flechas”, “Accesorios”)
  4. Description: Detailed description of the product and its features

​
Display Structure

// Reference: ~/workspace/source/src/layout/DetallesProductos.jsx:27-38
<h2 className="titulo-detalle">Detalle del producto: {id}</h2>

{product ? (
  <>
    <h3 className="nombre-producto">{product.nombre}</h3>
    <img className="imagen-producto" src={product.imagen} alt={product.nombre} />
    <p className="descripcion-producto">Categoria: {product.categoria}</p>
    <p className="descripcion-producto">Descripcion: {product.descripcion}</p>
  </>
) : (
  <h3>producto no encontrado...</h3>
)}

​
Product Lookup

The details page retrieves product information from the global product catalog: 
// Reference: ~/workspace/source/src/layout/DetallesProductos.jsx:10-20
const { productos } = useContext(CartContext)
const { id } = useParams()
const product = productos.find(product => product.id === id)

​
How It Works

  1. The product ID is extracted from the URL parameters
  2. The application searches the loaded product catalog
  3. It finds the product with matching ID
  4. Product details are displayed
Products are loaded from the same API source used by the product gallery, ensuring consistent information across the application.

​
Product Not Found

If you navigate to a product ID that doesn’t exist in the catalog:
  • The page displays: “producto no encontrado…”
  • No product information is shown
  • The back button remains available to return to the previous page
This can happen if:
  • The product has been removed from the catalog
  • The URL was typed incorrectly
  • The product ID is invalid

​
Returning to Previous Page

At the bottom of the product details page, there’s a “VOLVER” (Back) button:
  • Click to return to the previous page
  • Uses browser history navigation
  • Typically returns you to the product gallery
// Reference: ~/workspace/source/src/layout/DetallesProductos.jsx:14-16
const navigate = useNavigate()

const handleBack = () => {
  navigate(-1)
};
You can also use your browser’s back button to return to the gallery, which preserves your search filters and pagination state.

​
Product Data Fields

Based on the product structure, each item in the catalog contains:
FieldDescriptionDisplayed on Details Page
idUnique product identifierIn page title
nombreProduct nameYes (heading)
imagenProduct image URLYes (large image)
categoriaProduct categoryYes
descripcionDetailed descriptionYes
precioProduct priceNo (shown in gallery/cart)
stockAvailable quantityNo (shown in gallery)
Price and stock information are shown in the product gallery and cart, but not on the details page. The details page focuses on descriptive information to help you learn more about the product.

​
Adding to Cart from Details Page

Currently, the product details page does not include an “Add to Cart” button. To purchase a product:
  1. View the product details
  2. Click the “VOLVER” button to return to the gallery
  3. Click “Agregar” on the product card in the gallery
You cannot add items to your cart directly from the product details page. Return to the gallery to add items.

​
Use Cases

The product details page is ideal for:

Reading Descriptions

View the full product description to understand features, specifications, and compatibility.

Viewing Larger Images

See a larger version of the product photo to better examine the item.

Checking Categories

Identify which category the product belongs to for better organization.

Product Research

Learn detailed information before making a purchase decision.

​
Page Layout

The product details page includes the standard site structure:
  • Header: Navigation and cart access
  • Product Details Section: Main content area with product information
  • Back Button: Navigation control
  • Footer: Site-wide footer
// Reference: ~/workspace/source/src/layout/DetallesProductos.jsx:23-47
return (
  <>
    <Header/>
    
    <h2 className="titulo-detalle">Detalle del producto: {id}</h2>
    
    {/* Product information */}
    
    <button onClick={handleBack} className="btn-inicio">VOLVER</button>
    
    <Footer />
  </>
)

​
Best Practices

1

Access via Gallery

Always access product details through the gallery’s “Ver detalles” link rather than manually typing URLs.
2

Read Full Description

Take time to read the complete description to understand what you’re purchasing, especially for archery equipment.
3

Note the Category

Pay attention to the product category to ensure it’s the type of item you’re looking for.
4

Return to Add to Cart

Remember to return to the gallery using the “VOLVER” button to add items to your cart.

Build docs developers (and LLMs) love

Get started for freeTalk to us