LiSA Social Commerce
Developers
Developers
  • Developers
  • Guides
    • Integration Guide
      • Web Integration
      • App Integration
        • Android
          • Communication
          • Storage
          • File Downloads
          • Theming
        • iOS
          • Communication
          • Storage
          • File Downloads
          • Theming
        • React Native
          • Communication
          • Storage
          • File Downloads
          • Theming
        • Picture in Picture
      • Entrypoints
        • Query Parameter (v1)
    • Player Communication
      • Message API Reference
        • App
          • App — Heartbeat
          • App — Message Acknowledge
          • App — Message Error
          • App — Listen
        • CTA
          • CTA — Link in Comments
          • CTA — Sponsor Badge
        • Cart — View Cart
        • Comments — Join
        • Media
          • Media — Complete
          • Media — Pause
          • Media — Progress
          • Media — Resume
        • Media Item
          • Media Item — Emoji
          • Media Item — Impression
        • Player
          • Player — Dismiss
          • Player — Native Picture-in-Picture (PiP)
          • Player — Pass Visual Viewport
          • Player — Request Visual Viewport
          • Player — UI Transition
        • Products
          • Products — Add to Cart
          • Products — Add to Wishlist
          • Products — Click
          • Products — Close Product List
          • Products — Emoji
          • Products — Emoji State Update
          • Products — Impression
          • Products — Open Product List
        • Stickers
          • Stickers — Activate
          • Stickers — Click
          • Stickers — Expire
          • Stickers — Impression
          • Stickers — Publish
          • Stickers — Unlock
          • Stickers — Unpublish
          • Stickers — Update
          • Stickers — Voucher Claim
        • Visitor — Pass User Context
        • Shared Legacy Message Properties
    • Products
      • Product Update Notification API
  • Widgets
    • Content Hub
    • Quick Start Guide
    • Appearance
      • Markup
      • Responsive design
    • Configuration options
      • Autoplay
      • Channel
      • Client
      • Data
      • Debug
      • Host node
      • Layout
      • Language
      • On
      • Player
      • Query string
      • Quick view
      • Sections
      • Store
      • Template
    • API reference
      • Library API reference
      • Player API reference
      • Quick View API reference
    • Customisations
      • Template
      • Bring your own template
      • Type definitions
    • Examples
    • Type definitions
      • Asset
      • Product
      • Other
    • Promo Widget
      • Quick Start Guide
      • Configuration options
        • Autoplay
        • Channel
        • Countdown (deprecated)
        • Enabled
        • Image modifier
        • Lead time
        • Live (deprecated)
        • Position
        • Replay (deprecated)
        • Show ID
        • URL
  • Media Player Introduction
    • Picture-in-Picture Mode
  • Analytics
  • REST API
    • Authentication
    • Rate limits
    • Response status and error codes
    • API Documentation
Powered by GitBook
On this page
  • Events
  • Methods
  1. Widgets
  2. API reference

Quick View API reference

Events

Listed below are all the events emitted by the quick view component. Use .on() to register event listeners to each of these events.

library.quickView.Event.CLOSE

The quick view component is about to close.

library.quickView.Event.CLOSED

The quick view component has closed. All transitions and closing animations are completed.

library.quickView.Event.OPEN

The quick view component is about to open.

library.quickView.Event.OPENED

The quick view component has opened. All transitions and opening animations are completed.

Methods

This section lists the public methods the quick view component exposes.

hide()

Hide the quick view currently visible.

Usage example:

library.quickView.hide();

off(event: string, handler: () => void)

Removes a previously registered event listener from receiving any more events.

Parameters

event — A string which specifies the type of event for which to remove an event listener.

handler — The event listener function of the event handler to remove from the LiSA player.

The event listener function of the event handler must be the same as at the time of registration. Using .bind() changes the function reference.

Calling off() with arguments that do not identify any currently registered event listener on the quick view component has no effect.

Usage example:

const handler = (err) => {
  console.error('Quick view opens', err);
};

// Register the event handler
library.quickView.on(library.quickView.Event.OPEN, handler);

// Remove the event handler again
library.quickView.off(library.quickView.Event.OPEN, handler);

on(event: string, handler)

Registeres an event handler for any of the events listed above.

Usage example:

library.quickView.on(library.quickView.Event.CLOSED, () => {
  consoel.log('Quick view closed');
});

removeAllListeners(event: string)

Remove all event listeners previously registered to the LiSA player.

Usage example:

library.quickView.on(library.quickView.Event.OPEN, () => console.log('Quick view opens'));

library.quickView.on(library.quickView.Event.CLOSE, () => console.log('Quick view closes'));

// Prevent all listeners from being invoked
library.quickView.removeAllListeners();

show(url: string)

Open the given url in the quick view component.

Usage example:

library.player.on(library.player.Event.PRODUCT_VIEW, (payload, first, product) => {
  // payload action contains the product URL in this example
  library.quickView.show(payload.action);
});
PreviousPlayer API referenceNextCustomisations

Last updated 1 year ago