added
[iOS SDK] Added PXLWidgetView having API, analytics, list , grid
over 3 years ago by Sungjun Hong
Release note
A new view: PXLWidgetView (similar to our web Widget)
- automatically fire APIs[api/v2/albums/from_sku, api/v2/albums/{album_id}/photos] to get and display photos
- automatically fire Analytics[openedWidget, widgetVisible]
- provide grid (2 columns) and list layouts
UI Options
For both Grid and List: load more UI (customizable color, font, text, height of the cell, padding)
List
- turn auto video playing on/off: play a video located at the top of the list
Grid
- Line Size between items
- Header
- Image URL
- Customizable text
Grid Mode | ListMode |
---|---|
Example
#!swift Your View controller
class WidgetExampleViewController: UIViewController {
static func getInstance() -> WidgetExampleViewController {
let vc = WidgetExampleViewController(nibName: "EmptyViewController", bundle: Bundle.main)
return vc
}
var widgetView = PXLWidgetView()
override func viewDidLoad() {
super.viewDidLoad()
widgetView.delegate = self
view.addSubview(widgetView)
if let pixleeCredentials = try? PixleeCredentials.create() {
let albumId = pixleeCredentials.albumId
let album = PXLAlbum(identifier: albumId)
album.filterOptions = PXLAlbumFilterOptions(hasPermission: true, hasProduct: true)
album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
album.perPage = 30
widgetView.searchingAlbum = album
}
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
widgetView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
var videoCell: PXLGridViewCell?
}
// MARK: - Photo's click-event listeners
extension WidgetViewController: PXLPhotoViewDelegate {
public func onPhotoButtonClicked(photo: PXLPhoto) {
print("Action tapped \(photo.id)")
openPhotoProduct(photo: photo)
}
public func onPhotoClicked(photo: PXLPhoto) {
print("Photo Clicked \(photo.id)")
openPhotoProduct(photo: photo)
}
func openPhotoProduct(photo: PXLPhoto) {
present(PhotoProductListDemoViewController.getInstance(photo), animated: false, completion: nil)
}
}
// MARK: Widget's UI settings and scroll events
extension WidgetViewController: PXLWidgetViewDelegate {
func setWidgetSpec() -> WidgetSpec {
// A example of List
/*WidgetSpec.list(.init(cellHeight: 350,
isVideoMutted: true,
autoVideoPlayEnabled: true,
loadMore: .init(cellHeight: 100.0,
cellPadding: 10.0,
text: "LoadMore",
textColor: UIColor.darkGray,
textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
loadingStyle: .gray)))*/
// A example of Grid
WidgetSpec.grid(
.init(
cellHeight: 350,
cellPadding: 4,
loadMore: .init(cellHeight: 100.0,
cellPadding: 10.0,
text: "LoadMore",
textColor: UIColor.darkGray,
textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
loadingStyle: .gray),
header: .image(.remotePath(.init(headerHeight: 200,
headerContentMode: .scaleAspectFill,
headerGifUrl: "https://media0.giphy.com/media/CxQw7Rc4Fx4OBNBLa8/giphy.webp")))))
}
func setWidgetType() -> String {
"replace_this_with_yours"
}
func setupPhotoCell(cell: PXLGridViewCell, photo: PXLPhoto) {
if photo.isVideo {
videoCell = cell
}
// Example(all elements) : cell.setupCell(photo: photo, title: "Title", subtitle: "subtitle", buttonTitle: "Button", configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
cell.setupCell(photo: photo, title: nil, subtitle: nil, buttonTitle: nil, configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
// print("scrollViewDidScroll \(scrollView)")
}
}