API Reference

Template Configuration

Artisio Web app give you possibility to customize the view of several pages according to you needs.

Here are default templates available

lotListItemTemplate - 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>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

Additional components available in the template

<lot-current-price :lot="lot" />
Displays the current bid of the lot, if there are no bids on the lot, it displays start price

Props

start-price-label - [String, Boolean]
Change the label displayed in start price or completely hide the label

current-price-label - [String, Boolean]
Change the label displayed in for current price or completely hide the label

Example - This will display the component without start price and current price labels. It will show only formatted numbers.
<lot-current-price :lot="lot" :start-price-label="false" />

<lot-estimates :lot="lot" />
Displays the low/high estimates of the lot

Props

label - [String, Boolean]
Change the label displayed or hide it

favoriteLotListItemTemplate - Each individual lot template in favorite lots 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>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

iMadeBidLotListItemTemplate - Each individual lot template in "Lots I bid on" page

<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>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

lotFiltersTemplate - Filters' section template for lots

<!-- Number of items found based on the search criteria -->
<lot-list-items-count />
<!-- Lot filtering by status radio list -->
<filter-lot-status />
<!-- Department List to filter lots based on -->
<filter-department-list />
<!-- Category list to filter lots based on. This component is only displayed if department is selected and categories are filtered by department -->
<filter-category-list />
<!-- State and municipality list to filter lots by -->
<filter-location-list />
<!-- Min/Max input fields to filter lots by price range -->
<filter-price-range />
<!-- Min/Max input fields to filter lots by reserve -->
<filter-reserve-range />
<!-- Min/Max input fields to filter lots by low/high estimate -->
<filter-estimate-range />
<!-- Min/Max input fields to filter lots by lot no range -->
<filter-lot-range />
<!-- Checkbox field to filter lots whether it has image or not -->
<filter-with-image />
<!-- The whole dynamic fields to filter lots -->
<filter-dynamic-fields />

All components starting with <filter- support :collapsed="true|false" option to make them collapsed by default or not.

For Example: To make departments collapsed by default
...
  <filter-department-list :collapsed="true"/>
...

lotListTemplate - All lots listing page

<lot-list-and-filters>
  <lot-list-filters />
  <div class="ta-lot-section">
    <div class="ta-lot-list-header-top">
      <lot-keyword-search />
      <jump-to-lot />
    </div>
    <hr class="mt-0">
    <div class="ta-lot-list-header ">
      <lot-list-per-page-select />
      <div class="ta-lot-search-wrapper mb-3">
        <sorting-dropdown/>
        <lot-list-switch-view/>
        <lot-list-filter-mobile-button/>
      </div>
    </div>
    <lot-list-items />
  </div>
</lot-list-and-filters>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

favoriteLotListTemplate - Favorite lots listing page

<lot-list-and-filters>
  <div class="ta-lot-section">
    <div class="ta-lot-list-header-top">
      <lot-keyword-search />
      <jump-to-lot />
    </div>
    <hr class="mt-0">
    <div class="ta-lot-list-header ">
      <lot-list-per-page-select />
      <div class="ta-lot-search-wrapper mb-3">
        <sorting-dropdown/>
        <lot-list-switch-view/>
        <lot-list-filter-mobile-button/>
      </div>
    </div>
    <favorite-lot-list-items />
  </div>
</lot-list-and-filters>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

lotViewTemplate - Lot inner view page

<lot-view-header>
  <div class="row align-items-center">
    <div class="col-md-8">
      <div class="ta-lot-breadcrumbs">
        <lot-view-breadcrumbs />
        <jump-to-lot />
      </div>
    </div>
    <div class="col-md-4">
      <lot-view-prev-next-buttons />
    </div>
  </div>
</lot-view-header>
<div class="row ta-lot-view-wrapper">
  <div class="col-lg-8 ta-lot-view-content">
    <div class="ta-lot-title-wrapper">
      <lot-view-title/>
      <lot-view-lot-no/>
    </div>
    <lot-view-images/>
    <lot-view-social-share/>
    <lot-view-description class="d-none d-lg-block" />
  </div>
  <div class="col-lg-4 ta-lot-view-bidding">
    <lot-view-bidding/>
  </div>
  <div class="col-lg-8 ta-lot-description-mobile d-block d-lg-none mt-3">
    <lot-view-description />
  </div>
