Lot bidding section

Name: lotBiddingTemplate
Url: #/lots/{LOT_UUID}
Description: Lot bidding section template on lot inner view page

Default Template

<div class="ta-lot-bidding d-flex flex-column">
  <div class="ta-lot-bidding-timer d-flex align-items-center justify-content-between">
    <lot-countdown-timer :lot="lot"/>
    <watchlist-button :lot="lot"/>
  </div>
  <div class="ta-lot-bidding-content flex-grow-1">
    <lot-collection-information :lot="lot"/>
    <bidding-latest-notification/>
    <bidding-reserve-not-met/>
    <hr>
    <bidding-start-price/>
    <bidding-actions>
      <bidding-current-bid/>
      <bidding-input/>
      <bidding-max-bid/>
      <bidding-buy-now-button/>
    </bidding-actions>
    <bidding-limit />
    <login-signup-buttons/>
    <hr>
    <private-treaty-actions/>
    <LatestBids/>
    <div v-if="mainConfig.descriptionInSidebar">
      <lot-view-description/>
    </div>
    <div v-if="mainConfig.sharesInSidebar">
      <hr>
      <SocialShareIcons :lot="lot"/>
    </div>
    <bidding-additional-links/>
  </div>
</div>

Available Components

`<BiddingActions />`

Displays the bidding area with additional logic based on several conditions.

Bidding needs to be enabled from enableBidding configuration option.
Lot must not be finished or if lot is finished the auction needs to be in after sale

This component will display the correct messages if the user's browser goes offline and will reload the browser once user is back online.

This will also display "Register as Bidder" button if the customer is not registered as bidder on this sale.

Example

<bidding-actions>
  Inner content
</bidding-actions>

"Inner content" will only be displayed if the conditions are satisfied.

`<BiddingAdditionalLinks />`

Displays links provided during configuration phase.

`<BiddingBuyNowButton />`

Displays "Buy now" button with buy now amount.

`<BiddingCurrentBid />`

Displays the current bid if exists. If there are 0 bids on the lot, this will not be rendered.

`<BiddingEstimate />`

Displays lot low, high estimates in the following format: $1,000 - $2,000.

`<BiddingInput />`

Displays main bidding input with "Place bid" button next to it. This component will only be rendered if lot is not finished.

Component props

label

Type: boolean, string
Default: false

The label which will be displayed at the top of the input field.

`<BiddingLatestNotification />`

Displays the correct notification for the bidder indicating whether the bidder is winning or not.
This component will only be rendered if the following conditions are satisfied.

The auction type must be Timed
Bidding must be enabled though enableBidding
The lot must not be finished
The authenticated customer needs to have a bid placed on the lot

If the lot is Sold and the authenticated user is the buyer the message will be

Congratulations

You have bought this item for $1,000

If the lot is Sold and the authenticated user NOT winner

The item was sold for

If the lot is Unsold because reserve was not reached

The item has not been sold due to not reaching reserve price.

If the lot is Unsold because not bids were made.

The item has not been sold.

If the authenticated user is the latest bidder

You are the highest bidder.

If the authenticated user has placed a bid but is not the latest bidder

You have been outbid.

`<BiddingLimit />`

Displays the current user's bidding limit if the showBiddingLimit configuration option is enabled and if bidding limit is enabled on the bidder.

`<BiddingMaxBid />`

Displays "Set your max bid" button clicking on which will display the max bid modal. From the modal user can set, update or delete his/her max bid for the lot.

Once the max bid is set the text "Set your max bid" changes into "Change your max bid - $1,000".

For some reason 🤷 this component also displays Number of Bids on the current lot.

`<BiddingReserveNotMet />`

Displays if reserve is reached or not based on the lot's reserve amount and the last bid amount.
This component only be rendered if

Bidding is enabled with enableBidding
Lot has reserve set from Artisio AMS
Bidding is not finished yet
showReserveStatus is not set to false

`<BiddingStartPrice />`

Displays the lot start price (If exists) formatted in the auction currency: Ex: Start Price: $1,000

`<LatestBids />`

Displays table of latest bids on the lot with possibility to open all bids in the modal. The component will only be rendered if showLatestBids configuration option is enabled.

Displays login button if authentication is enabled by the following config enableAuth and if the customer is not already authenticated on the website.
Clicking on the login button will do one of the following in these priorities.

