Pass balances
Show how many Access Passes and Guest Passes the signed-in customer has left, with HTML attributes.
Show signed-in customers how many Access Passes and Guest Passes they have left, without writing JavaScript. First, complete the installation.
These attributes show pass counts. To list individual Guest Pass invitations (who the customer invited, or who invited them), use data-tiquo-guest-passes instead.
Show totals
<div data-tiquo-show="logged-in">
<p>Access Passes: <span data-tiquo-pass-balance-total="access"></span></p>
<p>Guest Passes: <span data-tiquo-pass-balance-total="guest"></span></p>
<p>Held by invitations: <span data-tiquo-pass-balance-total="guest-held"></span></p>
</div>| Value | Shows |
|---|---|
access | Access Pass uses left across all Access Pass types |
guest | Guest Passes the customer can still give to guests |
guest-held | Guest Passes reserved by invitations the customer sent that haven't been used at reception yet |
A total shows 0 when the customer has none, and is empty while signed out.
List each pass type
<ul data-tiquo-pass-balances="access">
<li data-tiquo-pass-balance-item>
<strong data-tiquo-pass-balance="name"></strong>:
<span data-tiquo-pass-balance="balance"></span> left,
valid at <span data-tiquo-pass-balance="sublocationNames"></span>
<time data-tiquo-pass-balance="nextExpiresAt" data-tiquo-hide-empty></time>
</li>
<li data-tiquo-empty>No Access Passes.</li>
</ul>
<ul data-tiquo-pass-balances="guest">
<li data-tiquo-pass-balance-item>
<strong data-tiquo-pass-balance="name"></strong>:
<span data-tiquo-pass-balance="balance"></span> left,
<span data-tiquo-pass-balance="heldByInvitations"></span> held by invitations
</li>
<li data-tiquo-empty>No Guest Passes.</li>
</ul>| Attribute | Description |
|---|---|
data-tiquo-pass-balances | The list container: access or guest |
data-tiquo-pass-balance-item | Template repeated for each pass type |
data-tiquo-pass-balance="field" | passTypeId, name, balance or nextExpiresAt; also sublocationNames for Access Passes and heldByInvitations for Guest Passes |
data-tiquo-empty | Optional: shown when there are no pass types |
nextExpiresAt shows as a date, and sublocationNames as a comma-separated list. Add data-tiquo-hide-empty to hide an element with no value, such as nextExpiresAt for passes that don't expire.
A Guest Pass type stays in the list while all its uses are held by invitations, with balance showing 0.
When balances refresh
- One request fills every balance element on the page.
- Totals and lists clear on logout.
- They refresh after
createGuestInvitations()oracceptGuestInvitation()runs on the page. - Call
window.Tiquo.render()to refresh at other times, for example when the page regains focus. Registrations at reception also change balances.
See Rendering and empty states for shared collection behaviour.
JavaScript
const { accessPassBalance, guestPassBalance } = await window.Tiquo.getPassBalances();The method rejects with an Error carrying the server's message. The response is the same as the DOM Package's: see Pass Balances for every field, what counts towards a balance, and how invitations move Guest Passes between total and heldByInvitations.