</div>

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

lotBiddingTemplate - Lot inner view bidding section

<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>

Additional components available in the template

<bidding-estimate /> - Show "Low - High" estimates in auction currency

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

lotBiddingTemplateLive - Lot inner view bidding section for live auctions

<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">
    <bidding-latest-notification/>
    <hr>
    <bidding-start-price/>
    <bidding-actions>
      <bidding-commission-bid-input />
      <hr>
      <stream-bid-button />
      <bidding-limit />
      <login-signup-buttons/>
    </bidding-actions>
    <div v-if="mainConfig.descriptionInSidebar">
      <hr>
      <lot-view-description/>
    </div>
    <div v-if="mainConfig.sharesInSidebar">
      <hr>
      <SocialShareIcons :lot="lot"/>
    </div>
    <bidding-additional-links/>
  </div>
</div>

Additional components available in the template

<bidding-estimate /> - Show "Low - High" estimates in auction currency

Properties available in the template

lot - object

Lot object

lotDynamicFields - object

Dynamic fields of the lot

currentLocale - string

Main language of the Web App

fallbackLocale - string

Fallback language of the Web App

mainConfig - object

The configuration properties given to window.artisioWebApp

👍

You can also access lot object in lotListItemTemplate and favoriteLotListTemplate, lotViewTemplate and lotBiddingTemplate templates and print any information from lot.

