Create a category accordion opencart module

OpenCart is an open source PHP-based online e-commerce solution. There are thousands of e-commerce websites built in opencart. Opencart has it’s own style to show data to user. Here I want to change category listing style. I want to view my category listing in according style. This solution is upto 1.5.6.4 opencart version. So what I do for this, just follow me.
Step 1: Open category.tpl from your_root_directory/catalog/view/theme/Your Theme Name/template/module. Comment all code and paste the below code:

<style>
/* This is for styleing category, You may give your own */
.topnav {
	width: 213px;
	padding: 40px 28px 25px 0;
	font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}

ul.topnav {
	padding: 0;
	margin: 0;
	font-size: 1em;
	line-height: 0.5em;
	list-style: none;
}

ul.topnav li {}

ul.topnav li a {
	line-height: 10px;
	font-size: 11px;
	padding: 10px 5px;
	color: #000;
	display: block;
	text-decoration: none;
	font-weight: bolder;
}

ul.topnav li a:hover {
	background-color:#675C7C;
	color:white;
}

ul.topnav ul {
	margin: 0;
	padding: 0;
	display: none;
}

ul.topnav ul li {
	margin: 0;
	padding: 0;
	clear: both;
}

ul.topnav ul li a {
	padding-left: 20px;
	font-size: 10px;
	font-weight: normal;
	outline:0;
}

ul.topnav ul li a:hover {
	background-color:#D3C99C;
	color:#675C7C;
}

ul.topnav ul ul li a {
	color:silver;
	padding-left: 40px;
}

ul.topnav ul ul li a:hover {
	background-color:#D3CEB8;
	color:#675C7C;
}

ul.topnav span{
	float:right;
}
.top_above span{
	
}
.topnav{width:160px!important;}
.topnav li{clear:both;}
.topnav li:first-child{border-bottom:none;}
.topnav > li a{border-bottom:1px solid #eeeeee;}
.topnav > li a:first-child{float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:125px;}
.topnav > li a:nth-child(2){float:right!important;}
.topnav:after{display:table;content:'';clear:both;}
.topnav ul{list-style-type:none;clear:both;}
.topnav > ul li a{display:block;width:125px;}
</style>
<script type="text/javascript" src="catalog/view/javascript/jquery/scriptbreaker-multiple-accordion-1.js"></script>

<script language="JavaScript">

$(document).ready(function() {
	$(".topnav").accordion({
		accordion:false,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});

</script>
<div class="box">
	<div class="box-heading"><?php echo $heading_title; ?></div>
	<div class="box-content"> 	   
		<ul class="topnav">
			<?php foreach ($categories as $category) { ?>
				<li>
					<?php if ($category['category_id'] == $category_id) { ?>
					<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
					<?php } else { ?>
					<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
					<?php } ?>
					<?php if ($category['children']) { ?>
					<ul>
					  <?php foreach ($category['children'] as $child) { ?>
					  <li>
						<?php if ($child['category_id'] == $child_id) { ?>
						<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
						<?php } else { ?>
						<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
						<?php } ?>
					  </li>
					  <?php } ?>
					</ul>
					<?php } ?>
				</li>
			<?php } ?>
		</ul>
	</div>
</div>

Step 2: Now download a js file from here.

Paste this js file to this location your_root_directory/catalog/view/javascript/jquery/.
Now you get your opencart category listing like the below image
category_accordian




Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •