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
import MealzUIiOSSDK
import MealzNaviOSSDK

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

Base Views

View Options

Base Views - BasePageViewParameters

import MealzUIiOSSDK
import MealziOSSDK

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

Protocols:

• LoadingProtocol
• EmptyProtocol
• BackgroundProtocol

Catalog Options

View Options

Catalog View - CatalogViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let catalogViewOptions = CatalogViewOptions(
    catalogToolbar: TypeSafeCatalogToolbar(/* your new view*/),
    resultsToolbar: TypeSafeCatalogToolbar(/* your new view*/),
    mealPlannerCTA: TypeSafeMealPlannerCTA(/* your new view*/),
    mealsInBasketButtonSuccess: TypeSafeMealsInBasketButtonSuccess(/* your new view*/),
    mealsInBasketButtonEmpty: TypeSafeEmpty(/* your new view*/)
)

Protocols:

• CatalogToolbarProtocol
• MealPlannerCTAProtocol
• MealsInBasketButtonSuccessProtocol
• EmptyProtocol

Catalog Recipes List - CatalogRecipesListViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let recipesListViewOptions = CatalogRecipesListViewOptions(
    recipeCard: TypeSafeCatalogRecipeCard(/* your new view*/),
    recipeCardLoading: TypeSafeRecipeCardLoading(/* your new view*/),
    title: TypeSafeBaseTitle(/* your new view*/),
    noResults: TypeSafeCatalogRecipesListNoResults(/* your new view*/),
    loading: TypeSafeLoading(/* your new view*/)
)

Protocols:

• CatalogRecipeCardProtocol
• RecipeCardLoadingProtocol
• BaseTitleProtocol
• CatalogRecipesListNoResultsProtocol
• LoadingProtocol

Package Row - CatalogPackageRowViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let packageRowViewOptions = CatalogPackageRowViewOptions(
    callToAction: TypeSafeCatalogPackageCTA(/* your new view*/),
    recipeCard: TypeSafeCatalogRecipeCard(/* your new view*/),
    recipeCardLoading: TypeSafeRecipeCardLoading(/* your new view*/)
)

Protocols:

• CatalogPackageCTAProtocol
• CatalogRecipeCardProtocol
• RecipeCardLoadingProtocol

Search - CatalogSearchViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let catalogSearchViewOptions = CatalogSearchViewOptions(
    search: TypeSafeSearch(/* your new view*/)
)

Protocols:

• SearchProtocol

Preferences - PreferencesViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let preferencesViewOptions = PreferencesViewOptions(
    guestSection: TypeSafePreferencesGuest(/* your new view*/),
    dietSection: TypeSafePreferencesDiet(/* your new view*/),
    ingredientsSection: TypeSafePreferencesIngredients(/* your new view*/),
    equipmentSection: TypeSafePreferencesEquipment(/* your new view*/),
    footer: TypeSafePreferencesFooter(/* your new view*/)
)

Protocols:

• PreferencesGuestProtocol
• PreferencesDietProtocol
• PreferencesIngredientsProtocol
• PreferencesEquipmentProtocol
• PreferencesFooterProtocol

Preferences Search - PreferencesSearchViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let preferencesSearchViewOptions = PreferencesSearchViewOptions(
    search: TypeSafeSearch(/* your new view*/),
    tagButton: TypeSafeBaseButton(/* your new view*/)
)

Protocols:

• SearchProtocol
• BaseButtonProtocol

Filters - FiltersViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let filtersViewOptions = FiltersViewOptions(
    header: TypeSafeFiltersHeader(/* your new view*/),
    callToAction: TypeSafeFiltersCTA(/* your new view*/),
    section: TypeSafeFiltersSection(/* your new view*/),
    background: TypeSafeBackground(/* your new view*/)
)

Protocols:

• FiltersHeaderProtocol
• FiltersCTAProtocol
• FiltersSectionProtocol
• BackgroundProtocol

Catalog Recipes List Grid Config

import MealzUIModuleIOS
import MiamIOSFramework

