Implement Shortform - Native

[Step 1] Add Code for Integration

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

https://github.com/shoplive/shortform-ios.git
https://github.com/shoplive/common-ios.git

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"))
]

Please delete the cache if installation is failed

Please execute the following command in the terminal to delete the cache.

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

[Step 2] 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

[Step 3] Apply Native Shortform Collection

Apply the desired Shortform Collection

ShopLiveShortformCardTypeView - Vertical Scroll Layout(Large Content Grid)

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 - Vertical Scroll Layout(Small Content Grid)

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 - Horizontal Scroll Layout

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 Configuration

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)

Please 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()

Enabling 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 the 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)

Cell Placeholder Color Setting

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.
  }
}