COMMUNITY FORUM
K2 Category Layout
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
I am trying to achieve a grid layout similar to Netflix's home page on desktop devices. When an item is clicked, a new row is created below the existing row. In that new row, item details are displayed (introtext, extra fields, video, links). I have tried going about this using several different methods. The hurdle is combining the category.php and category_item.php files to make it work. Is it possible to combine the files? If so, how do I go about doing it? I am currently using a template override. I'm also open to other suggestions to achieve the same layout. Any help is appreciated!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
The image is always shown and on click with a jQuery event the rest of the data are shown.
You can clone the data into a container outside the grid in order to achieve the same effect.
Closing the container would destroy the data.
Another approach would be to use JSON feeds and via an AJAX request to populate the data in a separate container.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
I also tried using sessions. This seems to be the better route because I don't need to combine the files and I can manipulate the html to produce the extra div; however, using the code below and setting $info to "test" works but when I set it to the value below, nothing is returned and there is no error.
category_item.php
<?php
// Start the session
session_start();
$info = $this->item->extraFields->SizeRange->name;
// Set session variables
$_SESSION["additional_info"] = $info;
?>
category.php
<?php
// Start the session
session_start();
// Echo session variables that were set on previous page
echo $_SESSION["additional_info"];
?>
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
In the category.php file you 'll notice some foreach statements and this code:
<?php
// Load category_item.php by default
$this->item=$item;
echo $this->loadTemplate('item');
?>
This is where the category_item.php file is being requested.
Instead of the template file, you can use your own code there.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
Do not replace the foreach statement. Place your code inside the foreach statement.
I don't think you need the session solution since you can achieve the same layout much simpler.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
<!-- Item Image -->
<div class="uk-panel uk-panel-box uk-panel-box-hover">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</div>
<?php endif; ?>
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
Does the <?php echo $this->item->link; ?> code produce anything?
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
<?php if((isset($this->leading) || isset($this->primary) || isset($this->secondary) || isset($this->links)) && (count($this->leading) || count($this->primary) || count($this->secondary) || count($this->links))): ?>
<!-- Item list -->
<div class="itemList">
<?php if(isset($this->leading) && count($this->leading)): ?>
<!-- Leading items -->
<div id="itemListLeading" class="uk-grid uk-grid-medium" data-uk-grid-margin="">
<?php foreach($this->leading as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if((($key+1)%($this->params->get('num_leading_columns'))==0) || count($this->leading)<$this->params->get('num_leading_columns'))
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<div class="uk-width-1-5 itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->leading)==1); ?>>
<?php
// Load category_item.php by default
$this->item = $item;
?>
<!-- Start K2 Item Layout -->
<div class=" group<?php echo ucfirst($this->item->itemGroup); ?>">
<div class="catItemHeader uk-text-center uk-text-truncate">
<?php if($this->item->params->get('catItemTitle')): ?>
<!-- Item title -->
<span class="catItemTitle">
<?php if ($this->item->params->get('catItemTitleLinked')): ?>
<a href="<?php echo $this->item->link; ?>">
<?php echo $this->item->title; ?>
</a>
<?php endif; ?>
</span>
<?php endif; ?>
<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
<!-- Item Image -->
<div class="uk-panel uk-panel-box uk-panel-box-hover">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</div>
<?php endif; ?>
</div>
</div>
<!-- End K2 Item Layout -->
</div>
<?php if(($key+1)%($this->params->get('num_leading_columns'))==0): ?>
<div class="uk-width-1-1 uk-panel uk-panel-box"></div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
a) Use a tabs script and two separate loops (foreach)
The first loop should print the titles which act like handles and the second will print the actual data.
b) Which is would be my preferred, although it is not as a simple, would be to initiate a script on click which will make an AJAX call to the retrieve each item's JSON feed (Example: dev.brayintl.com/ultraflo-06.24.16/industrial-products/butterfly-valves/item/5-399-392-series?format=json ) and parse the data on the fly.
You can use a script like Underscore or Moustache to parse this easily.
I personally think this would be better for performance although it is a bit more difficult.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
I mentioned underscore and moustache in case you where familiar with them, no need to dig into them for a simple task.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
Now I would break the category (category.php) into two loops, one the category_item.php, the default one, and then one which introduce a new file which only includes the title and the link to main content.
<?php if(isset($this->leading) && count($this->leading)): ?>
<!-- Leading items -->
<div id="itemListLeading">
<ul class="nav nav-tabs" role="tablist">
<?php foreach($this->leading as $key=>$item): ?>
<li role="presentation"<?php if($key == 0) echo ' class="active"'; ?>>
<?php echo $this->loadTemplate('item__content'); ?>
</li>
<?php endforeach; ?>
</ul>
<div class="tab-content">
<?php foreach($this->leading as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if((($key+1)%($this->params->get('num_leading_columns'))==0) || count($this->leading)<$this->params->get('num_leading_columns'))
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<div class="itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->leading)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('num_leading_columns'), 1).'%;"'; ?>>
<?php
// Load category_item.php by default
$this->item = $item;
echo $this->loadTemplate('item');
?>
</div>
<?php if(($key+1)%($this->params->get('num_leading_columns'))==0): ?>
<div class="clr"></div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<div class="clr"></div>
</div>
<?php endif; ?>
The new one is echo $this->loadTemplate('item_title');
Now if your template is using bootstrap you need to read this: getbootstrap.com/javascript/#tabs
In the category_item_title.php file I would only display the title alongside with the handle.
eg:
<a href="#item<?php echo $this->item->id; ?>" aria-controls="home" role="tab" data-toggle="tab">
<?php echo $this->item->title; ?>
</a>
In the default file (category_item.php) you should add the necesary ID.
Eg:
<div role="tabpanel" class="tab-pane active" id="#item<?php echo $this->item->id; ?>">
...
The rest is CSS. You can adapt this draft to work with other tabs/ sliders scripts.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- JxnGraphix
-
Topic Author
- Offline
- Junior Member
Thanks for your help on this but I'm afraid it resulted in a 500 error. Is this suppose to be in addition to what I've already done? In my original code, I removed (echo $this->loadTemplate('item');) from the category.php file in order to combine the files. But the code you provided loads the item template file. My goal is to combine the category_item.php and category.php files into one. Can this be done and how?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
It allows you to have tabs in the category's view.
You can replace the $this->loadTemplate('item') and $this->loadTemplate('item__content'); with elements you want to show.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.