homePageTemplate - Home page template (Available on route #/home)

<home-departments />

<lot-list-items />

signupInputsTemplate - Signup page template

<fieldset class="mb-4">
  <legend>{{ $t("Account Details") }}</legend>
  <div class="row">
    <email />
  </div>
  <div class="row">
    <password />
    <password-confirmation />
  </div>
</fieldset>

<fieldset class="mb-4">
  <legend>{{ $t("Profile information") }}</legend>

  <div class="row">
    <initials />
    <first-name />
    <middle-name />
    <last-name />
  </div>

  <div class="row">
    <gender />
    <title-input />
    <personal-id />
    <preferred-language/>
  </div>
  
  <div class="row">
    <company-name/>
    <phone />
  </div>
</fieldset>

<billing-address-details>
  <legend>{{ $t("Billing Address") }}</legend>
  
  <div class="row">
    <billing-address1 />
    <billing-address2 />
  </div>
  <div class="row">
    <billing-country />
    <billing-state />
  </div>
  <div class="row">
    <billing-city />
    <billing-zip-code />
  </div>
</billing-address-details>

<shipping-address-details :title="$t('Shipping Address')">
  
  <div class="row">
    <shipping-address1 />
    <shipping-address2 />
  </div>
  <div class="row">
    <shipping-country />
    <shipping-state />
  </div>
  <div class="row">
    <shipping-city />
    <shipping-zip-code />
  </div>
</shipping-address-details> 

<bank-account-details>
  <div class="d-flex justify-content-between align-items-center">
    <legend>{{ $t("Bank Account Details") }}</legend>
  </div>
  <div class="row">
    <bank-account-beneficiary />
    <bank-account-sort-code />
    <bank-account-number />
  </div>
  <div class="row">
    <bank-account-iban />
    <bank-account-swift />
    <bank-account-bank-name />
  </div>
  <div class="row">
    <bank-account-address1 />
    <bank-account-address2 />
    <bank-account-address3 />
  </div>
</bank-account-details>

<personal-identification-details >
  <div class="d-flex justify-content-between align-items-center">
    <legend>{{ $t("Personal Identification Details") }}</legend>
  </div>
  <div class="row">
    <identification-number />
    <identification-type />
  </div>
  <div class="row">
    <place-of-issue />
    <document-issue-date />
  </div>
  <div class="row">
    <document-expiration-date />
  </div>
</personal-identification-details>

<div class="row">
    <subscribe-to-newsletter />
</div>

profileInputsTemplate - Profile page template

<fieldset class="mb-4">
    <legend>{{ $t("Account Details") }}</legend>
    <div class="row">
        <email/>
    </div>
    <div class="row">
        <old-password/>
    </div>
    <div class="row">
        <password/>
        <password-confirmation/>
    </div>
</fieldset>

<fieldset class="mb-4">
    <legend>{{ $t("Profile information") }}</legend>

    <div class="row">
        <first-name/>
        <middle-name/>
        <last-name/>
    </div>

    <div class="row">
        <title-input/>
        <personal-id/>
        <preferred-language/>
    </div>

    <div class="row">
        <company-name/>
        <phone/>
    </div>
    <div class="row">
        <is-company/>
    </div>
</fieldset>

<billing-address-details>
    <legend>{{ $t("Billing Address") }}</legend>

    <div class="row">
        <billing-address1/>
        <billing-address2/>
    </div>
    <div class="row">
        <billing-country/>
        <billing-state/>
    </div>
    <div class="row">
        <billing-city/>
        <billing-zip-code/>
    </div>
</billing-address-details>

<shipping-address-details :title="$t('Shipping Address')">

    <div class="row">
        <shipping-address1/>
        <shipping-address2/>
    </div>
    <div class="row">
        <shipping-country/>
        <shipping-state/>
    </div>
    <div class="row">
        <shipping-city/>
        <shipping-zip-code/>
    </div>
</shipping-address-details>

<bank-account-details>
    <div class="d-flex justify-content-between align-items-center">
        <legend>{{ $t("Bank Account Details") }}</legend>
    </div>
    <div class="row">
        <bank-account-beneficiary/>
        <bank-account-sort-code/>
        <bank-account-number/>
    </div>
    <div class="row">
        <bank-account-iban/>
        <bank-account-swift/>
        <bank-account-bank-name/>
    </div>
    <div class="row">
        <bank-account-address1/>
        <bank-account-address2/>
        <bank-account-address3/>
    </div>
</bank-account-details>

<personal-identification-details>
    <div class="d-flex justify-content-between align-items-center">
        <legend>{{ $t("Personal Identification Details") }}</legend>
    </div>
    <div class="row">
        <identification-number/>
        <identification-type/>
    </div>
    <div class="row">
        <place-of-issue/>
        <document-issue-date/>
    </div>
    <div class="row">
        <document-expiration-date/>
    </div>
</personal-identification-details>

<div class="row">
    <subscribe-to-newsletter/>
</div>

auctionListItemTemplate - Each individual auction template in listing

<auction-image :auction="auction"/>
<div class="ta-auction-list-item-desc">
  <div class="ta-auction-no-info d-flex justify-content-between">
    <auction-bidding-open :auction="auction"/>
    <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>

You can print auction variable in the template and inspect what data you can access in the following way.

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

The following components are also available in auctionListItemTemplate

  • <auction-carousel auction="auction">
  • <register-as-bidder-button :auction="auction"/>

favoriteAuctionListItemTemplate - Each individual auction template in favorite auctions listing (To be removed)

<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>

favoriteAuctionListPageTemplate - Favorite auctions listing page

<div class="ta-auction-section">
    <div class="ta-auction-list-header-top">
        <auction-keyword-search/>
    </div>
    <hr class="mt-0">
    <div class="ta-auction-list-header ">
        <per-page-select/>
        <div class="ta-auction-search-wrapper mb-3">
            <sorting-dropdown/>
            <switch-view/>
        </div>
    </div>
    <favorite-auction-list-items/>
    <div class="ta-auction-list-footer">
        <pagination-summary/>
        <pagination-buttons/>
    </div>
</div>

auctionListPageTemplate - All auctions listing page

<auction-list-filters/>
<div class="ta-auction-section">
    <div class="ta-auction-list-header-top">
        <auction-keyword-search/>
    </div>
    <hr class="mt-0">
    <div class="ta-auction-list-header ">
        <per-page-select/>
        <div class="ta-auction-search-wrapper mb-3">
            <sorting-dropdown/>
            <switch-view/>
        </div>
    </div>
    <auction-list-items/>
    <div class="ta-auction-list-footer">
        <pagination-summary/>
        <pagination-buttons/>
    </div>
</div>

auctionFiltersTemplate - Filters' section template for auctions

<filter-auction-status />
<filter-department-list />

auctionViewPageTemplate - Auction inner view page

<auction-info/>
<lot-list-and-filters>
    <lot-list-filters/>
    <div class="ta-lot-section">
        <div class="ta-lot-list-header-top">
            <lot-keyword-search/>
            <jump-to-lot/>
        </div>
        <hr class="mt-0">
        <div class="ta-lot-list-header ">
            <lot-list-per-page-select/>
            <div class="ta-lot-search-wrapper mb-3">
                <sorting-dropdown/>
                <lot-list-switch-view/>
                <lot-list-filter-mobile-button/>
            </div>
        </div>
        <lot-list-items/>
    </div>
</lot-list-and-filters>

There is a template for <auction-info/> component called auctionDetailsTemplate, which can be configured separately.

placeBidModalTemplate - Place bid modal (available only on mobile screens)

<ModalLotDetails :lot="lot"/>

<div class="ta-lot-bidding lot-bidding-layout-grid">
    <lot-view-lot-no :label="$t('Lot Number')"/>
    <lot-countdown-timer :lot="lot"/>
    <bidding-start-price/>
    <div class="mb-2">
        <label class="muted-label">{{ $t('Current Bid') }}</label>
        <LotActualPrice :lot="lot"/>
    </div>
    <div class="mb-2">
        <label class="muted-label">{{ $t('Buy now') }}</label>
        <div class="text-black-600">{{ lot.buy_now_price || '(Empty)' }}</div>
    </div>
    <div class="mb-2">
        <label class="muted-label">{{ $t('No of bids') }}</label>
        <LotNumberOfBids :lot="lot"/>
    </div>
</div>

<bidding-actions>
    <div class="ta-lot-bidding-max-bid-wrapper">
        <bidding-input :label="true" class="mb-3" :for-mobile="true"/>
    </div>
    <bidding-max-bid-input/>
    <bidding-buy-now-button :for-mobile="true"/>
</bidding-actions>

sellAnItemModalTemplate - Sell an Item modal form template

<div class="row">
  <div class="col-6">
    <DepartmentInput />
  </div>
  <div class="col-6">
    <CategoryInput />
  </div>
  <div class="col-6">
    <QuantityInput />
  </div>
  <div class="col-6">
    <ReserveInput />
  </div>
</div>
<ImageInput />
<DynamicFieldInputs />

The following components support :required="true|false" option to make them required in the form or not.

  • <DepartmentInput />
  • <CategoryInput />
  • <QuantityInput />
  • <ReserveInput />
For Example: To make reserve optional
...
<div class="col-6">
  <ReserveInput :required="false"/>
</div>
...

auctionDetailsTemplate - Auction details template on auction page

<div class="ta-auction-info mb-3">
  <AuctionCover />
  <div class="d-flex">
    {{ $t('Auction') }} | <AuctionNo /> - <AuctionActiveDate  :datetime="false"/>
  </div>
  <div class="row">
    <div class="col-md-8 col-lg-9">
      <AuctionTitle />
      <AuctionDescription />
      <AuctionNumberOfLots />
      <AuctionViewingInfo />
      <AuctionViewingDates />
      <AuctionStartDate />
      <AuctionEndDate />
      <AuctionDates />
      <AuctionCurrency />
      <div class="d-flex mb-3">
        <AuctionViewType />
        <AuctionLocation />
      </div>

      <AuctionRegisterAsBidder />
      <AuctionStreamBid />
    </div>
    <div class="col-md-4 col-lg-3">
      <AuctionCountDown />
      <AuctionCatalogLink />
      <AuctionTermsLink />
      <AuctionIncrementsLink />
      <AuctionBuyersPremiumLink />
      <AuctionContactDetails />
    </div>
  </div>
</div>