Tabs

[Galaxy]

I am very new to ProcessWire so please excuse my ignorance, but I'd like an opinion on the best way to set up tabbed info that displays on each page for a directory type website.

I have successfully created blocks of repeater fields so each page (a child page of "Organisations" which is a single Organisation) can have details such as contact person, physical address, postal address, attached files etc. The fields work nicely on the admin side of the site but I am at a loss on how to get these to display through a template.

I'm ashamed to say the best I've done so far is list all the repeater fileds using:

foreach($page->fields as $field)
        echo $field->name . ", ";
 

In my case it displays the actual repeater fieldset names like so:

"applicant_details, primary_contact, secondary_contact, address, postal,"

I'd like each of these to be a tab with relevant fields in each

eg.

Applicant Details (tab 1)

- Organisation name

- Sector

Primary Contact (tab 2)

- First name

- Lastname

- Email

- Phone

Secondary Contact (tab 3)

- First name

- Lastname

- Email

- Phone

Address (tab 4)

- Address 1

- Address 2

- Town/City

- Postcode

Postal Address (tab 5)

- Postal address 1

- Postal address 2

- Town/City

- Postcode

Note: I have set up all these fields within repeater sets. I just can't get them to display through the template.

[Wanze]

Hi galaxy and welcome,

Right now you're looping through the fields of your page, which outputs you the repeaters.

You need to loop through a repeater to get the fields in it, that's one level deeper.

You could write the html markup for the tabs and then just output your data in it:

<div id="applicant_details">
<?php
  foreach ($page->applicant_details as $d) { //applicant_details is the name of your first repeater
    echo $d->organisation_name . ' ' . $d->sector; //These are your fields inside the repeater
  }
?>
</div>
//.. Next tab

Are you sure you need that much repeater fields?

People new to ProcessWire sometimes make heavy use of repeaters - usually it's better to model your data with pages. Then use

Page fields (single or multiple) to create relations.

[Galaxy]

Are you sure you need that much repeater fields?

No, I'm not sure. I'm open to suggestions on how to display the output of these fields in the best way.

better to model your data with pages. Then use Page fields (single or multiple) to create relations.

Can you point me in the right direction? As I said, you're talking to a complete novice...

I've got the repeaters displaying good as per your suggestion though.

[diogo]

I also feel that repeaters are not the best way to go for you. Reapeaters are for information that will be needed more than once, In your case would be more than one per company. I'm guessing that you used the repeater fields to organize the information in blocks. If this is right, that would be better done with with fieldset or fieldsetTab. The first one groups visually the fields in the template, and the second, separates them in tabs (in the backend, this is not the answer to your question about tabs in the frontend). To use them, create a new fieldsetOpen field for each of the groups you have there (Applicant Details, Primary Contact, etc...), and it will automatically create also a "fieldName_END" field for each. In your template organize the fields between the opening and closing field of each group, and you will have a nicely organized edit page. Same applied for fieldsetTab, except that it creates a tab for each group instead of only grouping them visually under a name.
 
To create the tabs --this will depend a lot on what js plugin you will use, if you will use one. I will take the jQueryUi tabs as an example--, you will need to organize the content inside the tabs divs:

<div id="tabs">
   <ul>
       <li><a href="#tabs-1">Applicant Details</a></li>
        <li><a href="#tabs-2">Primary Contact</a></li>
        <li><a href="#tabs-3">Secondary Contact</a></li>
    </ul>
    <div id="tabs-1">
        --here goes content--
    </div>
    <div id="tabs-2">
        --here goes content--
    </div>
    <div id="tabs-3">
        --here goes content--
    </div>
</div>

 
The frontend will ignore the groups that you created in the backend, so you will have to organize everything manually:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab name</a></li>
        <li><a href="#tabs-2">tab name</a></li>
        <li><a href="#tabs-3">tab name</a></li>
    </ul>
    <div id="tabs-1">
        <p><?=$page->organisation_name?></p>
        <p><?=$page->sector?></p>
    </div>
    <div id="tabs-2">
        <p><?=$page->primary_first_name?></p>

        <p><?=$page->primary_last_name?></p>         <p><?=$page->primary_email?></p>         <p><?=$page->primary_phone?></p> </div> <div id="tabs-3"> <p><?=$page->secondary_first_name?></p>         <p><?=$page->secondary_last_name?></p>         <p><?=$page->secondary_email?></p>         <p><?=$page->secondary_phone?></p> </div> </div>

edit:
I changed the field names of the contact to primary_something, and secondary_something, because they are different info, and they need different names on the same page.

[Galaxy]

Thanks diogo. I'm putting my trust in you and moving forward on this.... Someone stop me if you think it'll end in tears... I'll keep you posted.

I can't believe how intuative ProcessWire is! Loving it, after all these years of bloated CMS/Blog platforms...

Edited May 8, 2013 by Galaxy

[Galaxy]

You beauty diogo! Everything has gone as planned.

As I said, Processwire so intuative and easy to use... I have new insight into the repeater field now too. Will use those in a different light.

Thanks for your help Wanze and diogo - both invaluable...

Regards