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

From JReviews Documentation
Jump to: navigation, search
Line 1: Line 1:
−
JReviews already includes a tabbed theme for detail pages. To use this theme you should add the _tabs theme suffix in the [[Theme Manager]] to the categories where you want to use this layout.
+
JReviews includes a tabbed theme for detail pages by default. To use this theme you should add the _tabs theme suffix in the [[Theme Manager]] to the categories where you want to use this layout, for example:
  
−
You can make further changes to detail_tabs.thtml or you can add your own tabs to the core detail theme by editing this file:
+
[[File:Theme-manager-tabs.png]]
−
*<span style="color: blue">\com_jreviews\jreviews\views\themes\{theme_name}\listings\detail.thtml</span>
+
  
 +
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:
  
−
== Changes in detail.thtml file ==
+
[[File:Tabs-layout.png]]
  
−
The first step is to add some sample tabs to see if the functionality is working.
+
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="jrClear"></div>
+
$separate_field_groups = 0;
−
<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>   
+
 
</source>
 
</source>
  
 +
to this:
  
−
You should get this:
+
<source lang="php">
 +
$separate_field_groups = 0;
 +
</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="jrClear"></div>
 
<div class="jrClear"></div>
 
<div class="jr-tabs jrTabs">
 
<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.
−
 
+
−
 
+
−
Do the same for other parts of detail page, just paste the code into the tab divs.
+
−
 
+
−
 
+
−
== 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">
+
−
<!-- CUSTOM FIELDS -->
+
−
<?php echo $CustomFields->displayAll($listing,'content');?>
+
−
 
+
−
</source>
+
−
 
+
−
 
+
−
with this:
+
−
 
+
−
<source lang="php">
+
−
<?php
+
−
$groups = array();
+
−
foreach($listing['Field']['groups'] AS $group=>$fields){
+
−
    $groups[$group] = array($group=>$fields);
+
−
}
+
−
?>
+
−
<div class="jr-tabs jrTabs" style="width: 60%;" >
+
−
    <ul>
+
−
    <?php $i=0;foreach($groups AS $group_name=>$fieldGroup):$i++;?>
+
−
    <li><a href="#field_group<?php echo $i;?>"><span><?php echo $fieldGroup[$group_name]['Group']['title'];?></span></a></li>
+
−
    <?php endforeach;?>
+
−
    </ul>
+
−
    <?php $i=0;foreach($groups AS $group_name=>$fieldGroup):$i++;?>
+
−
    <div id="field_group<?php echo $i;?>"><?php echo $CustomFields->displayAll($listing,'content',$group_name);?></div>
+
−
    <?php endforeach;?>
+
−
</div>
+
−
 
+
−
</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 class="jr-tabs jrTabs" 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">
+
−
.jrTabs .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]].
 
  
  

Revision as of 21:30, 15 July 2016

JReviews includes a tabbed theme for detail pages by default. To use this theme you should add the _tabs theme suffix in the Theme 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 = 0;

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
    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.
Retrieved from "https://docs.jreviews.com/index.php?title=Adding_jQuery_UI_tabs_to_listing_detail_page&oldid=4123"