Department Home Page

• Name: departmentHomeTemplate
• Url: #/home
• Description: Home page template when departments are enabled. Displays the selected department's information, a keyword search, and renders a short watchlist and "My Bids" list when no search is active. When the user performs a keyword search, the standard lot listing with sorting and pagination is shown instead.

Default Template

<lot-list-and-filters>
  <div v-if="loading" class="ta-departments-loading">
    Loading...
  </div>
  <div v-else class="ta-lot-section">
    <div v-if="selectedDepartment" class="ta-department-info">
      <img v-if="selectedDepartment.image" :src="selectedDepartment.image" alt="">

      <h1 v-if="lotQueryParams.q" class="ta-department-lot-search">
        {{ $t('Your search result for "{keyword}"', {keyword: lotQueryParams.q}) }}
      </h1>
      <h1 v-else class="ta-department-title">
        {{ $options.filters.currentLocale(selectedDepartment.name) }}
      </h1>
      <lot-keyword-search />
    </div>

    <template v-if="!lotQueryParams.q">
      <FavouriteLotsShortList title="Watchlist"></FavouriteLotsShortList>
      <MyBidsShortList lot-status="published"></MyBidsShortList>
    </template>

    <template v-else>
      <div class="ta-lot-list-header">
        <lot-list-per-page-select />
        <div class="ta-lot-search-wrapper">
          <sorting-dropdown/>
          <lot-list-switch-view/>
        </div>
      </div>
      <lot-list-items />
    </template>
  </div>
</lot-list-and-filters>

Available Components

<LotListAndFilters />

A layout wrapper that provides the responsive sidebar-plus-content structure. Place the filters sidebar and lot section inside it.

<LotKeywordSearch />

Displays a text input for searching lots by keyword. Updating the input value triggers a filtered lot search.

<LotListPerPageSelect />

Displays the per-page dropdown. Controlled by the perPageSelect and perPageOptions configuration options.

<SortingDropdown />

Displays the sorting dropdown for lots. Controlled by the enableSorting configuration option.

<LotListSwitchView />

Displays a toggle button to switch the lot listing between grid and list view.

<LotListItems />

Renders the list of lots using lotListItemTemplate for each individual lot.

<FavouriteLotsShortList />

Renders a compact list of the authenticated user's watchlisted lots. Hidden when the user performs a keyword search.

Component props

title

• Type: string
• Default: "Watchlist"

The heading displayed above the short watchlist.

<MyBidsShortList />

Renders a compact list of lots on which the authenticated user has placed bids. Hidden when the user performs a keyword search.

Component props

lot-status

• Type: string
• Default: "published"

Filter lots by status. Typically set to "published" to only show active lots.

Properties

loading

• Type: boolean

true while the department data is being fetched from the server.

selectedDepartment

• Type: object|null

The currently selected department object. Contains at minimum:

• name — Translatable department name object (e.g. { en: "Cars", de: "Autos" })
• image — Department image URL, or null if not set

Example usage:

<img v-if="selectedDepartment && selectedDepartment.image"
     :src="selectedDepartment.image"
     :alt="selectedDepartment.name | currentLocale" />
<h1>{{ selectedDepartment.name | currentLocale }}</h1>

lotQueryParams

• Type: object

Current lot query parameters. Particularly useful is lotQueryParams.q which holds the active keyword search string. Use this to conditionally show or hide parts of the template:

<div v-if="lotQueryParams.q">
  Showing search results for: {{ lotQueryParams.q }}
</div>

mainConfig

See documentation here

is_authorized

See documentation here