Keyword

K2 Category Layout

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157619 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157678 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157832 by Krikor Boghossian
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.
<?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
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
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?

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157873 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum