Hello! As requested here is the original question! I was reading through the docs and I discovered a functionality that I really need to use, it's using the repeatable tag. Now it seems fairly simple to implement, but the code that I'm trying to make repeatable is what's making it complicated. The code I'm using is with Foundation's Accordion function, you can view that here: http://foundation.zurb.com/docs/components/accordion.html. I added a table inside, and the following is my code for two accordions:

Code: Select all

<dl class="accordion" data-accordion>
<dd>
   <a href="#panel1">March, 2014 <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
   <div id="panel1" class="content table-scroll">
      <table>
         <thead>
            <tr>
               <th width="40%">Date</th>
               <th width="25%">Days</th>
               <th width="25%">Time</th>
               <th width="10%">Register</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Tuesdays</td>
               <td>6pm to 9:30pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Long Weekends</td>
               <td>9am to 2:45pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Saturday, Sunday</td>
               <td>9am to 2:45pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
         </tbody>
      </table>
   </div>
</dd>
<dd>
   <a href="#panel2">April, 2014 <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
   <div id="panel2" class="content table-scroll">
      <table>
         <thead>
            <tr>
               <th width="40%">Date</th>
               <th width="25%">Days</th>
               <th width="25%">Time</th>
               <th width="10%">Register</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Tuesdays</td>
               <td>6pm to 9:30pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Long Weekends</td>
               <td>9am to 2:45pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Saturday, Sunday</td>
               <td>9am to 2:45pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
         </tbody>
      </table>
   </div>
</dd>
</dl>

I basically want to do the following:
1) I want to make everything within the <dd></dd> element repeatable. I want to make it so that I can go into the CMS and add and delete <dd>'s.
2) I also need to do something about the <a> and <div> ID tag that is needed for them to work together (#panel1 for example) so that when it's repeated it won't be the same ID, I could just add a text field in the CMS for that and use a <cms:show> tag I think though?
3) In the <a> tag there's a month and year and then a <span> with something else in it, I want to make that month and year (March, 2014) editable.
4) I want to make the table (technically just the contents within the <tbody>) editable. I don't want to be able to delete the table from the CMS though but remove and add rows, which I can do using richtext I believe, not sure if you have any ideas for this.

[KK]

Hi Matt,

Thank you for posting the problem at our forums (for the record - we were having this discussion over email).

OK, so here is the promised solution.
Actually there could be several ways of handling this particular scenario but I though the following would be the best.

In your markup, each DD represents a month and in that month is a table.
You's like the user to add DDs and also to add rows to the table within.

In my solution, we'll represent each DD (i.e. month) by a 'cloned-page'.
The cloned-page in turn will have a 'repeatable-region' the rows of which will form the table. OK?

This is how we do it.

STEP 1
The step 1 would be to declare your existing template (courses/oshawa.php I presume), to be clonable. add the following to the somewhere at the top of the template (after the mandatory <?php require_once .. ?> of course)-

Code: Select all

<cms:template clonable='1'>

</cms:template>

Visit the template as super-admin. Coming back to the admin-panel you'll find that Couch has created a default page for the template.

Edit the default page and change its 'Title' to March, 2014 (make the 'name' blank as Couch will automatically create a name form the title we inputted above).

Save the page. Now add a new page. Make its title April, 2014 (leave name blank).
Save. I think you get the drift. Every month is a new page.

Create May and June similarly.

Now we'll use these pages to create the DDs on the front-end.

STEP 2
If you went through our tutorial, you'll remember that we isolate one instance of the many repeating items in the markup.

For example, in your markup two things are getting repeated - the DD's and the TRs within the table within the DD.

Following is how the new markup looks like after removing all repeating items except one -

Code: Select all

<dl class="accordion" data-accordion>
<dd>
   <a href="#panel1">March, 2014 <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
   <div id="panel1" class="content table-scroll">
      <table>
         <thead>
            <tr>
               <th width="40%">Date</th>
               <th width="25%">Days</th>
               <th width="25%">Time</th>
               <th width="10%">Register</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Tuesdays</td>
               <td>6pm to 9:30pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
         </tbody>
      </table>
   </div>
</dd>
</dl>

Notice how we have only one DD and only one TR.

Let us handle the DD (i.e. month) first.

Wrap the single DD with cms:pages tag like the following -

Code: Select all

<dl class="accordion" data-accordion>
<cms:pages order='asc'>
<dd>
   <a href="#panel<cms:show k_count />"><cms:show k_page_title /> <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
   <div id="panel<cms:show k_count />" class="content table-scroll">
      <table>
         <thead>
            <tr>
               <th width="40%">Date</th>
               <th width="25%">Days</th>
               <th width="25%">Time</th>
               <th width="10%">Register</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>March 1st, 4th, April 1st, 4th</td>
               <td>Tuesdays</td>
               <td>6pm to 9:30pm</td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
         </tbody>
      </table>
   </div>
