Contents x
    API: Shortform
      • Print
      Contents

      API: Shortform

        • Print
        Article summary

        Play Shortform Detail View

        With the ShopLiveShortform.play(requestData: ShopLiveShortformCollectionData?), you can play the Shortform detail view of which playlist is associated with the ShopLiveShortformCollectionData.

        • You can play the related detail view by entering one or more property values of ShopLiveShortformCollectionData.

        • If ShopLiveShortformCollectionData is null, you can play the entire detail view.

        ShopLiveShortformCollectionData

        Property name

        Type

        Description

        shortsId

        String?

        Shortform unique identifier

        shortsCollectionId

        String?

        This is the global resource name assigned to Shortform for resource management. It is an internally used value in Shoplive.

        tags

        [String]?

        Value for related tag search

        tagSearchOperator

        ShopLiveTagSearchOperator?

        Tag search options

        • OR : integrated search

        • AND : cross search

        brands

        [String]?

        Value for related brand search (searching both title and identifier)

        shuffle

        Bool? // default = false

        Value for random playback (Default: false)

        referrer

        String?

        Value for tracking the path

        Shortform Detail View: All

        let requestCollectionData = ShopLiveShortformCollectionData()
ShopLiveShortform.play(requestData: requestCollectionData)

        Shortform Detail View: Playback after clicking on the list

        let requestCollectionData = ShopLiveShortformCollectionData()
requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
ShopLiveShortform.play(requestData: requestCollectionData)

        Shortform Detail View: Playback after clicking on the related tag list

        let requestCollectionData = ShopLiveShortformCollectionData()
requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
requestCollectionData.tags = ["testTag1","testTag2"]
requestCollectionData.tagSearchOperator = .OR
ShopLiveShortform.play(requestData: requestCollectionData)

        Shortform Detail View: Playback after clicking on the related brand list

        let requestCollectionData = ShopLiveShortformCollectionData()
requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
requestCollectionData.brands = ["brand1","brand2"]
ShopLiveShortform.play(requestData: requestCollectionData)

        Shortform Detail View: Playback of related tag

        let requestCollectionData = ShopLiveShortformCollectionData()
requestCollectionData.tags = ["testTag1","testTag2"]
requestCollectionData.tagSearchOperator = .OR
ShopLiveShortform.play(requestData: requestCollectionData)

        Shortform Detail View: Playback of related brand

        let requestCollectionData = ShopLiveShortformCollectionData()
requestCollectionData.brands = ["brand1","brand2"]
ShopLiveShortform.play(requestData: requestCollectionData)

        Play Shortform Preview

        With the ShopLiveShortform.showPreview(requestData: ShopLiveShortformPreviewData?), you can play the Shortform  preview of which playlist is associated with the ShopLiveShortformRelatedData.

        • You can play the related preview by entering one or more of the property values of ShopLiveShortformRelatedData.

        ShopLiveShortformRelatedData

        Property name

        Type

        Description

        productId

        String?

        Unique ID of the product, automatically issued upon product registration

        sku

        String?

        Unique SKU information of the product

        name

        String?

        Product name

        url

        String?

        URL of the product's detailed page

        tags

        [String]?

        Value for related tag search

        tagSearchOperator

        ShopLiveTagSearchOperator?

        Tag search options

        • OR: integrated search

        • AND: cross search

        brands

        [String]?

        Value for related brand search (searching both title and identifier)

        shuffle

        Boolean? //default = false

        Value for random playback (Default: false)

        referrer

        String?

        Value for tracking the path

        ShopLiveShortformPreviewData

        Property name

        Type

        Description

        previewScale

        CGFloat?

        Sets the size of the short-form preview.

        previewRadius

        CGFloat?

        Sets the corner radius of the short-form preview. (Default: 10)

        previewPosition

        ShopLiveShortform.PreviewPosition?

        Specifies the initial display position of the short-form preview. (Default: BottomRight)

        previewEdgeInset

        UIEdgeInset?

        Sets the padding of the preview in the short-form preview. (top, left, right, bottom) (Default: 16pt)

        previewFloatingOffset

        UIEdgeInset?

        Sets the area where the preview can move in the short-form preview. (Default: 0pt)

        isMuted

        Bool?

        Sets whether to mute the short-form preview. (Default: false)

        isEnabledVolumeKey

        Bool

        A feature has been added to the short-form preview that allow it to be unmuted based on the device’s volume  (Default: false)

        maxCount

        Int?

        Sets the number of videos to be played in the preview of the short-form.

        useCloseButton

        Bool?

        Sets whether to use the x button in the top left corner of the short-form preview. (Default: true)

        useCustomAction

        Bool

        Use this when you want to directly define the click event of the short-form preview. (Default: false)

        enableSwipeOut

        Bool?

        Sets whether to allow the short-form preview to be closed by swiping it off the screen. (Default: true)

        clickEventCallBack

        ( () → () ) ?

        You can receive an event that occurs when the short-form preview is clicked.

        By setting useCustomAction = true and defining the action in this event, you can directly define the click event of the preview.

        Shortform Preview: ProductId Based

        let requestRelatedData = ShopLiveShortformRelatedData()
