Difference between revisions of "Adding jQuery UI tabs to listing detail page"

From JReviews Documentation
Jump to: navigation, search
 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
The most simple way to add tabs to listing detail page is using jQuery UI tabs.
+
<div class="successbox" style="width: 95%">
  
You will need to modify this file to add the tabs code:
+
[https://www.jreviews.com/docs/theme-resources/tabs-in-listing-detail-page There's a new version of this article]
*<span style="color: blue">\com_jreviews\jreviews\views\themes\{theme_name}\listings\detail.thtml</span>
+
  
 +
</div>
 +
 +
JReviews includes a tabbed theme for detail pages by default. To use this theme you should add the _tabs theme suffix in the [[Category Layout Manager]] to the categories where you want to use this layout, for example:
 +
 +
[[File:Theme-manager-tabs.png]]
  
== Changes in detail.thtml file ==
+
This will make sure that listings in that category will use the detail_tabs.thtml theme file instead of the default detail.thtml.
 +
If you open the listing detail page, the tabs area will look something like this:
  
Next step is to test if the tabs are working.
+
[[File:Tabs-layout.png]]
 +
 
 +
If you want to display each field group in its own tab, edit the /views/themes/default/listings/detail_tabs.html theme file and change this line:
  
Add this code into detail.thtml (where you want the tabs to display, usually below SUMMARY/DESCRIPTION text):
 
 
<source lang="php">
 
<source lang="php">
<div class="clr"></div>
+
$separate_field_groups = 0;
<div id="jr_tabs" class="jr_tabs">
+
<ul>
+
<li><a href="#tab1">Tab 1</a></li>
+
<li><a href="#tab2">Tab 2</a></li>
+
<li><a href="#tab3">Tab 3</a></li>
+
</ul>
+
<div id="tab1">
+
This is tab 1 text
+
</div>
+
<div id="tab2">
+
This is tab 2 text
+
</div>
+
<div id="tab3">
+
This is tab 3 text
+
</div>
+
</div>   
+
 
</source>
 
</source>
  
 +
to this:
  
You should get this:
+
<source lang="php">
 +
$separate_field_groups = 1;
 +
</source>
  
[[File:UITabs.png]]
+
The result will be:
  
 +
[[File:Tabs-layout-separate-groups.png]]
  
Next, you can start putting parts of detail page into the tabs.
 
  
For example, to add summary/description text inside the first tab, rename "Tab 1" to "Description" and replace "This is tab 1 text" with the summary/description code:
+
== Adding custom tabs ==
 +
 
 +
If you want to add a new set of tabs to the detail.thtml or some other file, start with this sample code:
 +
 
 
<source lang="php">
 
<source lang="php">
<div class="clr"></div>
+
<div class="jrClear"></div>
<div id="jr_tabs" class="jr_tabs">
+
<div class="jr-tabs jrTabs">
 
<ul>
 
<ul>
<li><a href="#tab1">Description</a></li>
+
<li><a href="#tab1">Tab 1</a></li>
 
<li><a href="#tab2">Tab 2</a></li>
 
<li><a href="#tab2">Tab 2</a></li>
 
<li><a href="#tab3">Tab 3</a></li>
 
<li><a href="#tab3">Tab 3</a></li>
 
</ul>
 
</ul>
 
<div id="tab1">
 
<div id="tab1">
<!-- SUMMARY/DESCRIPTION -->
+
This is tab 1 text
<div class="contentFulltext">
+
<?php echo nl2br($listing['Listing']['text']);?>
+
</div>
+
 
</div>
 
</div>
 
<div id="tab2">
 
<div id="tab2">
This is tab 2
+
This is tab 2 text
 
</div>
 
</div>
 
<div id="tab3">
 
<div id="tab3">
This is tab 3
+
This is tab 3 text
 
</div>
 
</div>
</div>  
+
</div>  
 
</source>
 
</source>
  
[[File:UITabs2.png]] 
+
Notice that the tabs have two sections, navigation items inside the ''ul'' tag (tab titles) and tab content below them. What connects them is the value of the href attribute in tab navigation and value in the id attribute of the tab content div. Those references can be any value you want. For example, you could add a forth tab by adding the tab navigation link inside the ''ul'' tag:
 
+
 
+
Do the same for other parts of detail page, just paste the code into the tab divs.
+
 
+
 
+
== Changing  how the tabs look ==
+
 
+
If you don't like the default look of the tabs, you can style theme using [http://jqueryui.com/themeroller/ jQuery UI ThemeRoller] tool to make your own styles of download other styles from the gallery.
+
 
+
When you download the jquery ui package (jquery-ui-1.7.1.custom.zip), extract it and copy the files from the '''/css''' directory into this folder:
+
*<span style="color: blue">root\templates\jreviews_overrides\views\themes\{theme_name}\theme_css\jquery_ui_theme\</span>
+
 
+
 
+
Copy both jquery-ui-1.7.1.custom.css file and the /images folder.
+
 
+
After copying, you must '''Clear File Registry''' in JReviews administration
+
 
+
 
+
'''NOTE:''' If the downloaded css file has a different version in the filename (jquery-ui-1.7.2.custom.css), it will not be recognized by JReviews. The quickest fix is to rename the file to <span style="color: blue">jquery-ui-1.7.1.custom.css</span>
+
 
+
 
+
Here is an example of modified tabs theme:
+
 
+
[[File:UITabs3.png]]
+
 
+
 
+
== Displaying each field group in one tab ==
+
 
+
If you want to display each field group in a separate tab instead of the default field output, replace this code in the detail.thtml file:
+
  
 
<source lang="php">
 
<source lang="php">
<!-- CUSTOM FIELDS -->
+
<li><a href="#mynewtab">My new tab</a></li>
<?php if(isset($listing['Field']['groups'])):?>
+
    <?php echo $this->element('custom_fields',array('entry'=>$listing,'group_name'=>'','page'=>'content','divWidth'=>'style="width:55%;"'))?>
+
<?php endif;?>
+
 
</source>
 
</source>
  
 
+
and add the tab container div with the same id:
with this:
+
  
 
<source lang="php">
 
<source lang="php">
<?php
+
<div id="mynewtab">
$groups = array();
+
This is the content of my new tab
foreach($listing['Field']['groups'] AS $group=>$fields){
+
    $groups[$group] = array($group=>$fields);
+
}
+
?>
+
<div id="jr_tabs" class="jr_tabs" style="width: 60%;" >
+
    <ul>
+
<?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
+
<li><a href="#field_group<?php echo $i;?>"><span><?php echo $title;?></span></a></li>
+
<?php endforeach;?>
+
    </ul>
+
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
+
    <div id="field_group<?php echo $i;?>"><?php echo $this->element('custom_fields',array('entry'=>$listing,'group_name'=>$title,'page'=>'content','divWidth'=>'style="width:95%;"'))?></div>
+
    <?php endforeach;?>
+
 
</div>
 
</div>
 
</source>
 
</source>
 
For JReviews 2.3, from the code above replace:
 
 
<source lang="php">
 
 
<?php echo $this->element('custom_fields',array('entry'=>$listing,'group_name'=>$title,'page'=>'content','divWidth'=>'style="width:95%;"'))?>
 
</source>
 
 
with:
 
 
<source lang="php">
 
<?php echo $CustomFields->displayAll($listing,'content',$title);?>
 
</source>
 
 
If you want to display the tabs in the same row as the images, you will need to adjust the width here:
 
<source lang="php">
 
<div id="jr_tabs" class="jr_tabs" style="width: 60%;" >
 
</source>
 
 
 
Add this line into detail.css file (it fixes an issue when tabs are displayed next to the images):
 
<source lang="php">
 
#jr_tabs .ui-helper-clearfix:after {clear: left; }
 
</source>
 
 
 
Here is how the field groups will look like:
 
 
[[File:UITabFields.png]]
 
 
== Tabs only on certain Sections/Categories ==
 
 
If you want tabs only on certain sections or categories, use the [[Theme Manager]] to create theme suffixes.
 
 
For example, you can make modifications on detail_tabs.thtml file, and that file will be used only on sections/categories where you enter "_tabs" as theme suffix in [[Theme Manager]].
 
  
  

Latest revision as of 00:01, 9 July 2020

JReviews includes a tabbed theme for detail pages by default. To use this theme you should add the _tabs theme suffix in the Category Layout Manager to the categories where you want to use this layout, for example:

Theme-manager-tabs.png

This will make sure that listings in that category will use the detail_tabs.thtml theme file instead of the default detail.thtml. If you open the listing detail page, the tabs area will look something like this:

Tabs-layout.png

If you want to display each field group in its own tab, edit the /views/themes/default/listings/detail_tabs.html theme file and change this line:

$separate_field_groups = 0;

to this:

$separate_field_groups = 1;

The result will be:

Tabs-layout-separate-groups.png


Adding custom tabs

If you want to add a new set of tabs to the detail.thtml or some other file, start with this sample code:

<div class="jrClear"></div>
<div class="jr-tabs jrTabs">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
	</ul>
	<div id="tab1">
		This is tab 1 text
	</div>
	<div id="tab2">
		This is tab 2 text
	</div>
	<div id="tab3">
		This is tab 3 text
	</div>
</div>

Notice that the tabs have two sections, navigation items inside the ul tag (tab titles) and tab content below them. What connects them is the value of the href attribute in tab navigation and value in the id attribute of the tab content div. Those references can be any value you want. For example, you could add a forth tab by adding the tab navigation link inside the ul tag:

<li><a href="#mynewtab">My new tab</a></li>

and add the tab container div with the same id:

<div id="mynewtab">
	This is the content of my new tab
</div>