Keyword

K2 Category Layout

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago #157261 by JxnGraphix
K2 Category Layout was created by JxnGraphix
Hi,


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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #157271 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
You could do it all in the category_tem.php file.
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
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago - 8 years 8 months ago #157283 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks Krikor! How would I go about combing the two files? When I tried adding the code from category_item.php to category.php, it produced and error. When I adding vice versa, it still includes the code from category.php. Do I need an include or require statement?

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"];
?>
Last edit: 8 years 8 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
8 years 7 months ago #157292 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
This is also a choice, although imho it might cause some cluttering.
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
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 7 months ago #157306 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks for the reply Krikor, but you still haven't answered any of my original questions. I tried using the category_item.php as you suggested and replacing the foreach statement with my own code but neither worked. Could you please provide more detail as to what code to use when replacing the foreach statement? Also, can you provide any insight regarding the session_start() errors? Thanks in advance!

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 7 months ago #157322 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Instead of loading the template file (using the category_item.php) you can merge these files.

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
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 7 months ago #157343 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks! But when I tried adding the category_item.php to the category.php file, the image titles display fine but the item image code below does not display the images at all. Any suggestions?
<?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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 7 months ago #157351 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Did you strip the $this->item=$item; part?
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
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 7 months ago #157354 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
No, I did not strip that part. No, it does not produce anything. See below for exact code used...
<?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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 7 months ago #157388 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Is there a link to the dev site?

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
8 years 7 months ago - 8 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: 8 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
8 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
8 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
8 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
8 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
8 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
8 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
8 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