Skip to main content
Version: 5.2

Standalone Recipe Card Walkthrough

The Standalone Recipe Card can be embedded into any part of your app, & is ideal for your search results or product catalog.

Time to read:

clock icon

10 minutes


Time for base implementation:

clock icon

2 hours


Time for full customization:

clock icon

4 hours


Prerequisites

Packages

To have the Mealz functioning properly, you must install our package MealziOSSDK. Here are the instructions

Initialize Miam

Also, you must initialize mealz in your AppDelegate. Here are the instructions

Ingredients

Recipe Card

The Recipe Card is displayable button that launches the Recipe Details page when pressed. It is used on the Catalog & other features, but can also be used standalone.

The Standalone Recipe Card is ideal for product search results as well as your product catalog.

Recipe Card
Recipe Card

RecipeDetails

The RecipeDetails Page shows the information, ingredients, & steps for the recipe. Optionally, the user can add the item to their basket from the footer.

If the user adds the recipe to their basket, they are navigated to their Miam MyMeals or Basket. Otherwise, they can just navigate back to the Page they launched from.

A screenshot of the Recipe Details page
Recipe Details of Carrot Soup

SponsorDetails

The SponsorDetails Page shows information about the product or company that is sponsoring a certain recipe. The content comes from the Sponsor, so only the background, loader, & empty are customizable.

The user just navigates back to the Page they launched from.

A screenshot of the Sponsor Details page
Sponsor Details of Interbev steak

ItemSelector

The ItemSelector Page shows other products that the user can replace their current product for.

When the user selects the product they are selecting, they should be navigated back to where they launched from.

A screenshot of the Item Selector page
Item Selector for Menguy's Peanut Butter

Customization

If you would like to customize your components, such as the Background, Loader, or RecipeCard, you can read our documentation here.