OpenCart Community

Posted: **Sat May 15, 2010 2:09 am**

Hello everyone. This is my first Contribution, and it's a small one. I have been playing with OpenCart for a few months now and have finally decided to build and launch a full website based on OpenCart. During my venture building the website so far, I wanted to integrate a Featured Content Slider like you see on my websites such as Crutchfield.Com and others. Being that OpenCart uses jQuery, there are a lot of options for this. I wanted a pretty basic one that would allow for as many images and links as needed and would load everything automatically. The actual script I used and tutorial can be found here: http://webdeveloperplus.com/jquery/feat ... jquery-ui/" onclick="window.open(this.href);return false;. For the purpose of OpenCart though, I am writing this contribution to help others integrate it.

Working demo of what mine looks like and how it works: http://www.12voltsupplyhouse.com/" onclick="window.open(this.href);return false;

So, without further a-do here goes nothings:

Integrate the jQuery UI
OpenCart does not include the jQuery UI by default from what I could tell so I simply copied the jQuery UI code and saved it to the proper location and then included it in my template.

1. Go to http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" onclick="window.open(this.href);return false; and copy all of the text (CTRL-A + CTRL-C)
2. Create a new file: catalog/view/javascript/jquery/jquery-ui-1.5.3.min.js
3. Open: catalog/view/theme/YOUR_THEME/template/common/header.tpl and add the following line between <head> and </head>

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-ui-1.5.3.min.js"></script>

Integrate the Feature Content Slider JS into your template
As you can tell my home page is completely different than the rest of the website. I do not have any of the modules displayed on the home page. My home page is completely custom. I have integrated my featured content slider on my home page so that directions below use the home page template.

1. Open: catalog/view/theme/YOUR_THEME/template/common/home.tpl and add the following line under the header, and/or column_left, and/or column_right code:

Code: Select all

<script type="text/javascript">$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});</script>

Include the CSS styles
These styles are specific to my content slider so with this CSS your slider will look identical to mine, minus the red background image (unless you take mine). You can put the styles in home.tpl directly or in your stylesheet. I put mine at the top of the home.tpl file under the JS code that we previously added.

Code: Select all

<style type="text/css">
	#featured								{ background:#ffffff; height:250px; padding-right:250px; position:relative; width:745px; }
	#featured ul.ui-tabs-nav				{ left:720px; list-style:none; margin:0px; padding:0px; position:absolute; top:0px; width:275px; }
	#featured ul.ui-tabs-nav li				{ border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; color:#666666; font-size:12px; }
	#featured ul.ui-tabs-nav li span		{ font-size:14px; font-weight:bold; padding:5px; }
	#featured ul.ui-tabs-nav li small		{ font-size:11px; padding:5px; }
	#featured .ui-tabs-panel				{ background:#ffffff; border:1px solid #cccccc; height:243px; overflow:hidden; position:relative; width:720px; }
	#featured .ui-tabs-hide					{ display:none; }
	#featured li.ui-tabs-nav-item a			{ background:#ffffff; color:#000000; display:block; height:60px; line-height:30px; outline:none; text-decoration:none; }
	#featured li.ui-tabs-nav-item a:hover	{ background:#f5f5f5; text-decoration:none; }
	#featured li.ui-tabs-selected			{ color:#ffffff; text-decoration:none; }
	#featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:transparent url('catalog/view/theme/12volt/image/selected-item.gif') no-repeat; color:#ffffff; text-decoration:none; }
	#featured ul.ui-tabs-nav li img			{ background:#fff; border:1px solid #eee; float:left; margin:2px 5px; padding:2px; }
	#featured .ui-tabs-panel .info			{ background:url('catalog/view/theme/12volt/image/transparent-bg.png'); left:0px; height:70px; position:absolute; top:180px; width:400px; }
	#featured .info h2						{ color:#fff; font-family:Georgia, serif; font-size:18px; margin:0px; overflow:hidden; padding:5px; }
	#featured .info p						{ color:#f0f0f0; font-family:Verdana; font-size:11px; line-height:15px; margin:0px 5px; }
	#featured .info a						{ color:#fff; text-decoration:none; }
	#featured .info a:hover					{ text-decoration:underline; }
