Favorite Auction List Item

• Name: favoriteAuctionListItemTemplate
• Url: #/favorite-auctions
• Description: Template for each individual auction item rendered on the favorite (watchlisted) auctions listing page.

Default Template

<auction-image :auction="auction"/>
<div class="ta-auction-list-item-desc">
  <div class="ta-auction-no-info d-flex justify-content-between">
    <auction-no :auction="auction"/>
    <number-of-lots :auction="auction"/>
  </div>
  <auction-title :auction="auction"/>
  <div class="ta-auction-list-item-dates">
    {{ auction.start_date | datetime }} <span v-if="auction.end_date"> - {{ auction.end_date | datetime }}</span>
  </div>
</div>
<div class="ta-auction-list-item-buttons">
  <auction-add-to-watchlist :auction="auction"/>
  <auction-countdown-timer :auction="auction" />
</div>

TIP

You can print the entire auction object in the template for inspection:

<pre>{{ auction }}</pre>

Available Components

Important

All components in this template accept the auction prop, which must be bound to the auction variable available in the template scope.

<AuctionImage />

Displays the auction's thumbnail image. Clicking it navigates to the auction's inner view page.

<AuctionNo />

Displays the auction number.

<NumberOfLots />

Displays the number of lots in the auction (withdrawn lots excluded).

<AuctionTitle />

Displays the auction title in an <h3> tag. Clicking it navigates to the auction's inner view page.

<AuctionAddToWatchlist />

Displays a heart icon button to add or remove the auction from the user's watchlist.

Important

This button is only displayed if enableWatchlist is not set to false.

<AuctionCountdownTimer />

Displays a countdown timer for the auction.

• If the auction has not started yet, it shows "Opens in: X days/hours/minutes"
• If the auction is active, it shows "Ends in: X days/hours/minutes"
• If the auction has ended, it shows "Ended"

<AuctionCarousel />

Displays a slider of auction images instead of a single thumbnail. Use this as an alternative to <AuctionImage />.

<RegisterAsBidderButton />

Displays a "Register as Bidder" button for the auction. Only shown if the user is authenticated but not yet registered as a bidder.

<AuctionViewType />

Displays a contextual icon based on the auction type if showAuctionType is true.

Properties

auction

• Type: object

The entire auction object for this list item. Contains all fields associated to the auction.

You can print the entire auction object into JSON format in the following way.

<pre>{{ auction }}</pre>

See the auctionDetailsTemplate for the full auction object structure.

mainConfig

See documentation here

is_authorized

See documentation here

Filters available

datetime

Formats the auction date using the configured datetimeFormat.

{{ auction.start_date | datetime }}

See Global filters for all available filters.