Restaurant Ordering

Create a restaurant menu and checkout experience right inside your app, complete with category pages, menu item listings, search, and a shopping bag feature.

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.

Tips and Things to Know

  • 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.

Last updated