</style>

Please keep in mind that you will need to adjust the styles as far as width, colors, etc. goes to match your template.

Integrate the HTML code
The HTML code is pretty straight forward. You will want to add the code below to wherever you want the slider to appear.

Code: Select all

<div id="featured" >
	<ul class="ui-tabs-nav">
		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" style="border-top:1px solid #cccccc;">
			<a href="#fragment-1">
				<span>Car Audio/Video & Security</span><br />
				<small>The latest in car alarms, stereos and other electronics.</small>
			</a>
		</li>
		<li class="ui-tabs-nav-item" id="nav-fragment-2">
			<a href="#fragment-2">
				<span>Marine Electronics</span><br />
				<small>The best brands in marine stereos and electronics.</small>
			</a>
		</li>
		<li class="ui-tabs-nav-item" id="nav-fragment-3">
			<a href="#fragment-3">
				<span>Public Forums</span><br />
				<small>Need Help? Check out our active community!</small>
			</a>
		</li>
		<li class="ui-tabs-nav-item" id="nav-fragment-4">
			<a href="#fragment-4">
				<span>Connectors & Diagrams</span><br />
				<small>The largest selection of connectors and diagrams.</small>
			</a>
		</li>
	</ul>
	<div id="fragment-1" class="ui-tabs-panel"><a href="URL_HERE"><img src="image/featured/car-audio-video-security.jpg" alt="" /></a></div>
	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/marine-electronics.jpg" alt="" /></a></div>
	<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/public-forums.jpg" alt="" /></a></div>
	<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/wiring-diagrams-connectors.jpg" alt="" /></a></div>
</div>

Again, please keep in mind that you will need to change the images and text to match what you want displayed.

Conclusion
All in all, this is a really easy integration I think. If I am wrong, let me know. If you need any help, please feel free to private message me. I am a very nice and easy going person so I will be happy to help. I would prefer that you posted here in the thread though so that if someone else is having the same problem, I can answer the question to everyone.

Enjoy and happy coding!

Posted: **Thu Jun 03, 2010 5:04 pm**

cool!

Posted: **Fri Jun 04, 2010 3:03 am**

Nice work Adam, and very timely. I'm about to provide something similar on a new site and you've just saved me a load of time. Thank you very much!

Posted: **Fri Jun 04, 2010 5:34 am**

maranjo wrote:Nice work Adam, and very timely. I'm about to provide something similar on a new site and you've just saved me a load of time. Thank you very much!

Not a problem. I am helping another forum member right now via private message so let me know if you need any help. Enjoy!

Posted: **Mon Jun 21, 2010 5:23 am**

amazing idea, im just struggling to get the js to kick in..

Posted: **Thu Jun 24, 2010 6:23 am**

DannyMacD wrote:amazing idea, im just struggling to get the js to kick in..

You can also link straight to google's API if you want. That might make things a bit easier as far as the javascript not working.

Posted: **Thu Jun 24, 2010 8:31 am**

A caution about linking to CDNs and google for jquery apis... keep in mind that if you have SSL on your site, you will see security errors if pulling scripts from a non-secure location. So unless your CDN offers an https option, you are better off calling the files locally

Posted: **Mon Jul 05, 2010 5:45 am**

hiya
its informative articles and I am working my template, slider working but images not loading I do all same step by step but I dono why images not slides , need your help thanks

Posted: **Tue Jul 06, 2010 6:30 pm**

works like a charm. thanks alot.

Posted: **Wed Jul 07, 2010 8:02 am**

Glad to see that some people have been able to get this to work. Here is something to keep in mind: you really need to know CSS to get this working properly. My site is so modified that I have the template stretched and the home page has no "modules" on it which gives me more space for larger images. If anyone needs help, you can PM me but please make sure you include the URL of the website that you are working on.

