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
  • Type definition
  • Asset
  • Date
  • Date format
  • Description
  • Title
  1. Widgets
  2. Configuration options

Data

The optional data configuration allows you to either modify a pre-selected value for a particular data field before rendering, or implement your own logic to select a desired value.

It accepts an object with optional data selectors for a library item's asset, date, description and title. Each field accepts a callback function, that accepts a show's source object as first and an optional preSelected value as second argument.

Type definition

type DataConfig = {
  asset?: (source: ComposedShow, preSelected?: Asset) => Asset | undefined;
  date?: ((source: ComposedShow, preSelected?: Date) => string) | string | undefined;
  description?: (source: ComposedShow, preSelected?: string) => string | undefined;
  title?: (source: ComposedShow, preSelected?: string) => string | undefined;
}

Asset

If provided, the asset data selector's preSelected value is an object of type Asset. Its return value is either an Asset object (see Type definitions ) or undefined.

window.LiSA.library.configs.push({
  data: {
    asset: (source, preSelected): => {
      /* Your code goes here... */
    }
  },
});

Date

If provided, the date data selector's preSelected value is an object of type Date. Its return value is either a string (formatted date) or undefined.

// callback function
window.LiSA.library.configs.push({
  data: {
    date: (source, preSelected) => {
      /* Your code goes here... */
    },
  },
});

Date format

In addition to a callback, date also accepts a string value, which represents a date format string. Format of the string is based on Unicode Technical Standard #35.

// date format
window.LiSA.library.configs.push({
  data: {
    date: 'MMMM d, hh:mm', // June 23, 12:15
  },
});

If no date data selector or format string is provided, LiSA Library uses 'MMMM d, h:mm aa' as a default date format, which translates to: June 23, 12:15 PM.

Description

If provided, the description data selector's preSelected value is a string. Its return value is either a string or undefined.

// callback function
window.LiSA.library.configs.push({
  data: {
    description: (source, preSelected) => {
      /* Your code goes here... */
    },
  },
});

Title

If provided, the title data selector's preSelected value is a string. Its return value is either a string or undefined.

window.LiSA.library.configs.push({
  data: {
    description: (source, preSelected) => {
      /* Your code goes here... */
    },
  },
});
PreviousClientNextDebug

Last updated 1 year ago