Restaurant menu creation?

HI All,

I have been away for quite some time now.

I am reworking an existing restaurant site that is built with static strict XHTML and CSS. I have a menu (for food listings) that is heavily styled with CSS. RIght now changing the menu items is a pain as it involves directly editing the page code. Any mistake destroys the design. I want to create an easier system so that the restaurant owner can easily update the menu items but still retain the CSS styling.

I have system that uses three main styles: Heading, Dish name, Dish Description.
Like this:

APPETIZERS:
Frogs
Succulent frog gizzards cooked in fat
Spam
Old spam cooked in slimy milk
Squirrel
Road kill squirrel served with stale nuts

This then gets repeated for Salads, Main Course, Desserts, etc, etc

What is the best way to add the menu items? Should I add the individual CSS to the TinyMCE function or is there a way I can create a repeating option system for text entry using a TV or something? I tried adding a TV but I am not getting anywhere. I want this to be quick and easy for the owner to use.

Any ideas will be most welcome!

Thanks!

There are a number of ways you could do what you want. I’m assuming that you want more than one menu item on the same page. I think the easiest way is to make each menu item a document. You could create TV’s for the three menu-item entries, but I think I’d just use three of the existing fields (e.g. title, longtitle, description, summary (introtext). Organize all the menu item documents in the tree under container documents:

Lunch
Appetizers
salmon
calimari
Salads
house salad
chicken salad
Entrees
Chicken Provencale
Steak au poivre
Dinner
Appetizers
salmon
calimari
Salads
house salad
chicken salad
Entrees
Chicken Provencale
Steak au poivre

Then use Ditto to create each menu page using placeholders in a Tpl chunk for Course, menu item, and the separate fields of each menu item. It will take a while to get it to look right but the CSS will be completely separate from the data and creating new entries and editing existing ones should be easy for the client.

Organize all the menu item documents in the tree under container documents:

Yes, thats the easiest way you can go, I think.
And if you want the owner can realy easy edit,add,remove,rearange menuitems from a menu-pool and also easy add and edit menuitems in his menu-pool at the frontend you could try it with an early beta-version of bloX/Xedit.
If you are interested how it works and you want to experiment with it, I can PM you a login to my Test-page and I could create a little example for your situation.

Thanks for the suggestions.

I looked at this last night and did a little experimenting.

There are three menus: Dinner, Lunch and Happy Hour. You can see the old static site here: http://www.cactusrestaurants.com/menudinner.html
(I did all the design and photography)

To start I thought it would take quite some time to build this existing site with MODx (I have not touched MODx in long time) but I got the whole thing done in a couple of hours (locally using MAMP.)

Most of the CSS is there. Adding the menu items into the TinyMCE window is a bit of a pain. Basically the owner will change the entire menu several times a year. It would be nice to allow him to cut and paste from a Word document into the system. I tried adding two CSS classes into TinyMCE but the lack of wysiwyg makes this harder than it should be. I then used Heading3, Heading5, and Heading6 with the corresponding CSS and that seems to work better. The dish names and the dish descriptions alternate so choosing the H5’s and H6’s goes fairly quickly. TinyMCE gives you a little wysiwyg feedback as you work.

Bob, I get your suggestion for the most part. Doing the Ditto using a Tpl chunk will be a challenge for me though. But would this save time? I want this to be easy, quick, and render well. There are around 120 dishes between the three menus. Creating individual pages for each one will take a lot of time? I would prefer to create just three pages?

The other issue is that there is some Spanish punctuation characters in some of the words. I was using hard HTML character codes to ensure these words rendered correctly. Hopefully MODx will deal with this better.

Thanks,

Max

On reflection, I think the method I suggested is overkill for you, especially since you can do most of the styling with heading tags. It sounds like what you’re doing is about right.

Pasting from Word is possible, but a real pain and prone to error. It would be better if the client used on of the simple free editors our there that works in straight text. You might check out the Firefox add-on: "It’s all text," for editing within MODx. I haven’t tried it but sottwell swears by it.

Great-looking site, BTW.

Thanks Bob,

I think this might be the best way after all. Creating individual pages for each dish would be useful if there were added details and images for each dish. But all there really is is a list. With the static system I am using clean XHTMl and CSS. Editing all the menu listings has to be done very carefully as one missing div can kill the design. You also have to use an FTP client to send the edited page back to the server. Copying from a text editor and pasting into Tiny MCE is pretty easy. Then each alternating row gets its own H heading. Explaining this to the owner will be easier as well.

Using MODx for this site will allow for other flexibility and perks as well. I will combine imbedded photos plus add a thumbnail javascript gallery. I have been shooting a lot of fresh photos to give the whole site a face lift.

I have enjoyed this project. These are very successful popular restaurants.

Max