Listing Widgets
Individual widgets, prepended by
m-listing-, are standalone widgets that pull specific data from a listing. They are exported to give creators more freedom as to how they want to organise their listing page.
Contains text for the minimum bid or offer/bid or offer status, the current bid currency, and the balance of the connected wallet. Displays nothing (
<!---->) if the listing has ended.
<div
data-widget="m-listing-bid-form-rich"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
Loads the token's on-chain description.
The equivalent HTML code looks something like this:
<div class="m-description">
::before
<p>test</p>
</div>
The
::before pseudo-component contains the “DESCRIPTION” header.<div
data-widget="m-listing-description"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
Displays the listing media and a floating action button on the bottom-right to allow for expanding the media into a full-screen view.
<div
data-widget="m-listing-image-expandable"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
For ERC-1155 listings only. Displays the following text
${ tokenRemaining } of ${ tokenMax } left
when
tokenRemaining > 0 with a progress bar above it.
When
tokenRemaining = 0, we display
tokenRemaining and tokenMax come from the listing details (listing.totalSold and listing.totalAvailable respectively).<div
data-widget="m-listing-inventory"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
For ERC-1155s listings only. Displays the following text
`${amount_of_tokens_minted} out of ${max_mintable_token_amount} minted so far`
where
amount_of_tokens_minted and max_mintable_token_amount are pulled from the listing details (listing.totalSold and listing.totalAvailable respectively). Also has a progress bar above the counter text. Similar to m-listing-inventory.
<div
data-widget="m-listing-minted-counter"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
Displays the listing price’s label and the listing’s price, along with a bid status if the listing is an auction and the user has participated in the bid.
The listing label is one of the following:
- “Bidding Starts At” — if the listing is of type auction, is still ongoing, and does not have any bids.
- “Price” — if listing is not of type auction or if the listing has ended and there is a current bid amount.
- “Current Bid” — if the listing is of type auction, is still ongoing, and has at least one bid.
- “Winning Bid” — if the listing is of type auction, has ended, and has a current bid amount.
If the listing is a ranked auction, the price widget also displays the highest offer and the floor value.
<div
data-widget="m-listing-price"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
Last modified 1mo ago