ShoppableImage
fun <T> ShoppableImage(imageParams: ShoppableImageBackgroundParams, products: List<ShoppableImageItem<T>>, modifier: Modifier = Modifier, selectedProduct: T? = null, showDots: Boolean = true, shopAllButtonParams: ShopAllButtonParams? = null, onSelected: (T?) -> Unit)(source)
Shoppable image is an image with markers that showcases and links to IKEA products pictured within.
Parameters
imageParams
Used to handle the background image and its onClick
products
Products to be shown. A combination of Tag content and Dot position
modifier
The component Modifier.
selectedProduct
Generic identifier for a selected product.
showDots
Visibility of dots. Use background image onclick to toggle this.
shopAllButtonParams
Params for the 'Shop all' button.
onSelected
Callback for click on dots.
Type Parameters
T
The type of the identifier used for products.
See also
Samples
// Dots visible
var showDots by remember { mutableStateOf(true) }
var selectedProductKey by remember { mutableStateOf<String?>("c") }
val backgroundImageOnClick = {
// Toggle dots/tags or custom click action background image which will override toggling the Shoppable image UI.
showDots = !showDots
}
// Selected product. This will focus a dot and have the tag visible
ShoppableImage(
imageParams = ShoppableImageBackgroundParams(
painter = painterResource(R.drawable.ic_avatar_person),
contentDescription = "image",
aspectRatio = SkapaAspectRatio.Ratio3by4,
onClick = backgroundImageOnClick
),
products = listOf(
ShoppableImageItem(
key = "a",
xCoordinate = 0.7f,
yCoordinate = 0.3f,
content = @Composable {
// Use Price Module as content
Text("PRODUCT A")
}
) {
// Add click action for product tag, eg. open product page
},
ShoppableImageItem(
key = "b",
xCoordinate = 0.75f,
yCoordinate = 0.8f,
content = @Composable {
// Use Price Module as content
Text("PRODUCT B")
}
) {
// Add click action for product tag, eg. open product page
},
ShoppableImageItem(
key = "c",
xCoordinate = 0.3f,
yCoordinate = 0.6f,
content = @Composable {
// Use Price Module as content
Text("PRODUCT C")
}
) {
// Add click action for product tag, eg. open product page
}
),
modifier = Modifier,
selectedProduct = selectedProductKey,
showDots = showDots,
shopAllButtonParams = ShopAllButtonParams("Shop all", onClick = { /* Action for Shop all button */ })
) { keyClicked ->
// When a dot is clicked, set the button as `selected` to show the tag
selectedProductKey = keyClicked
}Content copied to clipboard