</dd>
</cms:pages>
</dl>

Now the DDs will be repeated as many times as we have the cloned pages.
notice how we are using each page's title to create the heading (and the k_count variable that starts from 1 and increments with each page to create the unique panel id).

Visit your page. You should see a DD each for each month.
Of course, each month will have only a single row in the contained table.
Let us change that next.

STEP 3
We'll create the rows of the table contained in each month as 'repeatable regions'.

Add the following declaration to the cms:template block we declared in our first step so as to make it -

Code: Select all

<cms:template clonable='1'>

    <cms:repeatable name="time_table" label='Time Table' >
        <cms:editable name='date'
            label="Date"
            type="text" />
            
        <cms:editable name='days'
            label="Days"
            type="text" />
        
        <cms:editable name='time'
            label="Time"
            type="text" />
    </cms:repeatable>

</cms:template>

As you can see, we are defining three regions - these will be the TDs. Each row of the repeatable region will form the TD.

Visit the template as super-admin for the editable regions to get added.
Coming back to the admin-panel, you should see a table of repeatable elements available in each page.

Edit a page (e.g. March, 2014) and fill in the rows of the time-table.

Untitled-1.png (3.91 KiB) Viewed 5024 times

Now to show the inputted data on the front-end.

This was the original table markup -

Code: Select all

<tbody>
    <tr>
        <td>March 1st, 4th, April 1st, 4th</td>
        <td>Tuesdays</td>
        <td>6pm to 9:30pm</td>
        <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
    </tr>
</tbody>

Wrap around the single TR with a cms:show_repeatable tag that'll cycle through the inputted data and repeat the TR for each row of repeatable regions -

Code: Select all

<tbody>
    <cms:show_repeatable 'time_table' >
    <tr>
        <td><cms:show date /></td>
        <td><cms:show days /></td>
        <td><cms:show time /></td>
        <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
    </tr>
    </cms:show_repeatable>
</tbody>

The final code -

Code: Select all

<dl class="accordion" data-accordion>
<cms:pages order='asc'>
<dd>
   <a href="#panel<cms:show k_count />"><cms:show k_page_title /> <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
   <div id="panel<cms:show k_count />" class="content table-scroll">
      <table>
         <thead>
            <tr>
               <th width="40%">Date</th>
               <th width="25%">Days</th>
               <th width="25%">Time</th>
               <th width="10%">Register</th>
            </tr>
         </thead>
         <tbody>
                <cms:show_repeatable 'time_table' >
            <tr>
               <td><cms:show date /></td>
               <td><cms:show days /></td>
               <td><cms:show time /></td>
               <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
            </tr>
                </cms:show_repeatable>
         </tbody>
      </table>
   </div>
</dd>
</cms:pages>
</dl> 

Hope this helps.

Okay, so I'm now testing this! It almost works, right now I can add and delete <dd> tags from the CMS, but [with the code you gave me of course] I can't even see an input field for the contents of the table, which is this part:

Code: Select all

 <tbody>
   <cms:show_repeatable 'time_table' >
      <tr>
         <td><cms:show date /></td>
         <td><cms:show days /></td>
         <td><cms:show time /></td>
         <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
      </tr>
   </cms:show_repeatable>
 </tbody>

I've added

Code: Select all

<cms:template clonable='1' />

at the top, as what you gave me to put at the top didn't work for me: (and I'm not sure why but nothing showed up on the page or in the CMS)

Code: Select all

<cms:template clonable='1'>
...
</cms:template>

So using that one line seems to work so far, but I can't seem to edit the tables, obviously I should be using what you gave me and I suppose if that will work then I should be able to edit the table from the CMS?

Thanks,
Matthew Roberts

=)

[KK]

The admin-panel's screenshots states 'No editable regions defined'.
It should, instead, be showing the repeatable-region named 'time_table'.
Clearly the repeatable-region has not been defined properly (or registered by accessing the template as super-admin).

Please remove the 'one-line' cms:template definition and replace it with the following (as suggested in the original solution) -

Code: Select all

<cms:template clonable='1'>

    <cms:repeatable name="time_table" label='Time Table' >
        <cms:editable name='date'
            label="Date"
            type="text" />
            
        <cms:editable name='days'
            label="Days"
            type="text" />
        
        <cms:editable name='time'
            label="Time"
            type="text" />
    </cms:repeatable>