Posted: **Fri Jul 16, 2010 3:48 pm**

Hello, I'm Italian: excuse me if I speak bad English, I hope you understand.

I followed the steps to put the slide, but I do not work. The HTML code I have added SYSTEM - PREFERENCES - STORE - welcome message. But this happens to me:

http://www.topacquisti.it

Suggestions?
THANKS FOR THE HELP

OPENCART project is amazing

Posted: **Wed Sep 22, 2010 5:23 am**

great >>>>>

Posted: **Fri Oct 08, 2010 12:57 am**

Google supplies all of its scripts for SSL also:
Change the script url from:
http
to:
https

Posted: **Mon Oct 18, 2010 1:05 pm**

Sorry that I have not been real active. I am going through a lot in my life. My offer is still on the table, if anyone needs help please PM me. It is better to PM me so I see your message because if you update this topic, I will not get an email as I do not subscribe to topics themselves to keep my email in take low.

Posted: **Fri Apr 15, 2011 8:55 am**

I love how it looks!

Posted: **Sun Apr 17, 2011 3:29 am**

Hello,

I tried your piece of work and I appreciate the amount of time and dedication you have given to it. I have integrated the featured slideshow onto my website to see how it works.Initially, it worked all good. But when the entire site was completed, to my surprise, I find out that the images on the left hand side of the plugin do not toggle.

I will elaborate the problem in a better way. The jQuery plugin works perfectly fine. I have integrated it as per your instructions. The css has been defined accordingly. The plugin toggles the right side, i.e., the description part and shows the corresponding image related to this tab. After 5 seconds, the right hand side tab toggles to the next element as well as takes the respective styling. What it fails to do is change the image on the left side panel.

I am trying to fix this problem for the last 3 days, yet no success. I hope you can suggest a way to overcome this problem. I feel, I am the only one who has encountered such a problem.

Thanks & Regards,
ghostrider.

Posted: **Thu Sep 08, 2011 10:34 pm**

I did something similar to this post for my site (worked it out for myself then saw this post lol!), but anyone have any idea why the slider would interfere with the tabs on the product pages???

If you look at http://www.cosplaycostumecloset.com you will see the chat, facebook and twitter sliders on the left. Click on a product and the reviews, availability info and related products sections that were in the normal oc tabs before I did the sliders are now displaying under each other without the tab showing. A site I haven't added the sliders to yet, http://www.potjiepots.com, displays the tabs correctly.

Looked thru everything and for the life of me cannot figure out why.

My exact code is:

stylesheet addition:

Code: Select all

.slide-out-div {
padding: 20px;
width: 250px;
background: #ffffff;
border: #29216d 1px solid;
z-index: 1000;
}   
.slide-out-div2 {
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
width: 300px;
height: 400px;
background: #ffffff;
border: #29216d 1px solid;
z-index: 999;
}      
.slide-out-div3 {
padding: 20px;
width: 250px;
height: 300px;
background: #ffffff;
border: #29216d 1px solid;
z-index: 998;
}

