Fixed Position Sliding Panel for Opencart

A sliding panel is a handy way to present information to a customer browsing your website. Taking advantage of a sliding panel with a fixed position tab toward the top left corner of the screen means that crucial and important information will only ever be a single click away, regardless of which particular page of your website the customer is browsing.

The sliding panel will take up minimal screen space when it is innacctive but once clicked it can be used to display contact details, link to a contact page, basically whatever you like (text/html).

Here is a quick how to for adding a sliding panel to your opencart installation. It is adapted from a guide on www.iamkreative.co.uk, so many thanks to Kevin over there for his fine guide. In the following example we'll set up a questions tab, with a fixed position, to be displayed on every page; the content of the sliding panel will be telephone and email contact details.

Edit your header file

Head over to your header template file located at catalog/view/theme/*/template/common/header.tpl where * is the name of your opencart theme. We're making these edits to the header template file as edits to this file will affect all pages on your website (we want our question tab & sliding panel to be displayed on all pages).

Buy this mod in a handy vQmod file

  • No modification of core files.
  • Drag and drop installation process.
  • Requires vQmod.
  • Minified js file.
  • Seperate stylesheet to keep your markup tidy.
  • Distribution and resale of this mod is prohibited.

Get Sliding Panel for Opencart now for only $2.99 USD (£1.794 or €2.1528). Pay now with paypal for an instant download link and email.

View demo

Your html mark up

Find <body> and add the following code after it.

<div id="slidepanel"> <!--the hidden panel -->
    <div class="slidecontent">
		<!--insert your content here -->
		<h3>Need to get in touch?</h3>
		<p>Call us on 01234 567890 </p>
		<p>Contact us by <a href="">email</a></p>
    </div>	
</div>
<!--if javascript is disabled use this link-->
<a href="index.php?route=information/contact" onclick="return()">
    <div id="slidetab"> <!-- this will activate your panel. -->              	
    </div> 
</a> 

Explain the html mark up

The slidepanel will be the box that slides out, slidecontent will be the contents of this box. You can put what you like here, I've put a telephone number and a link to email.

The sidetab be set to have text content but I think it will look better with a background image (set with css). Upon clicking the sidetab the slidepanel will slide out. In a case where javascript is not enabled I've set the link to point to the default contact us page for opencart.

Your styles (css)

Find </head> and add the following code just before it.

<style type="text/css">
#slidetab {
	width:60px;
	height:150px;
	position:fixed;
	left:-10px;
	top:100px;
	display:block;
	cursor:pointer;
	background-image:url('image/question-tab.jpg');
	box-shadow: 4px 4px 3px 0 rgba(1, 1, 1, 0.1);
	z-index:99999;
}
#slidepanel {
    position:fixed;
	left:0px;
	top:100px;
	height:150px;
	width:0;/*new line*/
	margin-left:50px;	
	background-color:#fff;
	box-shadow: 4px 4px 3px 0 rgba(1, 1, 1, 0.1);
	overflow:hidden;
	z-index:99998;
}
#slidepanel .slidecontent {
	width:230px;
	margin-left:20px;
}
</style>

Explain the styles

The slidetab is set with a fixed position, assigned a background image, some drop shadow and a high z-index.

The slidepanel set with a fixed position, some drop shadow and a high z-index. The interesting part is that the width is set to 0 - this will be increased with javascript once the slide tab has been clicked. Also, the overflow is hidden - so that if javascript is disabled the slidepanel content will not be shown upon page load.

The slidecontent is the container for your text or html, it has a set width and margin-left.

jquery javascript

The following javascript can sit just before <style type="text/css">, the block of css that we've just added.

<script type="text/javascript">
$(document).ready(function(){
 
 $(".slidecontent").hide();
 
 $('#slidetab').toggle(function(){ //adding a toggle function to the #slidetab
  $('#slidepanel').stop().animate({width:"220px", opacity:0.9}, 500, function() {//#slidepanel to 220px
   $('.slidecontent').fadeIn('slow'); //slides the content into view.
  });  
 },
 function(){ //when the #slidetab is next cliked
  $('.slidecontent').fadeOut('slow', function() { //fade out the content 
   $('#slidepanel').stop().animate({width:"0", opacity:0.1}, 500); //#slidepanel back to a width of 0
  });
 });
 
});
</script>

Explain the javascript

The javascript loads on document ready (once the page has loaded).

The container with class slidecontent is set to hidden.

The container with id slidetab is set to toggle. When clicked the slidepanel will animate, increase its width from 0 to 220px and the slidecontent will fade in.

When the slidetab is clicked again the slidecontent will fade out and the slidepanel will animate, decrease its width from 220px to 0.

The script requires jquery - it works with 1.7.1. It should already be loaded by opencart, you may need to look in your header.tpl file to check your jquery version.

The Result...

Buy this mod in a handy vQmod file

  • No modification of core files.
  • Drag and drop installation process.
  • Requires vQmod.
  • Minified js file.
  • Seperate stylesheet to keep your markup tidy.
  • Distribution and resale of this mod is prohibited.

Get Sliding Panel for Opencart now for only $2.99 USD (£1.794 or €2.1528). Pay now with paypal for an instant download link and email.

View demo