Skip to main content
Version: 5.7

Customize Views

Each page & template is fully customizable to your brand's design. All View Options are optional, there are Mealz defaults for each view.

info

To understand how to create a custom component, you can read here.

We recommend putting all of your custom ViewOptions into a custom class. In our sample implementations, we have one class MealzViewConfig, however you may find it more maintainable to have multiple classes.

import MealziOSSDK

struct MealzViewConfig {
// the below View Options go here
}

Base Views​

View Options​

Base Views - BasePageViewParameters​

import MealziOSSDK

static let baseViews = BasePageViewParameters(
    loading: TypeSafeLoading(/* your new view*/),
    empty: TypeSafeEmpty(/* your new view*/),
    background: TypeSafeBackground(/* your new view*/)
)

Components:

Favorites Options​

View Options​

Favorites - FavoritesViewOptions​

import MealziOSSDK

static let favoritesViewOptions = FavoritesViewOptions(
    title: TypeSafeBaseTitle(/* your new view*/),
    recipeCard: TypeSafeCatalogRecipeCard(/* your new view*/),
    recipeCardLoading: TypeSafeRecipeCardLoading(/* your new view*/)
)

Components:

Order History Options​

View Options​

Order History - OrderHistoryViewOptions​

import MealziOSSDK

static let orderHistoryViewOptions = OrderHistoryViewOptions(
    searchBar: TypeSafeSearch(/* your new view */),
    previousOrderCard = TypeSafePreviousOrderCard(/* your new view */)
)

Components:

Order Details - OrderDetailsViewOptions​

import MealziOSSDK

static let orderDetailsViewOptions = OrderDetailsViewOptions(
    orderDetailsHeader: TypeSafeBaseHeader(/* your new view */),
    orderDetailsRecipeCard = TypeSafeOrderDetailsRecipeCard(/* your new view */)
)

Components:

My Meals Options​

View Options​

MyMeals - MyMealsViewOptions​

import MealziOSSDK

static let myMealsViewOptions = MyMealsViewOptions(
    recipeCard: TypeSafeMyMealRecipeCard(/* your new view*/),
    recipeCardLoading: TypeSafeRecipeCardLoading(/* your new view*/)
)

Protocols:

My Space Options​

View Options​

Order Details - OrderDetailsViewOptions​

import MealziOSSDK

static let orderDetailsViewOptions = OrderDetailsViewOptions(
    mySpaceSelectedControl: TypeSafeMySpaceSelectedControl(/* your new view*/),
    mySpaceHeader: TypeSafeBaseHeader(/* your new view*/),
    mealsInBasketButtonSuccess: TypeSafeMealsInBasketButtonSuccess(/* your new view*/),
    mealsInBasketButtonEmpty: TypeSafeEmpty(/* your new view*/)
)

Components:

My Space Feature Constructor​

MySpaceFeatureConstructor(
    baseViews: mySpaceBaseViews, // or you can leave blank or pass in BaseViews from the Catalog or another Feature
    mySpaceViewOptions: mySpaceViewOptions,
    favoritesViewOptions: favoritesViewOptions,
    orderHistoryViewOptions: orderHistoryViewOptions,
    orderDetailsViewOptions: orderDetailsViewOptions,
    myMealsViewOptions: myMealsViewOptions
)

Recipe Details Options​

View Options​

Recipe Details - RecipeDetailsViewOptions​

import MealziOSSDK

static let recipeDetailsViewOptions = RecipeDetailsViewOptions(
    floatingHeader: TypeSafeRecipeDetailsFloatingHeader(/* your new view*/),
    header: TypeSafeRecipeDetailsHeader(/* your new view*/),
    tags: TypeSafeRecipeDetailsTags(/* your new view*/),
    sponsor: TypeSafeRecipeDetailsSponsor(/* your new view*/),
    selectedControl: TypeSafeRecipeDetailsSelectedControl(/* your new view*/),
    ingredients: TypeSafeRecipeDetailsIngredients(/* your new view*/),
    steps: TypeSafeRecipeDetailsSteps(/* your new view*/),
    footer: TypeSafeRecipeDetailsFooter(/* your new view*/),
    ingredientsAtHomeToggleButton: TypeSafeBaseButton(/* your new view*/),
    unavailableIngredientsToggleButton: TypeSafeBaseButton(/* your new view*/),
    ingredientsAtHome: TypeSafeNotInBasketProduct(/* your new view*/),
    unavailableIngredients: TypeSafeNotInBasketProduct(/* your new view*/)
)

Components:

Products - RecipeDetailsProductViewOptions​

import MealziOSSDK

static let recipeDetailsProductViewOptions = RecipeDetailsProductViewOptions(
    ignoredProduct = TypeSafeRecipeDetailsIgnoredProduct(/* your new view*/),
    unaddedProduct = TypeSafeRecipeDetailsUnaddedProduct(/* your new view*/),
    addedProduct = TypeSafeRecipeDetailsAddedProduct(/* your new view*/),
    loadingProduct = TypeSafeLoading(/* your new view*/)
)

Components:

Item Selector - ItemSelectorViewOptions​

import MealziOSSDK

static let itemSelectorViewOptions = ItemSelectorViewOptions(
    searchBar = TypeSafeSearch(/* your new view*/),
    title = TypeSafeBaseTitle(/* your new view*/),
    selectedProduct = TypeSafeItemSelectorSelectedProduct(/* your new view*/),
    productOptions = TypeSafeItemSelectorOptionProducts(/* your new view*/),
    noResults = TypeSafeItemSelectorNoResults(/* your new view*/)
)

Protocols:

Recipe Details Constructor​

RecipeDetailsFeatureConstructor(
    baseViews: recipeDetailsBaseViews, // or you can pass in BaseViews from the Catalog or another Feature
    recipeDetailsViewOptions: recipeDetailsViewOptions,
    recipeDetailsProductViewOptions: recipeDetailsProductViewOptions,
    itemSelectorViewOptions: itemSelectorViewOptions
)

Putting it All Together​

import MealziOSSDK

public let mealzMySpaceFeature = MealzMySpaceFeatureUIKit(
    hideTitles: true,
    recipeDetailsConstructor: MealzViewConfig.recipeDetailsConfig,
    mySpaceFeatureConstructor: MealzViewConfig.mySpaceFeatureConstructor,
    navigateToCatalog: { // navigate to Mealz Catalog Feature },
    navigateToClientBasket: { // optional nav to the client basket on MyMeals page }
)