Header.tpl - If I remove this code the tabs reappear correctly but I cannot figure out why??

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://www.labeshops.com/catalog/view/javascript/jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
	$('.slide-out-div').tabSlideOut({
    	tabHandle: '.handle',  //class of the element that will become your tab
    	pathToTabImage: '../images/chat_icon72.png', //path to the image for the tab
    	imageHeight: '72px',   //height of tab image
    	imageWidth: '72px',  //width of tab image
    	tabLocation: 'left', //where tab lives, top, right, bottom, or left
    	speed: 300,  //speed of animation
    	action: 'click',  //options: 'click' or 'hover', action to trigger animation
    	topPos: '100px', //position from the top/ use if tabLocation is left or right
    	leftPos: '20px',  //position from left/ use if tabLocation is bottom or top
    	fixedPosition: true,  //options: true makes it stick(fixed position) on scroll
		onLoadSlideOut: false 
    });
	$('.slide-out-div2').tabSlideOut({
    	tabHandle: '.handle2',  //class of the element that will become your tab
    	pathToTabImage: '../images/facebook-icon72.png', //path to the image for the tab
    	imageHeight: '72px',   //height of tab image
    	imageWidth: '72px',  //width of tab image
    	tabLocation: 'left', //where tab lives, top, right, bottom, or left
    	speed: 300,  //speed of animation
    	action: 'click',  //options: 'click' or 'hover', action to trigger animation
    	topPos: '180px', //position from the top/ use if tabLocation is left or right
    	leftPos: '20px',  //position from left/ use if tabLocation is bottom or top
    	fixedPosition: true,  //options: true makes it stick(fixed position) on scroll
		onLoadSlideOut: false 
    });
	$('.slide-out-div3').tabSlideOut({
    	tabHandle: '.handle3',  //class of the element that will become your tab
    	pathToTabImage: '../images/twitter-icon72.png', //path to the image for the tab
    	imageHeight: '72px',   //height of tab image
    	imageWidth: '72px',  //width of tab image
    	tabLocation: 'left', //where tab lives, top, right, bottom, or left
    	speed: 300,  //speed of animation
    	action: 'click',  //options: 'click' or 'hover', action to trigger animation
    	topPos: '260px', //position from the top/ use if tabLocation is left or right
    	leftPos: '20px',  //position from left/ use if tabLocation is bottom or top
    	fixedPosition: true,  //options: true makes it stick(fixed position) on scroll
		onLoadSlideOut: false 
    });
	
	
});
</script>

Footer.tpl

Code: Select all

       <div class="slide-out-div"><center>
            <a class="handle" href="http://link-for-non-js-users.html">Content</a>
            <p><!-- BEGIN Comm100 Live Chat Button Code --><link href="https://chatserver.comm100.com/css/comm100_livechatbutton.css" rel="stylesheet" type="text/css"/><div id="comm100_ChatButton"><div id="comm100_warp"><center><div id="comm100_dvhelp"><a class="comm100_ahelp_css" href="http://www.comm100.com/livechat/" onclick="comm100_Chat();return false;" target="_blank" title="Live Chat Software for Website"><img id="comm100_ButtonImage" src="https://chatserver.comm100.com/BBS.aspx?siteId=104716&planId=926&partnerId=-1" style="border:0px" alt="Live Chat Software for Website" /></a><script src="https://chatserver.comm100.com/js/LiveChat.js?siteId=104716&planId=926&partnerId=-1" type="text/javascript"></script><div id="comm100_track"></div></div></center></div></div><!-- End Comm100 Live Chat Button Code --><br>
<b>US Toll Free:</b><br><h2> 877-822-3318</h2>
<h4>407-574-5327</h4>
Other ways to <a href="/index.php?route=information/contact">Contact Us</a></center>
            </p>
        </div>
		

        <div class="slide-out-div2">
            <a class="handle2" href="http://link-for-non-js-users.html">Content</a>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/cosplaycostumecloset" width="292" show_faces="false" border_color="" stream="true" header="false"></fb:like-box>
        </div>

        <div class="slide-out-div3">
            <a class="handle3" href="http://link-for-non-js-users.html">Content</a>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 9,
  interval: 30000,
  width: 250,
  height: 200,
  theme: {
    shell: {
      background: '#f5edf5',
      color: '#0d0d0d'
    },
    tweets: {
      background: '#f5ebf5',
      color: '#0a0a0a',
      links: '#3c7a22'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('CosplayCostumes').start();
</script>

        </div>

Posted: **Thu Sep 08, 2011 10:52 pm**

Okay, nevermind. I figured it out.

I removed

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

from the header.tpl and it fixed the issue. Apparently it's not needed for what I was doing and somehow interferes with the tabs

OpenCart Community

jQuery Based Featured Content Slider

jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider

Re: jQuery Based Featured Content Slider