Home Page Category Banner

1.md

Add a Home Page Banner with Featured Categories

Change the standard carousel home banner to have a featured banner but also highlighting three categories.

• Display the advert headline and advert description in the call to action caption.
• List out three categories sorted by their sort order number

Demo:

http://devphil.neto.com.au/?nview=leftside

Create for:

https://github.com/NetoECommerce/Designer-Docs/tree/master/src/tweaklibrary/homepage

banner_category_caption.template.html

<div class="banner-image-wrapper col-xs-12 col-sm-8">
	<a href="[@url@]">
		<img src="[%asset_url type:'adw' id:'[@ad_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="home-banner-item" alt="[@headline@]" border="0" >
	</a>
	[%content_menu content_type:'category' sortby:'sortorder,name' show_empty:'1' limit:'3'%]
		[%param header%]
			[%set [@img_count@]%]0[%/set%]
		[%/ param%]
		[%param *level_1%]				
			<div class="image-overlay-[@img_count@] banner-category-image-overlay-item" style="background-image: url([%asset_url type:'category' id:'[@id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%END asset_url%]);"></div>
			[%set [@^img_count@]%][%calc [@img_count@] + 1 /%][%/set%]
		[%/param%]
	[%/ content_menu%]		
</div>
<div class="banner-caption-wrapper col-xs-12 col-sm-4">
	<a href="[@url@]" class="banner-caption-link">
		<div class="banner-caption-title">
			[%if [@headline@]%]<h3>[@headline@]</h3>[%/if%]
			[%if [@description@]%]<p>[@description@]</p>[%/if%]
		</div>
	</a>
	[%content_menu content_type:'category' sortby:'sortorder,name' show_empty:'1' limit:'3'%]
		[%param header%]
			[%set [@cap_count@]%]0[%/set%]
			<div class="banner-category-menu">
			<ul>
		[%/param%]
		[%param *level_1%]				
			<li>
				<a href="[@url@]" class="banner-category-[@cap_count@] banner-category-menu-link-item" data-category-count="[@cap_count@]">[@name@]</a>
			</li>
			[%set [@^cap_count@]%][%calc [@cap_count@] + 1 /%][%/set%]
		[%/param%]
		[%param footer%]							
			</ul>
			</div>
		[%/ param%]
	[%/ content_menu%]		
</div>

home.html

[%site_value id:'footer_javascript'%]
	<script type="text/javascript" language="javascript">
		$('.banner-category-menu-link-item')
			.mouseout(overlayHide)
			.mouseover(overlayActive);
		
		function overlayActive(){
			var categoryNum = $(this).attr('data-category-count');
			$('.banner-image-wrapper .image-overlay-' + categoryNum).addClass("active");
		}	
		function overlayHide(){
			var categoryNum = $(this).attr('data-category-count');
			$('.banner-image-wrapper .image-overlay-' + categoryNum).removeClass("active");
		}
	</script>
[%/site_value%]

	[%if [@config:show_home_ads@]%]
		[%advert type:'text' template:'banner_category_caption' limit:'1' ad_group:''%]
			[%param *header%]
				<div id="homepageCarousel" class="row">
			[%/param%]
			[%param *footer%]
				</div>
			[%/param%]
			[%param *ifempty%]
				<a class="neto-placeholder neto-placeholder-rotator btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" href="[@config:home_url@]/_cpanel?item=adw&page=view&id=New&plan_id=1">
					Click to add a banner<br/>
				</a>
			[%/param%]
		[%/advert%]
	[%/if%]		

style.css

/* Banner Category Caption */
#homepageCarousel{
  background-color: #f8f8f8;
  margin-left: 0;
  margin-right: 0;
}
.banner-image-wrapper{
  position: relative;
  padding-left: 0;
  padding-right: 0;
}
.banner-category-image-overlay-item{
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  transition: all 0.15s ease-in-out 0s;
  opacity: 0;
  background-position: center center;
  background-size: cover;
  display: none;
}
.banner-category-image-overlay-item.active{
  opacity: 1;
  display: block;
  z-index: 1000;
}
.banner-caption-wrapper{
  padding: 30px;
}
.banner-caption-wrapper a.banner-caption-link{
  text-decoration: none;
}
.banner-caption-title{
    background: #337ab7 /*{buttons|primary-colour}*/;
    padding: 25px;
    color: #fff;
    margin-bottom: 10px;
}
.banner-category-menu ul{
  padding: 0;
  margin: 0;
}
.banner-category-menu ul > li{
    list-style-type: none;
    margin: 0;
}
.banner-category-menu ul > li > a{
    padding: 15px 0 15px 10px;
    display: inline-block;
    border-top: 1px solid #ccc;
    color: #000000;
    width: 100%;
    font-weight: 500;
    text-decoration: none;
}
.banner-category-menu ul > li:first-child > a{
  border-top: 1px solid #f8f8f8;
}
@media(max-width: 991px){
  .banner-caption-wrapper{
    padding: 15px
  }
  .banner-caption-title{
    padding: 15px;
    margin-bottom: 0;
  }
}
@media(max-width: 767px){
  .banner-category-menu{
    display: none;
  }
  .banner-caption-wrapper{
    padding: 0;
  }
  .banner-caption-title{
    padding: 20px 15px;
    text-align: center;
  }
}