</cms:template>

Now visit http://www.yoursite.com/courses/oshawa.php in the same browser that has you logged-in as super-admin.
This step should create the repeatable region. Test it by going back to the admin-panel and editing any cloned page.

Please let us know how you fare.
Thanks.

The code seems to be as follows now and it's still not working, the template tag should be above the <html> tag?

[KK]

Can you paste in your full template code here please?

Here is the entire page lol (there's some PHP includes so it isn't too bad). So the last bit of code you gave me is different actually? There's the show_repeatable which I have, and I'm clearly missing the normal repeatable tag which you just said and I'm not sure where to out that?

Code: Select all

<?php require_once( '../admin/cms.php' ); ?>
<cms:template clonable='1' >
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Courses: Oshawa | G2 Drivers</title>
   <link rel="icon" type="image/ico" href="../favicon.ico">
    <link rel="stylesheet" href="../css/foundation.css" />
    <link rel="stylesheet" href="../css/override.css" />
   <script src="../js/vendor/modernizr.js"></script>
   <?php include('../includes/chat.html'); ?>
</head>
<body>
<div class="off-canvas-wrap">
  <div class="inner-wrap">
   <?php include('../includes/offcanvas.php'); ?>
   <div class="top-bg">
      <?php include('../includes/header.php'); ?>
   </div>
   
   <div class="back-wrap">
      <div class="row">
         <div class="large-12 columns">
            <div class="col-radius">
               <div class="row">
                  <div class="small-12 medium-6 columns">
                     <h3>Courses: Oshawa</h3>
                     <h5 class="show-for-small-only hide-for-medium-up">Were you looking for <a href="bowmanville.php">Bowmanville</a>?</h5>
                  </div>
                  <div class="medium-6 columns page-nav hide-for-small-only show-for-medium-up">
                     <a href="#" data-options="align:left" data-dropdown="drop" class="small secondary radius button dropdown">Oshawa</a>
                     <ul id="drop" class="small f-dropdown" data-dropdown-content>
                        <li><a href="../courses.php">Courses Home</a></li>
                        <li><a href="oshawa.php">Oshawa</a></li>
                        <li><a href="bowmanville.php">Bowmanville</a></li>
                     </ul>
                  </div>
               </div>
               <hr /><br /><br />
               <!-- Start Content -->
               
               <div class="row">
                  <div class="small-12 columns">
                     <dl class="accordion" data-accordion>
                        <cms:pages order='asc'>
                        <dd>
                           <a href="#panel<cms:show k_count />"><cms:show k_page_title /> <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
                           <div id="panel<cms:show k_count />" class="content table-scroll">
                             <table>
                               <thead>
                                 <tr>
                                    <th width="40%">Date</th>
                                    <th width="25%">Days</th>
                                    <th width="25%">Time</th>
                                    <th width="10%">Register</th>
                                 </tr>
                               </thead>
                               <tbody>
                                 <cms:show_repeatable 'time_table' >
                                    <tr>
                                       <td><cms:show date /></td>
                                       <td><cms:show days /></td>
                                       <td><cms:show time /></td>
                                       <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
                                    </tr>
                                 </cms:show_repeatable>
                               </tbody>
                             </table>
                           </div>
                        </dd>
                        </cms:pages>
                     </dl>
                  </div>
               </div>
               
               <!-- End Content -->
            </div>
         </div>
      </div>
   </div>
   
   <?php include('../includes/footer.php'); ?>
  <a class="exit-off-canvas"></a>
  </div>
</div>

<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/moment.min.js"></script>
<script> $(document).foundation(); </script>
<script>
   $(".off-canvas-list a").on("click.toggleCanvas", function(){
      $(".exit-off-canvas").click();
   });
</script>
<script>
   var now = moment().format("dddd, MMMM Do");
       // Saturday, June 9th, 2007, 5:46:21 PM
   $('#date').append(now);
</script>
<script>// only needed for pages with accordion
   $(document).ready(function ($) {
      $("dl.accordion dd:first").addClass('active');
      $("dl.accordion dd:first div.content").addClass('active');
      
      function toggleText() {
         $('dl.accordion div.content.active').prev().find('span.click').text('click to close');
         $('dl.accordion div.content:not(.active)').prev().find('span.click').text('click to open');
      }
      toggleText();
      $('dl.accordion').on("click", "dd a", function (event) {
         setTimeout(toggleText, 25);
      });
   });
</script>
</body>
</html>
</cms:template>
<?php COUCH::invoke(); ?>

[KK]

