Log in Sign Up

Building an Easily Managed Restaurant Menu

A couple of weeks ago the wife and I had a chance to get out for an evening, and in the process of determining where to go I checked out a local eatery's website. I suppose if I were a proper "foodie" there would have been some red flags given the season, but I took their online menu at face value. Silly me.

I thought I'd appear knowledgeable and order without really looking at the menu. I suppose I deserved the, “I'm sorry sir, but we don't serve risotto in the summer,” I got from our too-polite server. I started to say something about their outdated website, but just resigned myself to looking at the printed menu.

MagicEdit to the Rescue

Face it, restaurants aren't too great at websites. This article on Slate.com pretty much says it all. That's one reason why the MagicEdit demo is a fake bakery site showing how easy it is to manage a restaurant menu with MagicEdit. So after a few requests for more info about how to build a manageable menu, here goes.

Restaurants usually have a few sections on their menus. Starters, salads, entrées, dessert, drinks, you know the drill. Each section then contains multiple items with titles, descriptions, prices, and so on. We'll even throw in an optional image.

If you've read up on MagicRepeat, you'll know that it's a perfect solution for our menu.

A Basic Menu

Your basic menu can be styled any way you like, but here is an example of how the HTML might look for a single menu section and a single menu item.

<h1>Menu Section</h1>
<p>A brief description of this section (optional)</p>
<ul>
  <li>
    <img src="i/image.jpg" alt="Menu Item">
    <h2>Menu Item</h2>
    <h3>What makes it great....</h3>
    <p>What's in it...</p>
    <h4>$5.99</h4>
  </li>
</ul>

So now we have a menu section title and description, as well as a menu item that can be styled with a bit of CSS to look nice and pretty.

Making it Editable

Let's add a couple of MagicEdit tags to make the menu section and item editable. We'll also make the description and image optional using cl_visible (see this documentation for more information):

<h1><magicedit me_name="menuSection" me_plain>Menu Section</magicedit></h1>
<magicedit cl_visible="=CLManager.activeAccount:isAdmin||$sectionDescription" me_name="sectionDescription"><p>A brief description of this section (optional)</p></magicedit>

<ul>
  <li>
    <img magicedit src="i/image.jpg" me_name="itemImage" alt="Menu Item"  cl_visible="=CLManager.activeAccount:isAdmin||$itemImage" />
    <magicedit me_name="menuContent">
      <h2>Menu Item</h2>
      <h3>What makes it great....</h3>
      <p>What's in it...</p>
      <h4>$5.99</h4>
    </magicedit>
  </li>
</ul>

To see what this looks and works like running on MagicEdit, click here. Try logging in and editing the various elements, then logging out and seeing the results. You should see that the optional elements (the image and the section description) only show when you're logged in or they have been edited.

Adding Repeats

Most of your work is actually done, so all we need to do here is duplicate sections and items using MagicRepeat. We'll wrap the whole section in a repeat to allow multiple menu sections, then add a nested repeat inside the section for multiple menu items in each section:

<magicrepeat me_name="menuSection">
  <h1><magicedit me_name="sectionName" me_plain>Menu Section</magicedit></h1>
  <magicedit cl_visible="=CLManager.activeAccount:isAdmin||$sectionDescription" me_name="sectionDescription"><p>A brief description of this section (optional)</p></magicedit>
  <ul style="padding-bottom:20px;>
    <magicrepeat me_name="menuItem" me_repeat="yes">
      <li>
        <img src="i/image.jpg" magicedit width="200" height="150" me_name="itemImage" alt="Menu Item"  cl_visible="=CLManager.activeAccount:isAdmin||$itemImage" />
        <magicedit me_name="menuContent">
          <h2>Menu Item</h2>
          <h3>What makes it great....</h3>
          <p>What's in it...</p>
          <h4>$5.99</h4>
        </magicedit>
      </li>
    </magicrepeat>
  </ul>
</magicrepeat>

The most important thing to realize when nesting one MagicRepeat inside another is to set me_repeat="yes" on the inner repeat to allow it to be unique to each new section. Also, we're adding a bit of padding to the bottom of the ul to give room for the MagicEdit buttons that will automatically appear when logged in.

Now you can create new sections and menu items. Click here to see how it works now! Try adding new items and sections, then editing them to make them unique. Just remember that MagicEdit inserts controls at the end of the repeatable or editable item (see the picture to the right).

Wrapping it all Up

Our menu is pretty much ready to go. It's a piece of cake to add new menu sections and menu items, and to edit the items to make sure they're always updated.

Now you can add your styles to make the menu a bit easier on the eyes. To see our menu with some added styles and slightly modified HTML, check out the prettified menu.

The files associated with this tutorial are available in ZIP download below, so you can try building your own!

Downloads

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top