Shoppable Videos
BAYA feature allows your audience to buy while watching shoppable videos of your products. With this feature enabled, a user can browse products, scroll through available options ( e.g colors, sizes, etc ) and make a purchase while watching the video. At present, the SDK doesn't provide the payment solution but it provides the hooks for your app to manage the shopping cart as well as the checkout process.
Android SDK provides the user interface to display the product list and handles the user interactions to browse products and add an item to the shopping cart. Currently, we don't provide a way to customize UX/UI except for the '
Add to Cart' button. You can customize the look and feel of the Add to cart button by defining style FWAddToCartButtonStyle in your app's style.xml. Please note that the style name needs to be exactly as specified. Android SDK does not manage the shopping cart. As the host application, it is up to you to manage and maintain the shopping cart. The SDK provides callbacks when the
Add to cart button is clicked or when the user wants to view the shopping cart. Please refer to the code block below. Kotlin
Java
/**
* Implement the interface to receive callback when a user actions results
* in change to the shopping cart or when the user clicks on the cart to
* view cart details
*/
interface CartInterface {
/**
* Called when an item is added or removed from the cart.
* @param productId a unique identifier of the product
* @param unitId a unique item identifier .. an item is a product
* with specific attributes such as color, size etc
* @param quantity number of items added
*/
fun updateCart(productId : String, unitId: String, quantity: Int )
/**
* Called when a user clicks on the cart icon. Since the SDK doesn't
* manage cart and checkout process, the expectation is that the host
* app will launch an activity to display cart and begin the checkout
* process.
* ( Please note that , when you launch cart/checkout activity,
* disable the transition animation )
*/
fun cartClicked(activity: Activity) { }
}
Baya.cartInterface = object: Baya.CartInterface {
override fun updateCart(
productId: String,
unitId: String,
quantity: Int
) {
//You may want to asychronously update the local as well as remote cart
// Once the cart is updated, you MUST notify the SDK of the status
// You must update the SDK on the UI thread.
Baya.updateCartStatus(UpdateCartStatus.Success(
"Your message that will be displayed to the user", unitId
)
)
}
override fun cartClicked(activity: Activity) {
val checkoutIntent = Intent(activity,CheckoutActivity::class.java)
checkoutIntent.flags = Intent.FLAG_ACTIVITY_NO_ANIMATION
activity.startActivity(checkoutIntent)
overridePendingTransition(0, 0)
}
/** Implement the interface to receive callback when a user actions results
* in change to the shopping cart or when the user clicks on the cart to
* view cart details
*/
Baya.INSTANCE.setCartInterface(new Baya.CartInterface() {
/**
* Called when an item is added or removed from the cart.
* @param productId a unique identifier of the product
* @param unitId a unique item identifier .. an item is a product
* with specific attributes such as color, size etc
* @param quantity number of items added
*/
@Override
public void updateCart(@NonNull Activity activity, @NonNull String productId, @NonNull String unitId, int quantity) {
//You may want to asychronously update the local as well as remote cart
// Once the cart is updated, you MUST notify the SDK of the status
// You must update the SDK on the UI thread.
Baya.INSTANCE.updateCartStatus
(new UpdateCartStatus.Success
("Your message that will be displayed to the user", unitId));
}
/**
* Called when a user clicks on the cart icon. Since the SDK doesn't
* manage cart and checkout process, the expectation is that the host
* app will launch an activity to display cart and begin the checkout
* process.
* ( Please note that , when you launch cart/checkout activity,
* disable the transition animation )
*/
@Override
public void cartClicked(@NonNull Activity activity) {
// Add the Intent to Open Cart/Checkout Activity here
overridePendingTransition(0,0);
}
});
When you update the cart at your end, you must notify the SDK if the cart was updated successfully or the update failed. The SDK will appropriately notify the user about it. Use the updateCartStatus api for communicating the status.
Object Baya {
/**
* When user adds or removes the item, a callback updateCart
* is called. The host app should appropriately modify its copy
* of the cart and provide user the feedback. Use the API to
* provide feedback
* @param status Loading, Success, or Error
* Use loading to indicate updating the cart is in progress
* Use Success to indicate that cart has been successfully updated.
* You must provide the success message, this will be displayed to the user
* e.g Item has been added to the cart
* Use Error to indicate error. You must pass the error message
* e.g Failed to update the cart, please try again later.
*/
fun updateCartStatus(status: UpdateCartStatus) {
_updateCartStatus.value = status
}
}
The SDK provides product callbacks when a video is associated with the product(s).
Kotlin
Java
interface ProductInterface {
/**
* Called when the user swipes to watch the video associated with the product(s).
* Application has an opportunity to modify product info.
*
* @param videoId Unique video id identifying the video
* @param products An object that opens to the host app to update the product
* info by parsing a list of products.
*
*/
fun hydrateProduct(videoId: String, products: List<Product>)
/**
* Called when the user clicks on the product web link.
* Application has an opportunity to handle the click itself
* If the click is not handled, SDK will open the productWebUrl in the webview
* @param productId unique id identifying your product
* @param productWebUrl product url that will be opened in the webview
* @return true if the application handles the displayProductInfo false otherwise
*
*/
fun displayProductInfo(productId: String, unitId: String, productWebUrl: String?) : Boolean {
return false
}
}
Baya.productInterface = object: Baya.ProductInterface {
override fun hydrateProduct(videoId: String, productBuilderList: List<ProductBuilder>) {
//Edit your product info here when receiving the callback.
//See examples from the below section.
}
override fun displayProductInfo(
productId: String,
unitId: String,
productWebUrl: String?
): Boolean {
//Get this callback when the user clicks on the product web link button,
//Return true if the application want to skip SDK product web view.
return false
}
}
UPDATE the existing product: Update the existing product name, description, price and product option sand option unit options.
Baya.productInterface = object: Baya.ProductInterface {
override fun hydrateProducts(videoId: String, productBuilderList: List<ProductBuilder>) {
launch {
delay(5000) //It's an estimate time duration to simulate the host app takes
//how much time to get the product info from the host app product portal.
//In the real use case, the host app should skip make a call to the host app product portal
//to get the product info and do async call to modify the product info via productBuilder.
val list: List<ProductBuilder> = productBuilderList.map { productBuilder ->
//Find the product from a list of products
val index = productBuilderList.indexOf(productBuilder)
//In this example, the host app wants to change the third product from the prdouct list.
//Then use "index == 2" to modify your product info.
if (index == 2) {
productBuilder.copy(
//Change the product name
name = "new product name",
//Change the description
description = "This is modified description from the host app.",
units = productBuilder.units?.map { productBuilderUnit ->
productBuilderUnit.copy(
//Change the price and currency country code
price = productBuilderUnit.price?.copy(
amount = "200.15",
currencyCode = "USD",
),
options = productBuilderUnit.options?.map { productBuilderUnitOption ->
var name = productBuilderUnitOption.name
var value = productBuilderUnitOption.value
//Change the product option from "Frame Color" to "Frame Color1"
if (name.equals("Frame Color")) {
name = "Frame Color1"
//Change the 1st product unit option from "Black" to "Black1"
// and the 2nd product unit option from "Red" to "Red1".
if (value.equals("Black")) {
value = "Black1"
} else if (value.equals("Red")) {
value = "Red1"
}
}
//Change the other product option from "Color" to "Color1"
else if (name.equals("Color")) {
name = "Color1"
//Change the product unit option from "Red" to "Red1".
if (value.equals("Red")) {
value = "Red1"
}
}
//Update to product unit option
productBuilderUnitOption.copy(
name = name,
value = value
)
}
)
}
)
} else {
productBuilder.copy()
}
}
Baya.updateProductsComplete(videoId, list)
}
}
override fun displayProductInfo(
productId: String,
unitId: String,
productWebUrl: String?
): Boolean {
//Get this callback when the user clicks on the product web link button,
//Return true if the application want to skip SDK product web view.
return false
}
}
Baya.INSTANCE.setProductInterface(new Baya.ProductInterface() {
/**
* Called when the user swipes to watch the video associated with the product(s).
* Application has an opportunity to modify product info.
*
* @param videoId Unique video id identifying the video
* @param products An object that opens to the host app to update the product
* info by parsing a list of products.
*
*/
@Override
public void hydrateProducts(@NonNull String videoId, @NonNull List<Product> products) {
//Edit your product info here when receiving the callback.
}
/**
* Called when the user clicks on the product web link.
* Application has an opportunity to handle the click itself
* If the click is not handled, SDK will open the productWebUrl in the webview
* @param productId unique id identifying your product
* @param productWebUrl product url that will be opened in the webview
* @return true if the application handles the displayProductInfo false otherwise
*
*/
@Override
public boolean displayProductInfo(@NonNull String productId, @NonNull String unitId, @Nullable String productWebUrl) {
//Get this callback when the user clicks on the product web link button,
//Return true if the application want to skip SDK product web view.
return false;
}
});
Last modified 10mo ago