Skip to main content
Version: 5.2

RecipeCard customization

RecipeCard is one of the most used components, it has three customization states: success, loading & empty

customisation setting​

If you want to fully customize this component we recommend copying the code into your Mealz template configuration. You can remove the code you don't want to overwrite.

MiamTheme.Template {
    recipeCard {
        success {
            // Deprecated you should use catalog and shelf instead
            view = RecipeCardSuccessCustomView()
            catalog {
                view = RecipeCardCatalogSuccessCustomView()
            }
            shelf {
                view = RecipeCardShelfSuccessCustomView()
            }
        }
        loading {
            // Deprecated you should use catalog and shelf instead
            view = RecipeCardLoadingCustomView()
            catalog {
                view = RecipeCardCatalogLoadingCustomView()
            }
            shelf {
                view = RecipeCardShelfLoadingCustomView()
            }
        }
    }
}

Success​

Recipe card success is one of those three states, it's visible when all of the data has been fetched without any error. To create your own recipe card success template you create a class that implements RecipeCardSuccess.

warning

View template is Deprecated you must use catalog and shelf instead

import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccess
import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccessParams

class RecipeCardSuccessCustomView: RecipeCardSuccess {

    @Composable
    override fun Content(params: RecipeCardSuccessParams) {
        // Your custom design here 
    }
}

Success params​

warning

RecipeCardSuccessParams is Deprecated you must use catalog and shelf instead

data class RecipeCardSuccessParams(
    val recipe: Recipe, // full recipe object Deprecated
    val recipeTitle: String, //
    val recipePicture: String,
    val isInShelve: Boolean, //  false if recipe is in our catalog component
    val goToDetail: () -> Unit, // action to trigger navigation to detail
    val guest: MutableStateFlow<Int>, // number of guest on recipe
    val isInCart: Boolean, // true if user have had the recipe to mealz basket
    val isSponsor: Boolean, // true if recipe has a sponsor
    val sponsorLogo: String?, 
    val likeIsEnabled: Boolean //  true if like feature has been enabled in configuration
)

Success catalog​

You can choose to have to differents design for the recipe card in our catalog and in your shelf. Regarding your need you can create two templates or only one implementing both catalog and shelf

import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccessShelf
import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccessShelfParams

class RecipeCardSuccessShelfCustomView: RecipeCardSuccessShelf {

    @Composable
    override fun Content(params: RecipeCardSuccessShelfParams) {
        // Your custom design here 
    }
}

Success catalog params​

data class RecipeCardSuccessCatalogParams (
      val recipeTitle: String, 
      val mealzRecipeId: String, // recipe id in mealz data base
      val recipePicture: String, 
      val recipePrice: Double,
      val recipeIngredients: Map<String,String>, // name of ingredient / ImageURL 
      val goToDetail: () -> Unit, // action to open recipe detail
      val guest: MutableStateFlow<Int>, 
      val isInCart: Boolean, // true if recipe is in cart
      val isSponsor: Boolean, //  true if recipe has a sponsor
      val sponsorLogo: String?,
      val likeIsEnabled: Boolean //  true is like feature has been enabled
){
      val pricePerServe : Double
           get() {
                val guest : Double =  if (guest.value == 0) 1.0 else guest.value.toDouble()
                return   recipePrice / guest
           }
 }

Success shelf​

import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccessShelf
import ai.mealz.sdk.components.recipeCard.success.RecipeCardSuccessShelfParams

class RecipeCardSuccessShelfCustomView: RecipeCardSuccessShelf {

    @Composable
    override fun Content(params: RecipeCardSuccessShelfParams) {
        // Your custom design here 
    }
}

Success shelf params​

data class RecipeCardSuccessShelfParams (
      val recipeTitle: String, 
      val mealzRecipeId: String, // recipe id in mealz data base
      val recipePicture: String, 
      val recipePrice: Double,
      val recipeIngredients: Map<String,String>, // name of ingredient / ImageURL 
      val goToDetail: () -> Unit, // action to open recipe detail
      val guest: MutableStateFlow<Int>, 
      val isInCart: Boolean, // true if recipe is in cart
      val isSponsor: Boolean, //  true if recipe has a sponsor
      val sponsorLogo: String?,
      val likeIsEnabled: Boolean //  true is like feature has been enabled
){
      val pricePerServe : Double
           get() {
                val guest : Double =  if (guest.value == 0) 1.0 else guest.value.toDouble()
                return   recipePrice / guest
           }
 }

Success ressources​

tip

you can replace and reuse string resources if you want to take advantage of our internationalisation system ex : Localisation.recipe.showDetails.localised

Name Ressource IDValue FrValue Eng
showDetailscom_miam_recipe_is_in_cartVoir le détailShow details
addcom_miam_recipe_addAjouter les ingrédientsAdd ingredients
perPersoncom_miam_my_meals_per_person/pers./pers.

RecipeCard Loading​

As for the Success state, the basic Loading view has been deprecated you must use catalog and shelf loading.

import ai.mealz.sdk.components.recipeCard.loading.RecipeCardLoading


class RecipeCardLoadingCustomView: RecipeCardLoading {

    @Composable
    override fun Content() {
        // Your custom design here 
    }
}

Loading catalog​

You can choose to have two different designs for the recipe card in our catalog and in your shelf. Regarding your needs you can create two templates or only one implementing both catalog and shelf loading

import ai.mealz.sdk.components.recipeCard.loading.catalog.RecipeCardLoadingCatalog
import ai.mealz.sdk.components.recipeCard.loading.catalog.RecipeCardLoadingCatalogParams

class RecipeCardLoadingCatalogCustomView:  RecipeCardLoadingCatalog {

    // RecipeCardLoadingCatalogParams is an Object without properties
    @Composable
    override fun Content(params :  RecipeCardLoadingCatalogParams) { 
        // Your custom design here 
    }
}

Loading shelf​

import ai.mealz.sdk.components.recipeCard.loading.shelf.RecipeCardLoadingShelf
import ai.mealz.sdk.components.recipeCard.loading.shelf.RecipeCardLoadingShelfParams

class RecipeCardLoadingShelfCustomView:  RecipeCardLoadingShelf {

    // RecipeCardLoadingShelfParams is an Object without properties
    @Composable
    override fun Content(params :  RecipeCardLoadingShelfParams) { 
        // Your custom design here 
    }
}