If the loginUrl is configured user will be redirected on that URL.
If the loginHandler is configured and is a function, that function will be called
If none of these two options are provided user will be redirected to Artisio webapp login page (#/login).

`<LoginSignupButtons />`

Displays login and signup buttons together if authentication is enabled by the following config enableAuth and if the customer is not already authenticated on the website.
Clicking on the login button will do one of the following in these priorities.

If the loginUrl is configured user will be redirected on that URL.
If the loginHandler is configured and is a function, that function will be called.
If none of these two options are provided user will be redirected to Artisio webapp login page (#/login).

Clicking on the signup button will do one of the following in these priorities.

If the signupUrl is configured user will be redirected on that URL.
If the signupHandler is configured and is a function, that function will be called.
If none of these two options are provided user will be redirected to Artisio webapp login page (#/signup).

`<LotViewDescription />`

Displays the lot description details based on different conditions.
Lot has description field which is translatable content and by default that description is rendered here.
If the description is too large you can provide showMoreInDescription configuration option, and it will crop the description and only show part of it, but will show "Read more" button bellow the description.

Very common way of rendering descriptions is though lot's dynamic fields (which can be access by lot.dynamic_fields in this template). If you provide configuration option descriptionDynamicFields: true this component will iterate over all the dynamic fields of this lot and renders them.

However, you can specify descriptionDynamicFields to be an array of the dynamic fields and the component will only render these dynamic fields in the same ordering you provide in descriptionDynamicFields.

`<SignupButton />`

Displays signup button if authentication is enabled by the following config enableAuth and if the customer is not already authenticated on the website.

Clicking on the signup button will do one of the following in these priorities.

If the signupUrl is configured user will be redirected on that URL.
If the signupHandler is configured and is a function, that function will be called.
If none of these two options are provided user will be redirected to Artisio webapp login page (#/signup).

`<SocialShareIcons />`

Displays social share icons for sharing the lot page. The component will only be rendered if at least one of the configuration options: (socialShares, printButton) is not set to false.

WARNING

This component's functionality is not fully implemented yet.

`<StreamBidButton />`

Displays "Live Bidding on Stream Bid" button based on different criteria.

The customer needs to be authenticated, registered on this particular auction and its bidder status must be approved
The bidder must be valid bidder in StreamBid bidding platform
There is less than 15 minutes left before the auction starts. (15 minutes is configurable with the following configuration option liveBiddingButtonShowTime)
Auction type must be Live
Auction status must not be completed

`<WatchlistButton />`

Displays Add to watchlist button if it is enabled from enableWatchlist configuration option.

`<WatchlistCount />`

Displays how many users have this particular lot added into watchlist. Displays text "watching" after the number. Example: 15 watching.

Component props

label

Type: string
Default: watching

The label which will be displayed after the number.

Properties

is_authorized

See documentation here

mainConfig

See documentation here

TIP

All properties from auctionDetailsTemplate is available here also.

currentLocale

The current locale provided from main configuration object's lang property.

lot

Type: object

Entire lot object. The object contains every single information associated to the lot. That can be used to render particular type of data that is not available as a ready component.

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

<pre>{{ lot }}</pre>

The result will be something like this

Click to expand lot object details

{
  "auction": "...",
  "auction_no": "ZS014",
  "auction_title": {
    "en": "ZS014",
    "fr": "ZS014"
  },
  "auction_uuid": "5f467b35-b433-48fa-98b7-f1266104a73f",
  "bp_tax_rate": "20.0000",
  "branch_phone": null,
  "buy_now_price": 500000,
  "category": {
    "dynamic_fields": {
      "description": {
        "field_class_name": "CharField",
        "label": "Description",
        "position": 2,
        "rules": {
          "allow_blank": false,
          "allow_null": false,
          "required": true
        },
        "type": "ckeditor"
      },
      "title": {
        "field_class_name": "CharField",
        "label": "Title",
        "position": 1,
        "rules": {
          "allow_blank": false,
          "allow_null": false,
          "required": true
        },
        "type": "ckeditor"
      }
    },
    "key": "ae92ebba-4779-453e-b087-8e836dbe9ea3",
    "name": {
      "en": "Sport Cars"
    }
  },
  "collection_info": {
    "address_1": null,
    "address_2": null,
    "city": null,
    "email": null,
    "municipality": null,
    "phone": null,
    "state": null,
    "zip_code": null
  },
  "currency": {
    "code": "GBP",
    "display": "British Pound",
    "symbol": "£"
  },
  "department": {
    "image": null,
    "key": "cars",
    "name": {
      "en": "Cars"
    }
  },
  "description": {
    "en": "<p>Bugati</p>Yes"
  },
  "dynamic_fields": {
    "en": {
      "description": "<p>Bugati</p>",
      "is_featured": true,
      "title": "<p>Bugati</p>"
    }
  },
  "end_date": "2023-12-02 06:02:00+00:00",
  "hammer_tax_rate": "20.0000",
  "has_my_bid": false,
  "high": null,
  "image_urls": [
    "http://localhost:4569/app.dev.artisio.co/media/001eacb6-ed5d-45d0-a783-210f647ece14/inventory/45fe1f41-69c0-41ef-be4b-5b27cb34258b/cf754343-ff05-4a93-bd1c-b68b6f57704f/0001_FqVXQw_sm.jpeg"
  ],
  "images": [
    {
      "lg": {
        "content_type": "image/jpeg",
        "extension": "jpeg",
        "height": 1080,
        "mime": "image/jpeg",
        "size": 169455,
        "uploaded": true,
        "url": "http://localhost:4569/app.dev.artisio.co/media/001eacb6-ed5d-45d0-a783-210f647ece14/inventory/45fe1f41-69c0-41ef-be4b-5b27cb34258b/cf754343-ff05-4a93-bd1c-b68b6f57704f/0001_FqVXQw_lg.jpeg",
        "width": 1920
      },
      "original": {
        "content_type": "image/jpeg",
        "extension": "jpeg",
        "height": 2000,
        "mime": "image/jpeg",
        "size": 2168703,
        "uploaded": true,
        "url": "http://localhost:4569/app.dev.artisio.co/media/001eacb6-ed5d-45d0-a783-210f647ece14/inventory/45fe1f41-69c0-41ef-be4b-5b27cb34258b/cf754343-ff05-4a93-bd1c-b68b6f57704f/0001_FqVXQw_original.jpeg",
        "width": 3556
      },
      "sm": {
        "content_type": "image/jpeg",
        "extension": "jpeg",
        "height": 400,
        "mime": "image/jpeg",
        "size": 29331,
        "uploaded": true,
        "url": "http://localhost:4569/app.dev.artisio.co/media/001eacb6-ed5d-45d0-a783-210f647ece14/inventory/45fe1f41-69c0-41ef-be4b-5b27cb34258b/cf754343-ff05-4a93-bd1c-b68b6f57704f/0001_FqVXQw_sm.jpeg",
        "width": 600
      },
      "thumb": {
        "content_type": "image/jpeg",
        "extension": "jpeg",
        "height": 100,
        "mime": "image/jpeg",
        "size": 1784,
        "uploaded": true,
        "url": "http://localhost:4569/app.dev.artisio.co/media/001eacb6-ed5d-45d0-a783-210f647ece14/inventory/45fe1f41-69c0-41ef-be4b-5b27cb34258b/cf754343-ff05-4a93-bd1c-b68b6f57704f/0001_FqVXQw_thumb.jpeg",
        "width": 100
      }
    }
  ],
  "increments": null,
  "is_dynamic": true,
  "is_favored": false,
  "is_nft": false,
  "is_private_treaty": false,
  "is_started": true,
  "is_vat_applicable_for_hammer_price": true,
  "last_bid_amount": null,
  "lot_no": "1",
  "low": null,
  "max_bid": null,
  "max_bid_status": null,
  "next": "a7ade8d6-15ed-4c11-a867-6a9f9a6fd722",
  "nft_data": null,
  "num_of_bids": 0,
  "previous": null,
  "quantity": 1,
  "reserve": null,
  "short_description": {
    "en": "<p>Bugati</p>"
  },
  "start_date": "Fri, 24 Nov 2023 15:39:00 GMT",
  "start_price": 20000,
  "status": "published",
  "stock_no": "BT1/4",
  "subscriptions": [],
  "tax_rate": "20.00",
  "third_party_url": null,
  "title": {
    "en": "<p>Bugati</p>"
  },
  "uuid": "5b56a3a8-6097-4eb2-9157-8405ec7edb21",
  "watchlist_count": 0,
  "winning_bid": null,
  "actual_start_date": "2023-11-24T15:39:00.000Z",
  "actual_end_date": "2023-12-02T06:02:00.000Z",
  "last_bids": [],
  "hasBids": false,
  "last_update_date": 1701079624786
}

Rendering content from lot object

You can output any of the lot fields in the following way.

<!-- Outputs lot's buy now price -->
{{ lot.buy_now_price }}

<!-- Outputs lot tax rate -->
{{ lot.tax_rate }}

There are a couple of fields on lot object which are translatable.
Example: short_description, title, description, etc.
These properties might contain value for multiple languages.

To display content for the current language you need to use filter currentLocale.
You can see how Vue.js filters can be used.

{{ lot.title | currentLocale }}

But if the content contains HTML tags the content will be displayed with tags.

<p>This is lot's description</p>

To render HTML tags properly you need to render translatable content in the following way.

<div v-html="$options.filters.currentLocale(lot.description)"></div>

The content will be rendered as expected inside <p> tag.

This is lot's description

Check if the customer is registered as bidder on the auction

<div v-if="lot.auction.is_bidder">
  The customer is registered as bidder on the auction
</div>

If bidder auto approval is not enabled on the auction, bidder might be registered, but its status might not be approved. You can check this inside lot.auction.is_approved_bidder flag.

<div v-if="lot.auction.is_approved_bidder">
  The customer is registered as bidder on the auction and is approved
</div>

Example 1

Check if the user is authenticated or not, check the bidder status as well and display bidding button, max bid button and buy now buttons only after that.

<div v-if="!is_authorized">
  Please login on the website to place a bid
</div>
<div v-else>
  <div v-if="!lot.auction.is_bidder">
    Please register on the auction to place a bid
  </div>
  <div v-else-if="!lot.auction.is_approved_bidder">
    Your bidder status is not approved, You can't place bids until you get approved.
    <div v-if="lot.auction.require_credit_card_verification">
      Please finish your credit card verification to be able to bid on the auction.
    </div>
    <div v-else-if="lot.auction.initial_deposit_amount">
      This auction requires initial deposit. Please pay your deposit invoice to be able to bid on the auction
    </div>
  </div>
  <div v-else>
    <bidding-input/>
    <bidding-max-bid/>
    <bidding-buy-now-button/>
  </div>
</div>

You can create custom functionality by adding your own javascript