To create your product grid you will need to first setup k2mart custom listing overrides.
Once that is done create a new mod_k2_content module item and add it to your template. My grid is fairly large so it goes in the "bottom" position under the content.
Change module settings
- Change the "Select sub-template" to your new custom override directory.
- Select the categories or specific items, I chose categories to make it simple
- Configure all of the things you would like to show, I turned off everything but the image; all of the items prices and names come from the k2mart plugin so we dont need any of the k2 items properties
!important: Before saving your module, make sure to enable k2 plugins under advanced in the module. Or k2mart will not load.
Now that your module is all setup we can make grid changes. Open up Template/html/mod_k2_content/CUSTOM_OVERRIDE/default.php file to alter the default list behavior. In this file you will find that the k2 items are setup in an HTML list.
Add a class of "productGrid" to the UL and "boxItem" to the LI.
//around line 20
<ul class="productGrid">
<?php foreach ($items as $key=>$item):
//around line 26
<li class="<?php echo ($key%2) ? "odd" : "even"; if(count($items)==$key+1) echo ' lastItem'; ?> boxItem">
Now go adjust your template style sheets to get the list items to behave as a grid. I wanted all of my k2 items in a box format to fit 4 items per row. To do this I made each list item a block with a width and padding to ensure they would fit in 980px.
.productGrid li.boxItem
{
color:#D76024;
display:block;
float:left;
font-weight:bold;
font-size:14px !important;
padding:5px 20px 5px 20px;
width:200px;
}
Now we have a grid of our products but the k2 mart product boxes are ugly. Lets go fix that too.
Open up the custom override TEMPLATE/html/k2mart/module.php
Change the module.php k2mart class from class="itemVmFields" to class="itemGrid".
To get my desired look of Product Name, then Image, then Price, I copied over the image display from the mod_k2_content file. As you can see I removed the LI item for the product name and put it into an h4 tag before the image.
//K2mart STARTS HERE
<div class="itemGrid">
//moved product name into h4
<?php if($this->params->get('moduleProductName') && !empty($product->name)): ?>
<h4 >
<span class="itemLabel"><?php echo JText::_('Name'); ?>:</span>
<span class="itemValue"><?php echo $product->name; ?></span>
</h4>
<?php endif; ?>
//Image code pulled from mod_k2_content/default.php
<?php if(isset($item)):?>
<div class="moduleItemIntrotext">
<a class="moduleItemImage" href="<?php echo $item->link; ?>" title="<?php echo JText::_('Continue reading'); ?> "<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"">
<img src="<?php echo $item->image; ?>" alt="<?php echo $item->title; ?>"/>
</a>
</div>
<?php endif;?>
<ul>
Now lets play with our style sheets for the k2mart items in our grid
.itemGrid ul { margin:0px; padding:0px;}
.itemGrid ul li{ margin:0px; padding:0px; height:auto; list-style:none;}
.itemGrid h4{ color:#AAA;}
Of course then I played with buttons and text styles, but hey its a start.
Final Results:
