ShoppableImage
fun <T> ShoppableImage(imageParams: ShoppableImageBackgroundParams, products: List<ShoppableImageItem<T>>, modifier: Modifier = Modifier, selectedProduct: T? = null, showDots: Boolean = true, shopAllButtonParams: ShopAllButtonParams? = null, failedProductsCallback: (List<Pair<ShoppableImageItem<T>, FailReason>>) -> Unit? = null, onSelected: (T?) -> Unit)
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.
failedProductsCallback
Callback to list product that failed to be rendered.
onSelected
Callback for click on dots.
See also
Samples
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.ShopAllButtonParams
import net.ikea.skapa.ui.components.ShoppableImage
import net.ikea.skapa.ui.components.ShoppableImageBackgroundParams
import net.ikea.skapa.ui.components.ShoppableImageItem
import net.ikea.skapa.ui.components.SkapaAspectRatio
fun main() {
//sampleStart
// 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.avatar_demo_image),
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
}
//sampleEnd
}