Skip to main content
The door module is available at /Puerta. It is powered by the puertas.app Livewire component, which presents a selection grid of available door types and dynamically loads the corresponding sub-component once a type is chosen.

​
Selecting a door type

When you navigate to /Puerta, you are shown a grid of five door types. Click any card to load that type’s configuration interface.

Puerta Clásica

Standard door with reinforced profiles and high durability. Loaded via livewire:puertas.normal.

Puerta - Diseño Personalizable

Fully customizable aesthetic and technical configuration. Loaded via livewire:puertas.personalizable.

Puerta Corrediza - 1 Hoja

Single sliding leaf with linear guide rail. Loaded via livewire:puertas.corrediza1hoja.

Puerta 2 Hojas

Double swing leaf with central latch closure. Coming soon.

Puerta Corrediza - 2 Hoja

Two sliding leaves with linear guide rail. Loaded via livewire:puertas.corrediza2hoja.
Puerta 2 Hojas displays a “Coming soon” screen when selected. All other door types load fully functional sub-components. The selected door type is stored in the session under PuertaSeleccionado and persists across page reloads.

​
Selector pattern

The puertas.app component acts as a router. It stores the selected type in $PuertaSeleccionado and conditionally renders the appropriate Livewire sub-component based on that value: 
// puertas/⚡app.blade.php — conditional rendering
@elseif ($PuertaSeleccionado === 'Puerta Clásica')
    <livewire:puertas.normal />
@elseif ($PuertaSeleccionado === 'Puerta - Diseño Personalizable')
    <livewire:puertas.personalizable />
@elseif ($PuertaSeleccionado === 'Puerta Corrediza - 1 Hoja')
    <livewire:puertas.corrediza1hoja />
@elseif ($PuertaSeleccionado === 'Puerta Corrediza - 2 Hoja')
    <livewire:puertas.corrediza2hoja />
Each sub-component manages its own state, dimension inputs, and plan rendering independently from the others.

​
Resetting the door type

Once a door type is selected, the header replaces the selection grid with the active type name and a Cambiar button. Clicking Cambiar calls the resetear() method, which:
  1. Sets $PuertaSeleccionado back to null.
  2. Removes the PuertaSeleccionado key from the session.
  3. Returns the user to the full door type selection grid.
This allows switching to a different door type without navigating away from the /Puerta route.

​
Sub-component reference

Door typeLivewire component
Puerta Clásicapuertas.normal
Puerta - Diseño Personalizablepuertas.personalizable
Puerta Corrediza - 1 Hojapuertas.corrediza1hoja
Puerta Corrediza - 2 Hojapuertas.corrediza2hoja
Puerta 2 Hojas(not yet implemented)
Door sub-components follow the same session-based persistence pattern as the window module. Each sub-component writes its configuration to the session so that data survives page refreshes within the same browser session.

Build docs developers (and LLMs) love

Get started for freeTalk to us