Modernmagic News and Joomla Blog

Our client, goodwinrobbins.com, has thousands of products for sale.  They all have many specification that users are searching for.  Therefore we wanted to show those specs in a table-like list.  We opted to use k2 and create a custom k2 sub-template override to display the k2 items and there respective extra fields in a columned list in the category layout view.  

You may need some general K2 knowledge in order to implement this layout.  
[link to k2 documentation]

Steps:

(Due to the long strings of code in this blog post it is best not to view on a mobile device)

1. Install K2

2. Copy folder /components/com_k2/templates/default INTO templates/YOURTEMPLATENAME/html/com_k2/templates

   1. Change folder name to something unique.  eg: tablelist
      1. Your new k2 sub template path will now be this:
         1. templates/YOURTEMPLATENAME/html/com_k2/templates/tablelist

3. Edit /templates/YOURTEMPLATE/html/com_k2/templates/tablelist/category_item.php

   1. Paste the following code into category_item.php

      1. <!-- extrafields columns -->
         <div class="extrafieldscolumns">
         <ul>
         <li><?php echo $this->item->extraFields->EXTRAFIELDALIAS1->value ;?></li>
         <li><?php echo $this->item->extraFields->EXTRAFIELDALIAS2->value ;?></li>
         <li><?php echo $this->item->extraFields->EXTRAFIELDALIAS3->value ;?></li>
         </ul>
         </div>
         <!-- END extrafields columns -->

         1. Change "EXTRAFIELDALIAS1" to the alias of the specific extra field for that column.

4. Paste this into your template.css (preferably custom.css if your template has one)

   1. /* extrafields columns */

      .extrafieldscolumns ul { width: 100%; margin:0;padding:0; /* CSS Reset */ max-width: 1000px; /* restrict the width */ margin: auto; /* center it */}.extrafieldscolumns li { width: 20%; float:left; /* IMPORTANT */ list-style-type: none; display:inline; /* IMPORTANT */}

      /* END extrafields columns */

      1. Adjust the above padding and width to your liking for your specific template.

5. Edit the k2 category that you want to display in this list layout

   1. Choose "tablelist from the "Select a template" under "Category Item Layout" parameter panel on right
   2. Set "Layout Grid" to 1 for "Columns for Leading"
   3. Hide all but "Title", "Link on Title ", and "Extra fields" form the "Items view options in category listings"

It should then look like this example on the from end: