Design/net.ikea.skapa.ui.components/PriceModule

PriceModule

@Composable
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)

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
energy

Composable for Energy class.

priceOfferType
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
}
@Composable
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, mergeAllDescendants: Boolean)

Deprecated (with error)

Use function with MergeDescendantsStrategy instead of mergeAllDescendants Boolean

Replace with

PriceModule(productName = productName,productDescription = productDescription,currentPriceParams = currentPriceParams,modifier = modifier,variant = variant,energy = energy,priceOfferType = priceOfferType,priceAddons = priceAddons,secondCurrencyPriceParams = secondCurrencyPriceParams,offerMessage = offerMessage,mergeDescendantsStrategy = if (mergeAllDescendants) MergeDescendantsStrategy.All else MergeDescendantsStrategy.Default)
Content copied to clipboard

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
energy

Composable for Energy class.

priceOfferType
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.

mergeAllDescendants

Use this to opt-out of the built-in logic to group semantic nodes and merge the whole Price module into a single node.

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
}