Details

Category: Web Design

Created: 05 March 2016

Last Updated: 16 April 2018

I am working with Joomla CMS for multiple Websites since 2010, mainly customizing default templates to meet customers requirements and add some intercativity. mastersong.de is an example of a self-tuned protostar template.

The interactive tiled category listing you see on this page features a mouseover effect and is achived by

1. customizing protostar/html/com_content/categories/default_items.php

   
   defined('_JEXEC') or die;
   
   JHtml::_('bootstrap.tooltip');
   
   $class = ' class="first sv_tile"';
   $lang  = JFactory::getLanguage();
   
   if (count($this->items[$this->parent->id]) > 0 && $this->maxLevelcat != 0) :
   ?>
   	<?php foreach($this->items[$this->parent->id] as $id => $item) : ?>
   		<?php
   		if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
   		if (!isset($this->items[$this->parent->id][$id + 1]))
   		{
   			$class = ' class="last sv_tile"';
   		}
   		?>
   		<div <?php echo $class; ?> >
   		<?php $class = ' class="sv_tile"'; ?>
   			
   			<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
   				<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
   				<img src="/<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt')); ?>" />
   				</a>
   			<?php endif; ?>
   			<h3 class="page-header item-title sv_tile_title">
   				<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
   				<?php echo $this->escape($item->title); ?></a>
   				<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
   					<span class="badge badge-info tip hasTooltip" title="<?php echo JHtml::tooltipText('COM_CONTENT_NUM_ITEMS'); ?>">
   						<?php echo $item->numitems; ?>
   					</span>
   				<?php endif; ?>
   				<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
   					<a id="category-btn-<?php echo $item->id;?>" href="#category-<?php echo $item->id;?>" 
   						data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right"><span class="icon-plus"></span></a>
   				<?php endif;?>
   			</h3>
   			<?php if ($this->params->get('show_subcat_desc_cat') == 1) :?>
   				<?php if ($item->description) : ?>
   					<div class="category-desc">
   						<?php 
   							$myStr = $item->description;
   							if(strpos($myStr, '<hr id=')>0) {
   								$myStr = substr($myStr,0,strpos($myStr,'<hr id='));
   							}?>
   							<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
   							<?php echo JHtml::_('content.prepare', $myStr, '', 'com_content.categories'); ?>
   							</a>
   					</div>
   				<?php endif; ?>
   			<?php endif; ?>
   
   			<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) :?>
   				<div class="collapse fade" id="category-<?php echo $item->id;?>">
   				<?php
   				$this->items[$item->id] = $item->getChildren();
   				$this->parent = $item;
   				$this->maxLevelcat--;
   				echo $this->loadTemplate('items');
   				$this->parent = $item->getParent();
   				$this->maxLevelcat++;
   				?>
   				</div>
   			<?php endif; ?>
   			<p class="clearfix"></p>
   		</div>
   		<?php endif; ?>
   	<?php endforeach; ?>
   <?php endif; ?>
   

2. adding Mouseover fuctionality in JS via Blank Module

   Using the Blank Module, it is easy to create reusable JS or even PHP snippets for multiple Jommla pages and categories. If that code was needed only once, I'd suggest the Sourcerer plugin.

   code>
   /** blend in article descriptions **/
   $('.sv_tile').mouseover(function(){
     $('.sv_tile .category-desc').each(function(){$(this).css('display','none').fadeOut("slow");});
     $(this).children('.sv_tile .category-desc').css('display','block').fadeIn("slow");
   });
   

3. creating some responsive CSS

   to overlay categories short description over image...

Details

Category: Web Design

Created: 04 May 2014

Last Updated: 05 March 2016

Sometimes, all you want is a small blog-like display of a series of news for your xt:Commerce4 webshop. With this small plugin, you can do so. Free of charge. 

After installing the plugin, create a content block called news or blog, and add/assign a few content items to this content block. In the Plugin configuration, enter the appropriate BlockId. Additionally, you can choose a headline for your blogpage in the plugin configuration. So far, this works only for one content block.

Your blog is displayed under the following URL: index.php?page=sv_blog

Alternatively, a blog layout of all content elements of block with id 11 is displayed with the following URL: index.php?page=sv_blog&blockId=11

Enable "short versions" of blog contents if you want to trim lengthy content elements. A Read more link is displayed in that case. Attention: this option may cause trouble if you are using html inside content elements.

Note that after the plugin installation, content items will have a date field in the editor. This is set to current date for new items. The date is displayed in the blog layout if in reasonable range.

The plugin ws tested thorougly, yet comes without warranty. For feedback, please use the contact form.

Download plugin here.

Details

Category: Web Design

Created: 15 April 2014

Last Updated: 05 March 2016

As years go by, technologies progress and design preferences change. In April 2013 I migrated the "www.cyclocross-store.de" from an ancient version of xt:Commerce to the recent xt:Commerce 4.0. The main concern was compatibility of shop and customer data. A configuration tool for custom bicycles was implemented as well as an advisor tool for narrowing the search of wheelsets depending on usage, body weight and other features. Only minor changes where applied to the default template.

By April 2014, the shop template was reworked featuring a modern frontpage layout. Work is in progress to create a blog plugin and backend newsletter administration tool. This is an excellent opportunity to dig into CSS, PHP and JavaScript.