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)
Install K2
Copy folder /components/com_k2/templates/default INTO templates/YOURTEMPLATENAME/html/com_k2/templates
- Change folder name to something unique. eg: tablelist
- Your new k2 sub template path will now be this:
- templates/YOURTEMPLATENAME/html/com_k2/templates/tablelist
- Your new k2 sub template path will now be this:
- Change folder name to something unique. eg: tablelist
Edit /templates/YOURTEMPLATE/html/com_k2/templates/tablelist/category_item.php
- Paste the following code into category_item.php
<!-- 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 -->- Change "EXTRAFIELDALIAS1" to the alias of the specific extra field for that column.
- Paste the following code into category_item.php
Paste this into your template.css (preferably custom.css if your template has one)
/* 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 */
Adjust the above padding and width to your liking for your specific template.
Edit the k2 category that you want to display in this list layout
- Choose "tablelist from the "Select a template" under "Category Item Layout" parameter panel on right
- Set "Layout Grid" to 1 for "Columns for Leading"
- Hide all but "Title", "Link on Title ", and "Extra fields" form the "Items view options in category listings"