PriceModule
fun PriceModule(productName: String, productDescription: String, currentPriceParams: PriceParams, modifier: Modifier = Modifier, variant: PriceModuleVariant = PriceModuleVariant.Regular(size = PriceModuleSizeRegular.Medium, placeholder = false), energy: @Composable () -> Unit? = null, priceOfferType: PriceOfferType = PriceOfferType.Regular, priceAddons: List<String>? = null, secondCurrencyPriceParams: SecondCurrencyPriceParams? = null, offerMessage: OfferMessageItem? = null, edsMessage: String? = null, mergeDescendantsStrategy: MergeDescendantsStrategy = MergeDescendantsStrategy.Default)(source)
Price Module communicates product information and price for different scenarios.
PriceModuleVariant.Regular (Default) is great for displaying multiple products side by side. Our prices are displayed boldly, and it’s easy to get key product information at a glance.
PriceModuleVariant.List is best suited for vertical lists. While the price is smaller in this variant, it’s still easy to see at a glance. This variant could be a good fit when users are managing a group of products.
Example of usage:
Parameters
productName
Product name, should be capitalised, may include localized product name.
productDescription
A short product description, or product type.
currentPriceParams
Parameters for Current Price.
modifier
Modifier to be applied to the PriceModule.
variant
PriceModuleVariant per above.
energy
Composable for Energy class.
priceAddons
List of strings for PriceAddons.
secondCurrencyPriceParams
Parameters Second price. This can be used if there is a need for providing a secondary currency.
offerMessage
Custom field to use for presenting an offer message for the product.
edsMessage
String used for presenting an End-Date-Sale (EDS) message for the product.
mergeDescendantsStrategy
Use this to customize merging semantic nodes.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CurrencyPosition
import net.ikea.skapa.ui.components.DecimalSign
import net.ikea.skapa.ui.components.OfferMessageItem
import net.ikea.skapa.ui.components.OfferMessageVariant
import net.ikea.skapa.ui.components.PriceModule
import net.ikea.skapa.ui.components.PriceModuleSizeList
import net.ikea.skapa.ui.components.PriceModuleSizeRegular
import net.ikea.skapa.ui.components.PriceModuleVariant
import net.ikea.skapa.ui.components.PriceOfferType
import net.ikea.skapa.ui.components.PriceParams
import java.util.*
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
val productName = "PRODUCT NAME"
val productDescription = "Product description"
val comparisonParams = PriceParams(
"15",
"00",
Currency.getInstance("EUR").symbol,
DecimalSign.Comma,
currencyPosition = CurrencyPosition.Trailing,
captionPrefix = "Price was:"
)
val priceParams = PriceParams(
"10",
"00",
Currency.getInstance("EUR").symbol,
DecimalSign.Comma,
currencyPosition = CurrencyPosition.Trailing,
captionPrefix = "Price:"
)
Column(
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space150),
modifier = Modifier
.padding(horizontal = 16.dp)
.verticalScroll(rememberScrollState())
) {
val regularVariant = PriceModuleVariant.Regular(PriceModuleSizeRegular.Medium, false)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
offerMessage = OfferMessageItem("IKEA Family offer 20% off", variant = OfferMessageVariant.IkeaFamily)
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
priceOfferType = PriceOfferType.BTI
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
priceOfferType = PriceOfferType.New("New")
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
priceOfferType = PriceOfferType.NewLowerPrice("New lower price"),
priceAddons = listOf("Previous price: 00,00€")
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
priceOfferType = PriceOfferType.IkeaFamilyPrice("IKEA Family price"),
priceAddons = listOf(
"Regular price: 00,00€", "Price valid 04 Oct - 28 Nov or while supply lasts"
)
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariant,
priceOfferType = PriceOfferType.TimeRestrictedOffer(comparisonParams),
edsMessage = "Last chance to buy",
priceAddons = listOf(
"Regular price: 00,00€", "Price valid 04 Oct - 28 Nov or while supply lasts"
)
)
// Specify "Complete price" if want to use it to present a price for a budle of products.
val regularVariantCompletePrice = PriceModuleVariant.Regular(PriceModuleSizeRegular.Medium, false, "Complete price")
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = regularVariantCompletePrice
)
val listVariant = PriceModuleVariant.List(PriceModuleSizeList.Small)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = listVariant,
priceOfferType = PriceOfferType.IkeaFamilyPrice("IKEA Family price"),
priceAddons = listOf(
"Regular price: 00,00€", "Price valid 04 Oct - 28 Nov or while supply lasts"
)
)
PriceModule(
productName = productName,
productDescription = productDescription,
currentPriceParams = priceParams,
variant = listVariant,
priceOfferType = PriceOfferType.TimeRestrictedOffer(comparisonParams),
priceAddons = listOf(
"Regular price: 00,00€", "Price valid 04 Oct - 28 Nov or while supply lasts"
)
)
}
}
//sampleEnd
}