static let recipesListGridConfig = CatalogRecipesListGridConfig(
    numberOfColumns: 2, 
    spacing: CGSize(width: 4, height: 4),
    recipeCardDimensions: CGSize(width: 300, height: 180),
    recipeCardFillMaxWidth: true // if set to true, the width set above is ignored & it will take all the available space
)

Catalog Feature Constructor

CatalogFeatureConstructor(
    useMealPlanner: useMealPlanner, // if you'd like to use the meal planner feature
    usesPreferences: Bool = true, // you can optionally turn off preferences (vegetarian, equipment, etc)
    baseViews: baseViews,
    catalogViewOptions: catalogViewOptions,
    recipesListViewOptions: recipesListViewOptions,
    packageRowViewOptions: packageRowViewOptions,
    catalogSearchViewOptions: catalogSearchViewOptions,
    filtersViewOptions: filtersViewOptions,
    preferencesViewOptions: preferencesViewOptions,
    preferencesSearchViewOptions: preferencesSearchViewOptions,
    catalogViewGridConfig: recipesListGridConfig, // these can be different
    catalogResultsGridConfig: recipesListGridConfig // these can be different
)

My Meals Options

View Options

MyMeals - MyMealsViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

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

Protocols:

• MyMealRecipeCardProtocol
• RecipeCardLoadingProtocol

My Meals Grid Config - 'myMealsRecipesListGridConfig'

import MealzUIModuleIOS
import MiamIOSFramework

static let myMealsDefaultRecipesListGridConfig = CatalogRecipesListGridConfig(
    numberOfColumns: 1, 
    recipeCardDimensions: CGSize(width: 300, height: 180)
)

Recipe Details Options

View Options

Recipe Details - RecipeDetailsViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

static let recipeDetailsViewOptions = RecipeDetailsViewOptions(
    header = TypeSafeRecipeDetailsHeader(/* 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*/)
)

Protocols:

• RecipeDetailsHeaderProtocol
• RecipeDetailsSponsorProtocol
• RecipeDetailsSelectedControlProtocol
• RecipeDetailsIngredientsProtocol
• RecipeDetailsStepsProtocol
• RecipeDetailsFooterProtocol
• BaseButtonProtocol
• NotInBasketProductProtocol

Products - RecipeDetailsProductViewOptions

import MealzUIModuleIOS
import MiamIOSFramework

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

Protocols:

• RecipeDetailsIgnoredProductProtocol
• RecipeDetailsUnaddedProductProtocol
• RecipeDetailsAddedProductProtocol
• LoadingProtocol

Item Selector - ItemSelectorViewOptions

import MealziOSSDK
import MealzUIiOSSDK

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:

• SearchProtocol
• BaseTitleProtocol
• ItemSelectorSelectedProductProtocol
• ItemSelectorOptionProductsProtocol
• ItemSelectorNoResultsProtocol

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

UIKit

import MealzNavModuleIOS

public let mealzCatalogFeature = MealzCatalogFeatureUIKit(
    recipeDetailsConstructor: MealzViewConfig.recipeDetailsConfig,
    catalogFeatureConstructor: MealzViewConfig.catalogConfig,
    myMealsViewOptions: MealzViewConfig.myMealsView,
    myMealsRecipesListGridConfig: MealzViewConfig.myMealsGridConfig
)

SwiftUI

import MealzNavModuleIOS

MealzCatalogFeatureSwiftUI(
    hideTitles: Bool = false, // hide the titles on the top navigation bar
    catalogId: String? = nil, // optionally pass in a catalog ID
    categoryTitle: String? = nil, // with a Catagory Title
    recipeDetailsConstructor: recipeDetailsConstructor,
    catalogFeatureConstructor: catalogFeatureConstructor,
    myMealsRecipesListGridConfig: myMealsRecipesListGridConfig,
    myMealsViewOptions:myMealsViewOptions
    // optionally MealPlannerFeatureConstructor
)

If you wish you to use the Meal Planner, you can find the configurable settings for the views here: