Lot list item

Name: lotListItemTemplate
Url: #/lots, #/auctions/{AUCTION_UUID}
Description: Lot list item template on lot listing page

Default Template

Each individual lot template in listing

<div class="ta-lot-list-item-image-wrapper">
    <lot-list-item-image :lot="lot" />
    <lot-notify-start-button :lot="lot" />
</div>
<lot-winning-status :lot="lot" />
<div class="ta-lot-list-item-content">
  <div class="ta-lot-list-item-desc">
    <div class="ta-lotno-bids-info d-flex justify-content-between">
      <lot-no :lot="lot" />
      <lot-number-of-bids :lot="lot" />
    </div>
    <lot-list-item-title :lot="lot" />
    <lot-collection-information :lot="lot" />
    <lot-current-price :lot="lot" />
    <lot-buy-now-price :lot="lot" />
  </div>
  <div class="ta-lot-list-item-buttons">
    <lot-add-to-watchlist :lot="lot" />
    <lot-countdown-timer :lot="lot" />
  </div>
</div>

Available Components

Important

Every component available in this template requires prop lot object. Besides lot prop you can find additional props described under each component definition.

`<LotListItemImage />`

Displays lot's first image. The image is clickable and clicking it will open lot's inner view.

`<LotNo />`

Displays lot number with label "Lot:" in front of it. You can customize or disable label by providing label prop as false or custom text.

Component props

label

Type: boolean, string
Default: true

If it is true, the default label "Lot:" is displayed, if it is false no label is displayed. If you provide string that will be displayed as label.

Example:

<!-- Example 1: Disable label -->
<LotNo :lot="lot" :label="$t('My custom translatable label')" />

<!-- Example 2: Provide different text -->
<LotNo :lot="lot" label="Lot Number: " />

<!-- Example 3: Provide translatable text. Suitable if you have application into multiple languages -->
<LotNo :lot="lot" :label="$t('Lot Number: ')" />

`<LotListItemTitle />`

Displays lot's title into <h4> tag. The title is clickable and clicking it will open lot's inner view.

`<LotAddToWatchlist />`

Display's button with heart icon to add the lot into watchlist.
The button will be disabled if the user is not authenticated.

Important

The button will only be displayed if enableWatchlist is not set to false.

The button to subscribe to lot start event. The button is only displayed before the bidding on the lot opens. If the user subscribes to lot start event, they will receive confirmation email(If that email is configured and enabled from Artisio AMS). Subscribed users will be notified when the bidding opens on the lot.

Important

The button will only be displayed if enableNotifyMeOnLotStart is not set to false.

Component props

subscribeText

Type: string
Default: "Notify me"

The text which is displayed before the customer subscribes to a specific lot.

unsubscribeText

Type: string
Default: "Don't notify"

The text which is displayed when the customer is subscribed to a specific lot.

Example:

<!-- Example: -->
<LotNotifyStartButton :lot="lot" :subscribe-text="$t('Subscribe')" :unsubscribe-text="$t('Unsubscribe')" />

`<LotCollectionInformation />`

Displays Zip Code, State and Municipality from lot's collection information only if collection information state field is provided from Artisio.

Important

The button will only be displayed if showCollectionInfo is not set to false.

`<LotCountdownTimer />`

Displays lot countdown timer if the lot status is not sold or unsold.

`<LotCurrentPrice />`

Displays the current price of the lot.

It shows "Start Price" if the bid is not placed on the lot yet
It shows "Current Bid" if the bid is made on the lot, and bidding is still active
It shows "Winning Bid" if the lot is finished and sold

The labels can be customized with the following props.

Component props

startPriceLabel

Type: string
Default: "Start Price"

currentPriceLabel

Type: string
Default: "Current Bid"

winningBidLabel

Type: string
Default: "Winning Bid"

Example:

<!-- Example: -->
<LotCurrentPrice :lot="lot"
                 :start-price-label="$t('Opening Bid')" 
                 :current-price-label="$t('Latest Bid')" 
                 :winning-bid-label="$t('Sold at')" />

`<LotLastBidAmount />`

Displays last bid amount formatted in corresponding currency. It will show "(Empty)" if there is no bid made on the lot.

`<LotBuyNowPrice />`

Displays lot's buy now price amount formatted in corresponding currency. It will show "Buy Now" label in front of the actual price.

Component props

label

Type: boolean, string
Default: "Buy now

The label which will be displayed in front of the price. This label can be disabled by providing false.

`<LotViewButton />`

Display a button "View Details" clicking on which will open lot's inner page.

Component props

label