requestRelatedData.productId = "{YOUR_PRODUCT_ID}"
ShopLiveShortform.showPreview(requestData: requestRelatedData)

        Shortform Preview: SKU Based

        let requestRelatedData = ShopLiveShortformRelatedData()
requestRelatedData.sku = "{YOUR_PRODUCT_SKU}"
ShopLiveShortform.showPreview(requestData: requestRelatedData)

        Shortform Preview: Tag Based

        let requestRelatedData = ShopLiveShortformRelatedData()
requestRelatedData.tags = ["tag1","tag2"]
requestRelatedData.tagSearchOperator = .OR
ShopLiveShortform.showPreview(requestData: requestRelatedData)

        Shortform Preview: Brand Based

        let requestRelatedData = ShopLiveShortformRelatedData()
requestRelatedData.brands = ["brand1","brand2"]
ShopLiveShortform.showPreview(requestData: requestRelatedData)

        Shortform Detail / Preview Close

        Close the currently running Shortform detail view or preview with the ShopLiveShortform.close().

        ShopLiveShortform.close()

        Hide Button on Detail View

        With the setVisibleFullTypeViews(options: ShopLiveShortformVisibleFullTypeData), you can configure whether to show buttons on the Shortform detail view screen. By including one or more property values of ShopLiveShortformVisibleFullTypeData, you can also configure the visibility of related buttons.

        ShopLiveShortformVisibleFullTypeData

        Property name

        Type

        Description

        isLikeButtonVisible

        Bool

        Hide the Like button. (Default: true)

        isCommentButtonVisible

        Bool

        Hide the Comment button. (Default: true)

        isShareButtonVisible

        Bool

        Hide the Share button. (Default: true)

        isBookmarkVisible

        Bool

        Hide the Bookmark button. (Default: true)

         var option = ShopLiveShortformVisibleFullTypeData()
 option.isLikeButtonVisible = true
 option.isCommentButtonVisible = true
 option.isShareButtonVisible = true
 option.isBookMarkVisible = true
 ShopLiveShortform.setVisibileFullTypeViews(options: option)

        Detailed shortform list - composed with a specific shortform ID

        With the ShopLiveShortform.play(shortformIdsData: ShopLiveShortformIdsData, delegate: ShortsCollectionViewDataSourceRequestDelegate), you can compose a playlist using the shortformId received via the shortform API and play them in order.

        ShopLiveShortformIdsData

        Property name

        Type

        Description

        ids

        [String]?

        A list of shortform IDs (up to 30 items)

        currentId

        String?

        The item in the list that can currently be focused on

        referrer

        String?

        A value to track the referral path

        ShortsCollectionViewDataSourcRequestDelegate

        protocol ShortsCollectionViewDataSourceDelegate : AnyObject { 
     func onShortformListPagination(completion : @escaping((ShopLiveShortformIdsMoreData?,Error?) -> ()))
     func onShortformListPaginationError(error : Error)
}

        The onShortformListPagination(completion:_) function is called when there are no more shortform IDs to display. In such cases, you can continue to supply shortform IDs continuously by using completion(ShopLiveShortformIdsMoreData).

        ShopLiveShortformIdsMoreData

        Property name

        Type

        Description

        ids

        [String]?

        A list of shortform IDs (up to 30 items)

        hasMore

        Bool?

        Pagination availability

        Shortform Detail: Keep video ratio

        ShopLiveShortform.setResizeMode(options : ShopLiveResizeMode)

        With the ShopLiveShortform.setResizeMode(options: ShopLiveResizeMode), you can maintain the aspect ratio of the video. (Default: .CENTER_CROP)

        ShopLiveShortform.setResizeModel(option : ShopLiveResizeMode)

        API for Web & SDK connection in a hybrid environment

        With the ShopLiveShortform.BridgeInterface.connect(_webview: WKWebView), you can connect Web and SDK in a hybrid environment.

        ShopLiveShortform.BridgeInterface.connect(webview)

        ShopLiveShortform.Delegate.setDelegate(_ handler: ShopLiveShortformReceiveHandlerDelegate?)

        With the ShopLiveShortform.Delegate.setDelegate(_handler: ShopLiveShortformReceiveHandlerDelegate?), you can exchange messages between Web and SDK in a hybrid environment.

        ShopLiveShortform.ShortsReceiveInterface.setHandler(self)
        class CustomerViewController : UIViewController,  ShopLiveShortformReceiveHandlerDelegate {
    func handleShare(shareUrl: String) {
        // Do something
    }
    func onError(error: Error) {
        // Do something
    }
    
    func onEvent(command: String, payload: String?) {
        // Do something
    }
    
    func onDidDisAppear() {
        // Do something
    }
    
    func onDidAppear() {
        // Do something
    }

    func handleProductItem(shortsId : String, shortsSrn : String, product : ProductData) { 
       // Do something
    }

    func handleProductBanner(shortsId : String, shortsSrn : String, scheme : String, shortsDetail : ShortsDetailData) { 
       // Do something
    }
}

        What's Next