COMMUNITY FORUM
K2 Category Layout
- JxnGraphix
- Topic Author
- Offline
- Junior Member
Less
More
7 years 7 months ago - 7 years 7 months ago #157602
by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Sorry for the delay.
Development site.
There should be a box with an image of a product under each red title.
Last edit: 7 years 7 months ago by JxnGraphix.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
7 years 7 months ago #157619
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic K2 Category Layout
There are two fairly easy ways to solve this,
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.
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
7 years 7 months ago #157667
by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks, Krikor! Shouldn't the code display all the items when the two PHP files are combined? I don't understand why additional code is needed. Plus, I have no idea how to get started with either option. Are you able to provide more detail? I looked up Underscore and understand that it's a JS library but I'm not sure what I'm looking for in order to initiate an on-click script, retrieve the JSON feed or parse the data. I don't expect you to write the code for me but more info would be appreciated.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
7 years 7 months ago #157678
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic K2 Category Layout
I 'll prep a crude draft for you to work on.
I mentioned underscore and moustache in case you where familiar with them, no need to dig into them for a simple task.
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
7 years 7 months ago #157794
by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks, I appreciate the help! How is the draft coming along?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
7 years 7 months ago #157832
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic K2 Category Layout
Sorry I'did not really have the time.
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.
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:
In the default file (category_item.php) you should add the necesary ID.
Eg:
The rest is CSS. You can adapt this draft to work with other tabs/ sliders scripts.
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
7 years 7 months ago #157863
by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Hi Krikor,
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?
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
Less
More
- Posts: 15920
7 years 7 months ago #157873
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic K2 Category Layout
This is a rough sketch to serve as a starting point.
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.
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.