Type: string
Default: "View Details

The button text which can be changed.

Example:

<!-- Example: -->
<LotViewButton :label="$t('Open Lot')" />

`<LotStartPrice />`

Displays lot's start price formatted in corresponding currency. It will show "Start Price" label in front of the price.

Component props

label

Type: string
Default: "Start Price

Example:

<!-- Example: -->
<LotStartPrice :label="$t('Opening Bid')" />

`<LotWinningStatus />`

This component displays winning status of the current user on this lot, if the current user has made a bid on the lot. If current user does not have bid on this lot, nothing will be displayed. There are two scenarios based on whether showReserveStatus is enabled or not.

Scenario 1 - If showReserveStatus is enabled

If the current user is the highest bidder, but the last bid amount is less than lot reserve, the following message is displayed.
"You are the highest bidder (Reserve not met)"
If the current user is the highest bidder, and the last bid amount is greater or equal to lot reserve, the following message is displayed. The message will be in green color.
"You are the highest bidder (Reserve met)"
If the current user is not the latest bidder
"You have been outbid"

Scenario 2 - If showReserveStatus is disabled

If the current user is the latest bidder.
"You are the highest bidder"
If the current user is not the latest bidder
"You have been outbid"

`<LotEstimates />`

Displays lot low, high estimates in the following format: $1,000 - $2,000, which "Estimate" label in front of it.

Component props

label

Type: string
Default: "Estimate

Example:

<!-- Example: -->
<LotEstimates :label="$t('Lot Estimates')" />

`<LotNumberOfBids />`

Displays number of bids on the lot, if bidding is enabled with enableBidding configuration option.

`<BidButton />`

Displays the bid button, which gives users possibility to participate in bidding from lot listing. This button will be disabled if the user is not authenticated or if the user is not registered on the auction.

If you want to display enabled bid button, but when clicked on the button redirect user to the login page or show bidder registration dialog you can utilize several components and properties.

Example 1

<!--Show redirect to login button if the user is not authenticated -->
<router-link v-if="!is_authorized"
             :to="{name: 'Login'}"
             class="btn btn-sm btn-primary btn-block">
  Bid {{formattedBidAmount}}
</router-link>
<!--Show register as bidder button if the user is not registered on the auction-->
<register-as-bidder-button v-else-if="!lot.auction.is_bidder"
                           :icon="false"
                           :label="'Bid ' + formattedBidAmount"
                           class="btn-sm btn-block"
                           :auction="lot.auction"/>
<!-- Show actual bid button-->
<bid-button v-else-if="lot.auction.is_bidder" :lot="lot" />

Example 1 - If you have your own login page

<!--Show redirect to login button if the user is not authenticated -->
<a v-if="!is_authorized"
   :href="mainConfig.loginUrl" 
   class="btn btn-sm btn-primary btn-block">
  Bid {{formattedBidAmount}}
</a>
...

`<MaxBidButton />`

Displays max bid button, which gives users possibility to place max bids on the lots from lot listing. This button will be disabled if the user is not authenticated or if the user is not registered on the auction.

If you want to display enabled max bid button, but when clicked on the button redirect user to the login page or show bidder registration dialog you can utilize several components and properties.

Example 1

<!--Show redirect to login button if the user is not authenticated -->
<router-link v-if="!is_authorized"
             :to="{name: 'Login'}"
             class="btn btn-sm btn-outline-primary">
  Place Auto Bid
</router-link>
<!--Show register as bidder button if the user is not registered on the auction-->
<register-as-bidder-button v-else-if="!lot.auction.is_bidder"
                           :icon="false"
                           :label="$t('Place Auto Bid')"
                           class="btn-sm btn-outline-primary"
                           :auction="lot.auction"/>
<!-- Show actual max bid button-->
<max-bid-button v-else-if="lot.auction.is_bidder" :lot="lot" />

Example 1 - If you have your own login page

<!--Show redirect to login button if the user is not authenticated -->
<a v-if="!is_authorized"
   :href="mainConfig.loginUrl" 
   class="btn btn-sm btn-primary btn-block">
  Place Auto Bid
</a>
...

`<LotStockNo />`

Displays lot stock number with label "Stock No" in front of it.

Component props

label

Type: string, boolean
Default: "Stock No

The label that is displayed in front of the stock number. Providing false here will hide the label completely.

`<LotCurrentIncrement />`

Displays the current increment value based on the current bid. This also shows "Increment" text before the value.

Component props

label

Type: string, boolean
Default: "Increment

The label that is displayed in front of the actual increment. Providing false here will hide the label completely.