I am building a website for a restaurant and am having a bit of trouble figuring out the approach I should take for their menu page. They want to be able to add new food type categories i.e. Entrees, Appetizers, Deserts, etc. with the related food attached to each category. Attached is an example of what I am trying to accomplish frontend-wise.

Is there a way in couch to have folders be attached to repeatable regions and dynamically create the necessary HTML? Am I overthinking this?

Example code:

Code: Select all

<div class="menu-list">
                     <div class="menu-title cute-12-tablet text-center">
                        <h2>Entrees</h2>
                     </div>

                     <div class="menu-details cute-6-tablet">
                        <h2>TITLE OF ITEM ................$19 <span></span></h2>
                        <p>
                           At vero eos et accusamus St. Lorem Ipsum D. At vero eos et accusamus St. Lorem Ipsum D.At
                        </p>
                        <a href="/images/dim-sum.jpg" class="menu-link mag-pop">
                           <i class="fa fa-camera"></i> SEE WHAT IT LOOKS LIKE!
                        </a>
                     </div>
                     <div class="menu-details cute-6-tablet">
                        <h2>TITLE OF ITEM ................$19 <span></span></h2>
                        <p>
                           At vero eos et accusamus St. Lorem Ipsum D. At vero eos et accusamus St. Lorem Ipsum D.At
                        </p>
                        <a href="#" class="menu-link">
                           <i class="fa fa-camera"></i> SEE WHAT IT LOOKS LIKE!
                        </a>
                     </div>
                  </div><!-- end Menu list -->

It sounds like what you want might not be a folder, but just a clonable template with a repeatable region inside it. When the restaurant wants to create a new category, they add a new "page" to the template, then list the items in the repeatable region.

On the front end it would be something like:

Code: Select all

<cms:pages masterpage='menu.php'>

    <div class="menu-list">
                     <div class="menu-title cute-12-tablet text-center">
                        <h2><cms:show k_page_title /></h2>
                     </div>

    <cms:show_repeatable 'menu_items' >

                     <div class="menu-details cute-6-tablet">
                        <h3><cms:show title_of_item /> ................<cms:show item_price /> <span></span></h3>
                        <p>
                           <cms:show item_description />
                        </p>
                        <a href="<cms:show item_image />" class="menu-link mag-pop">
                           <i class="fa fa-camera"></i> SEE WHAT IT LOOKS LIKE!
                        </a>
                     </div>
                     
    </cms:show_repeatable >

                  </div><!-- end Menu list -->
</cms: pages>

That is exactly what I needed. Thank you!