Please use the following amended code (don't forget to access the page as super-admin)

Code: Select all

<?php require_once( '../admin/cms.php' ); ?>

<cms:template clonable='1'>

    <cms:repeatable name="time_table" label='Time Table' >
        <cms:editable name='date'
            label="Date"
            type="text" />
            
        <cms:editable name='days'
            label="Days"
            type="text" />
        
        <cms:editable name='time'
            label="Time"
            type="text" />
    </cms:repeatable>

</cms:template>

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Courses: Oshawa | G2 Drivers</title>
   <link rel="icon" type="image/ico" href="../favicon.ico">
    <link rel="stylesheet" href="../css/foundation.css" />
    <link rel="stylesheet" href="../css/override.css" />
   <script src="../js/vendor/modernizr.js"></script>
   <?php include('../includes/chat.html'); ?>
</head>
<body>
<div class="off-canvas-wrap">
  <div class="inner-wrap">
   <?php include('../includes/offcanvas.php'); ?>
   <div class="top-bg">
      <?php include('../includes/header.php'); ?>
   </div>
   
   <div class="back-wrap">
      <div class="row">
         <div class="large-12 columns">
            <div class="col-radius">
               <div class="row">
                  <div class="small-12 medium-6 columns">
                     <h3>Courses: Oshawa</h3>
                     <h5 class="show-for-small-only hide-for-medium-up">Were you looking for <a href="bowmanville.php">Bowmanville</a>?</h5>
                  </div>
                  <div class="medium-6 columns page-nav hide-for-small-only show-for-medium-up">
                     <a href="#" data-options="align:left" data-dropdown="drop" class="small secondary radius button dropdown">Oshawa</a>
                     <ul id="drop" class="small f-dropdown" data-dropdown-content>
                        <li><a href="../courses.php">Courses Home</a></li>
                        <li><a href="oshawa.php">Oshawa</a></li>
                        <li><a href="bowmanville.php">Bowmanville</a></li>
                     </ul>
                  </div>
               </div>
               <hr /><br /><br />
               <!-- Start Content -->
               
               <div class="row">
                  <div class="small-12 columns">
                     <dl class="accordion" data-accordion>
                        <cms:pages order='asc'>
                        <dd>
                           <a href="#panel<cms:show k_count />"><cms:show k_page_title /> <span class="click hide-for-small-only show-for-medium-up">click to open</span></a>
                           <div id="panel<cms:show k_count />" class="content table-scroll">
                             <table>
                               <thead>
                                 <tr>
                                    <th width="40%">Date</th>
                                    <th width="25%">Days</th>
                                    <th width="25%">Time</th>
                                    <th width="10%">Register</th>
                                 </tr>
                               </thead>
                               <tbody>
                                 <cms:show_repeatable 'time_table' >
                                    <tr>
                                       <td><cms:show date /></td>
                                       <td><cms:show days /></td>
                                       <td><cms:show time /></td>
                                       <td class="button-center"><a href="register.php" class="button tiny radius">Register</a></td>
                                    </tr>
                                 </cms:show_repeatable>
                               </tbody>
                             </table>
                           </div>
                        </dd>
                        </cms:pages>
                     </dl>
                  </div>
               </div>
               
               <!-- End Content -->
            </div>
         </div>
      </div>
   </div>
   
   <?php include('../includes/footer.php'); ?>
  <a class="exit-off-canvas"></a>
  </div>
</div>

<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/moment.min.js"></script>
<script> $(document).foundation(); </script>
<script>
   $(".off-canvas-list a").on("click.toggleCanvas", function(){
      $(".exit-off-canvas").click();
   });
</script>
<script>
   var now = moment().format("dddd, MMMM Do");
       // Saturday, June 9th, 2007, 5:46:21 PM
   $('#date').append(now);
</script>
<script>// only needed for pages with accordion
   $(document).ready(function ($) {
      $("dl.accordion dd:first").addClass('active');
      $("dl.accordion dd:first div.content").addClass('active');
      
      function toggleText() {
         $('dl.accordion div.content.active').prev().find('span.click').text('click to close');
         $('dl.accordion div.content:not(.active)').prev().find('span.click').text('click to open');
      }
      toggleText();
      $('dl.accordion').on("click", "dd a", function (event) {
         setTimeout(toggleText, 25);
      });
   });
</script>
</body>
</html>
<?php COUCH::invoke(); ?>

Oh! I get it! I was wrapping the whole page in the template tag! Perfect =)

It still seems to tell me that there are no editable regions. I am in super admin and the code is what you gave me. I'll be home in an hour where I can dig in a little more!

EDIT: PERFECT! Just got home, messed around with it a little, it took a second to show up but it works! Thanks =)