Nice layout for easytabs related products tab for Magento

Pay-Per-Click-Management-Banner-Background-Image

As you may know the easytabs extension for Magento is nice but the layout on the related products tab is awful by default.

Here is a nicer layout for you achieved by changing the code in app/design/frontend/your template/default/template/easytabs/catalogproductrelated.phtml you can play with the CSS if you want some different colours.

Completely replace catalogproductrelated.phtml with this code

<?php if($this->getItems()->getSize()): ?>
<?php $_collectionSize = 9; ?>
<?php $_columnCount = 4; ?>
<p><strong><?php echo $this->__('Check items to add to the cart or') ?>&nbsp;<a href="#" onclick="selectAllRelated(this);return false;"><?php echo $this->__('select all') ?></a></strong></p>
<ol class="related-products-grid">
<?php $i=0; foreach($this->getItems() as $_item): ?>
<?php if ($i==$_columnCount): ?>
<?php $i = 0; ?>
</ol><ol class="related-products-grid">
<?php endif ?>
<li class="item<?php if ($i==0): ?> first<?php elseif($i==3): ?> last<?php endif; ?>">
<div class="product-images">
<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
<span class="checkbox-container">
<?php if (!$_item->getRequiredOptions()): ?>
<input type="checkbox" class="related-checkbox left" id="related-checkbox<?php echo $_item->getId() ?>" name="related_products[]" value="<?php echo $_item->getId() ?>" />
<?php endif; ?>
</span>
<?php else: ?>
<span class="checkbox-container">&nbsp;</span>
<?php endif; ?>
<a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(135) ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" width="135" height="135" /></a>
</div>
<div class="product-details">
<a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a>
<?php echo $this->getPriceHtml($_item, true) ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<a href="<?php echo $this->getAddToWishlistUrl($_item) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a>
<?php endif; ?>
</div>
</li>
<?php $i = $i + 1 ?>
<?php endforeach ?>
</ol>
<script type="text/javascript">decorateGeneric($$('ol.products-grid'), ['odd','even','first','last'])</script>
<script type="text/javascript">
<!--
$$('.related-checkbox').each(function(elem){
Event.observe(elem, 'click', addRelatedToProduct)
});

var relatedProductsCheckFlag = false;
function selectAllRelated(txt){
if (relatedProductsCheckFlag == false) {
$$(‘.related-checkbox’).each(function(elem){
elem.checked = true;
});
relatedProductsCheckFlag = true;
txt.innerHTML=”<?php echo $this->__(‘unselect all’) ?>”;
} else {
$$(‘.related-checkbox’).each(function(elem){
elem.checked = false;
});
relatedProductsCheckFlag = false;
txt.innerHTML=”<?php echo $this->__(‘select all’) ?>”;
}
addRelatedToProduct();
}

function addRelatedToProduct(){
var checkboxes = $$(‘.related-checkbox’);
var values = [];
for(var i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked) values.push(checkboxes[i].value);
}
if($(‘related-products-field’)){
$(‘related-products-field’).value = values.join(‘,’);
}
}
//–>
</script>
<?php endif ?>

What will it look like?

easytabs-related