# Public-Facing Lot Pages

<p class="callout info">This article outlines how to create and configure custom public-facing pages that display parking lots for user booking. This feature allows OPS-COM administrators to provide a streamlined, branded parking selection and purchase experience.</p>

## Setup and Configuration

Custom pages are managed through the **Pages and Content Blocks** section.

1. Navigate to **System Configuration**, select **Content &amp; Designs**, and click **Pages and Content Blocks**.
2. Create or edit a page to serve as your Lot List or Lot Detail page.
3. Insert the appropriate **Shortcode** into the body of the page layout to render the desired functionality.

<p class="callout info">Shortcodes must be typed exactly as they appear in the documentation, or they will not function correctly.</p>

## Using this Feature

The public-facing lot experience consists of two distinct subpages: the **Lots List** and the **Lot Detail**.

### Lots List Page

The **Lots List** page displays all available parking lots to the user. You can place this module on any custom page.

- **Path Configuration:** When creating the page, the path you assign will be reflected in the URL. For example, if you set the path to /lots, the module will display at `yourdomain.com/lots`.
- **Shortcode Options:** Use the **\[lots\_list\]** shortcode to display the list. You can modify this shortcode using the following options:

<table border="1" id="bkmrk-shortcode-option-des" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 33.2739%;"></col><col style="width: 66.8453%;"></col></colgroup><tbody><tr><td>**Shortcode Option**</td><td>**Description**</td></tr><tr><td><span data-path-to-node="13,1,0,0">**\[lots\_list include\_hidden=1\]**</span></td><td><span data-path-to-node="13,1,1,0">Includes lots that are otherwise set to be hidden from the user.</span></td></tr><tr><td><span data-path-to-node="13,2,0,0">**\[lots\_list only\_text2parkme=1\]**</span></td><td><span data-path-to-node="13,2,1,0">Restricts the list to show only lots with **Text2ParkMe** enabled.</span></td></tr></tbody></table>

<p class="callout success">You can chain options together in a single shortcode. For example: **\[lots\_list include\_hidden=1 only\_text2parkme=1\]**.</p>

### Lot Detail Page

The **Lot Detail** page provides specific information for a single selected lot. This page is coded to function specifically when the path is set to **--lots-detail**, which dynamically fetches information for the selected lot ID.

Use the following shortcodes to customize the layout of your Lot Detail page:

<table border="1" id="bkmrk-shortcode-descriptio" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 47.3215%;"></col><col style="width: 52.7977%;"></col></colgroup><tbody><tr><td>**Shortcode**</td><td>**Description**</td></tr><tr><td><span data-path-to-node="18,1,0,0">**\[values show=lotname\]**</span></td><td><span data-path-to-node="18,1,1,0">Displays the name of the lot.</span></td></tr><tr><td><span data-path-to-node="18,2,0,0">**\[values show=lottype\]**</span></td><td><span data-path-to-node="18,2,1,0">Displays the initial of the lot type.</span></td></tr><tr><td><span data-path-to-node="18,3,0,0">**\[values show=lotnameid\]**</span></td><td><span data-path-to-node="18,3,1,0">Displays the lot ID.</span></td></tr><tr><td><span data-path-to-node="18,4,0,0">**\[values show=defaultcost format=currency\]**</span></td><td><span data-path-to-node="18,4,1,0">Displays the cost to rent a permit for the lot.</span></td></tr><tr><td><span data-path-to-node="18,5,0,0">**\[values show=location\]**</span></td><td><span data-path-to-node="18,5,1,0">Displays the address or location description.</span></td></tr><tr><td><span data-path-to-node="18,6,0,0">**\[values show=textcode\]**</span></td><td><span data-path-to-node="18,6,1,0">Displays the **Text2ParkMe** code for the lot.</span></td></tr><tr><td><span data-path-to-node="18,7,0,0">**\[values show=ratePer10Min format=currency\]**</span></td><td><span data-path-to-node="18,7,1,0">Displays the **Text2ParkMe** rate for the lot.</span></td></tr><tr><td><span data-path-to-node="18,8,0,0">**\[lot show=buy\_now\]**</span></td><td><span data-path-to-node="18,8,1,0">Displays the purchase button. Redirects unauthenticated users to the login screen.</span></td></tr><tr><td><span data-path-to-node="18,9,0,0">**\[lot show=map\]**</span></td><td><span data-path-to-node="18,9,1,0">Displays a map based on the lot's stored latitude and longitude.</span></td></tr><tr><td><span data-path-to-node="18,10,0,0">**\[lot show=photo\]**</span></td><td><span data-path-to-node="18,10,1,0">Displays the photo assigned to the lot.</span></td></tr></tbody></table>

## User-Side Results

- **The Lot List Page:** Once configured, users will see a clean, indexed list of all available parking lots based on the parameters defined in your **\[lots\_list\]** shortcode.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-05/scaled-1680-/kiiimage.png)](https://opscom.wiki/uploads/images/gallery/2024-05/kiiimage.png)

- **The Lot Detail Page:** When a user selects a specific lot, they are directed to the detail view where they can review location information, pricing, and view a map or photo of the lot before clicking **Buy Now** to proceed to the purchase process.

---

## <span style="color: rgb(22, 145, 121);">Best Practices and Considerations</span>

- <span style="color: rgb(22, 145, 121);">**Page Design:** While the **Lots List** is a fixed module, the **Lot Detail** page is highly customizable. **Ensure your Lot Detail page includes the permit cost and the \[lot show=buy\_now\] button** to provide a clear path to purchase for users.</span>
- <span style="color: rgb(22, 145, 121);">**Photo Configuration:** If you choose to display photos, ensure they are correctly assigned to each lot via the *Lot Administration* page.</span>
- <span style="color: rgb(22, 145, 121);">**Pathing:** Remember that the **Lot Detail** page must be set with the path **--lots-detail** to ensure the system correctly passes the lot ID required to fetch and display accurate information.</span>