Create a restaurant menu and checkout experience right inside your app, complete with category pages, menu item listings, search, and a shopping bag feature.
Last updated
The Restaurant Ordering template brings a full menu browsing and checkout experience to your app. Users can browse multiple categories of food and drink, view details about each item, add them to a bag, add a tip, and complete their purchase with Stripe. This template is perfect for any type of cafe, coffee shop, food truck, or restaurant.
It’s important to note that users must be signed in to shop since the shopping bag functionality is tied to a user. If a user is signed out, the template shows a modal asking them to sign up or sign in.
The way orders work is important to understand. Clicking on any link that takes you to the bag screen or a product page first checks to see if you have an active order (an order that isn’t complete). If no active order is found, one is created for you.
In order for the “Add to Bag” button to properly add the product to the current order, this button is actually a list that shows only one item, which is the user’s most recent active but not complete order.
Clicking “Add to Bag” creates a new “Order Item” in the current order with the details of the current product. This allows the user to add the same product to the cart multiple times to purchase more than one of a given item.
The bag screen similarly is a list of orders filtered to just one item: the user’s most recent active but not complete order.
Purchasing an order marks it as complete.
Purchasing requires our Stripe component so be sure to read the docs for that component if you’re having trouble setting it up.
