Skip to main content
Version: 5.6

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:

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:

Order History Feature Constructor

OrderHistoryFeatureConstructor(
baseViews: orderHistoryBaseViews, // or you can leave blank or pass in BaseViews from the Catalog or another Feature
orderHistoryViewOptions: orderHistoryViewOptions,
orderDetailsViewOptions: orderDetailsViewOptions
)

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 mealzOrderHistoryFeature = MealzOrderHistoryFeatureUIKit(
hideTitles: true,
recipeDetailsConstructor: MealzViewConfig.recipeDetailsConfig,
orderHistoryFeatureConstructor: MealzViewConfig.orderHistoryFeatureConstructor
)