Contents x
    Shortform view
      • Print
      Contents

      Shortform view

        • Print
        Article summary

        Integrate with code

        CocoaPods

        Add the below code to Podfile.

        source 'https://github.com/CocoaPods/Specs.git'

    # Match the Version with the Project's Minimum Supported Version
    # Shoplive iOS SDK requires iOS 11.0 or later.
    platform :ios, '11.0'
    use_frameworks!

    # Set the Project Target for Shoplive iOS SDK Installation
    target 'ShortformProj' do
        pod 'ShopliveShortformSDK', '1.5.8'
      	pod 'ShopliveSDKCommon', '1.5.8'
    end

        Swift Package Manager

        Add the following contents to Package Dependencies.

        dependencies: [
    .package(url: "https://github.com/shoplive/shortform-ios", .exact(from: "1.5.8")),
    .package(url: "https://github.com/shoplive/common-ios", .exact(from: "1.5.8"))
]

        Delete the cache if installation is failed

        Execute the following command in the terminal to delete the cache.

        rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm

        Apply AccessKey

        import ShopliveSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
      ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESSKEY") //required
      return true
    }
}

        Access Key

        Access key and secret key can be obtained from Shoplive representative

        Apply Native Shortform Collection

        Apply the desired Shortform Collection.

        ShopLiveShortformCardTypeView

        For Vertical Scroll Layout (Large Content Grid), add the ShopLiveShortformCardTypeView.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.CardTypeViewBuilder()
  
  lazy private var cardTypeView : UIView = {
    let cardTypeView = builder.build(cardViewType: .type1,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return cardTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(cardTypeView)
		//set constraints
    cardTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         cardTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         cardTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         cardTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         cardTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        ShopLiveShortformVerticalTypeView

        For Vertical Scroll Layout (Small Content Grid), add the ShopLiveShortformVerticalTypeView.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var verticalTypeView : UIView = {
    let verticalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .vertical,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return verticalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(verticalTypeView)
    //set constraints
    verticalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         verticalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         verticalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         verticalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         verticalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        ShopLiveShortformHorizontalTypeView

        For Horizontal Scroll Layout, add the ShopLiveShortformHorizontalTypeView.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var horizontalTypeView : UIView = {
    let horizontalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .horizontal,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return horizontalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(horizontalTypeView)
    //set constraints
    horizontalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         horizontalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         horizontalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         horizontalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         horizontalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        View settings

        When constructing a View in a list, you can set the following properties using a builder

        View Activation

        Activate the view using a builder and load the data by invoking submit() function. (If submit() function is not called, the data will not be loaded, and the list view will not be configured on the screen.)

        builder.submit()

        Card View type configuration

        Configure card-type layout

        • .type0: No product card on the collection view

        • .type1: Square product card on the collection view

        • .type2: Circle product card on the collection view

        //.type0 .type1 , .type2
builder.setCardViewType(type : ShopLiveShortform.CardTypeView)

        Refer to the following example:

        • Type0

        • Type1

        • Type2

        Tag-Based Collection View

        You can search by HashTag:

        • ShopLiveTagSearchOperator.OR: HashTag unified search (Default)

        • ShopLiveTagSearchOperator.AND: HashTag cross-search

        builder.setHashTags(tags :[String]?, tagSearchOperator : ShopLiveTagSearchOperator?)

        Brand-Based Collection View

        You can search by brand (either brand name or identifier)

        builder.setBrands(brands : [String]?)

        Shuffled Collection View

        Display data in random order or by most recent time.

        • enableShuffle(): Display random data

        • disableShuffle() Display data by most recent time

        builder.enableShuffle() 
builder.disableShuffle()

        Enable Snap effect

        Use snap effects to highlight individual content.

        • enableSnap(): Enable snap effect

        • disableSnap(): Disable snap effect (Default)

        builder.enableSnap() 
builder.disableSnap()

        Shortform playback range (Horizontal Layout Only)

        You can select which cells to render in the horizontal scroll.

        • ShopLiveShortform.PlayableType.First: Only the leftmost cell in the visible area is rendered. (Default)

        • ShopLiveShortform.PlayableType.Center: Only the center cell in the visible area is rendered.

        • ShopLiveShortform.PlayableType.All: Entire cell in the visible area is rendered.

        builder.setPlayableType(type : ShopLiveShortform.PlayableType)

        Configure video autoplay effects

        Configure whether to autoplay videos in cells.

        • enablePlayVideos(): Enable autoplay videos in cells. (Default)

        • disablePlayVideos(): Disable autoplay videos in cells.

        builder.enablePlayVideos()
builder.disablePlayVideos()

        Scroll to the top.

        Go to the top of the page.

        builder.scrollToTop()

        Set videos to play only on Wi-Fi

        Configure video playback to occur only when connected to Wi-Fi:

        • true: Playback only when connected to Wi-Fi

        • false: Playback on any network (Default)

        builder.setPlayOnlyWifi(isEnabled : Bool)

        Set item spacing

        Configure the spacing between items

        builder.setCellSpacing(spacing : CGFloat)

        Data refresh

        Refresh the data

        builder.reloadItems()

        Hide view count

        Hide the view indicating the number of views (Default: visible)

        builder.setVisibleViewCount(isVisible : Bool)

        Hide product count

        Hide the view indicating the number of products (Default: visible)

        builder.setVisibleProductCount(isVisible : Bool)

        Hide brand

        Hide the brand view (Default: visible)

        builder.setVisibleBrand(isVisible : Bool)

        Hide title

        Hide title (Default: visible)

        builder.setVisibleTitle(isVisible : Bool)

        Hide description

        Hide the description (Default: visible)

        builder.setVisibleDescription(isVisible : Bool)

        Set the corner radius of cells

        Configure the cornerRadius of cells (Default: 6px)

        builder.setCellCornerRadius(radius : CGFloat)

        Set cell placeholder color

        Configure the default value for cell placeholders (Default: CBCBCB)

        builder.setCellBackgroundColor(color: UIColor)

        Screen rotation event propagation

        You can call the builder?.notifyViewRotated() function when the superview of the list view is rotated to redraw its layout

        // Forward Screen Rotation Events to List View when ViewController, UIWindow is rotated
builder.notifyViewRotated()

        ListViewDelegate settings

        You can receive and process notifications from its list view through the ShopLiveShortformListViewDelegate.

        ShopLiveShortformListViewDelegate consists of the following 1 function.

        protocol ShopLiveShortformListViewDelegate : NSObject  {
    func onListViewError(error : Error)
}

//Adopting a delegate
builder.build(...listViewDelegate : self,...).getView()

        Error handling function

        You can handle errors occurring in the list view through onListViewError(error: Error)

        class ViewController : ShopLiveShortformListViewDelegate { 
  func onListViewError(error: Error) { 
    //You can handle Api errors for the list view as well as AVPlayer errors in the list view.
  }
}

        What's Next