Jump to content

Flash Tutorials loaded in WHMCS

Baja

By Baja
in Third Party Add-ons

 Share

Recommended Posts

Baja Senior Member

Baja

Posted
Posted

For those of you who have purchased tutorials for your clients I have created a way for the flash tutorials to open up with in the whmcs template system instead of in a new window.

 

NOTE: I created this specific for my site and it works perfectly for my needs. I will explain how I did this and include all the code too, but please keep in mind this might need some tweaking and peaking to work perfectly for your site.

 

NOTE: This was done with v3.40

 

NOTE: I used the portal template for this tutorial which I will explain a bit more in detail about how I hide the left navigation in step 6. I did not test this on the default template so I can't tell you if it works or not, I am assuming it will, but do not know for certain.

 

ALSO NOTE: This is common sense but, Please make backups of any files you might care about just in case something goes wrong. I will not be held responsible for anything in this tutorial. Use at your own risk please.

 

AND: You will need to link to the tutorials.php file from somewhere in your site. I added a link in my client area. I will not explain how to do this at this time.

 

Finally: For this tutorial I went into whmcs main folder then into the modules folder then I created a new folder called "tutorials" and then I uploaded all of my tutorial files.

 

Ok lets begin, I will set these up in steps but you can do them in any order you want.

 

Step 1.

 

We need to create a page to load the tutorials into. I called this "viewtutorials.php" and put this into the main whmcs folder, here is the code:

 

<?php 

require("dbconnect.php"); 
require("includes/functions.php"); 

$pagetitle = ''.$_LANG['flashtutorials'].' - '.$tutorial.'';
$pageicon = "images/support/clientarea.gif";
$breadcrumbnav = '[url="index.php"]'.$_LANG['globalsystemname'].'[/url] > [url="tutorials.php"]'.$_LANG['flashtutorials'].'[/url] > [url="'.$_SERVER['REQUEST_URI'].'"]'.$tutorial.'[/url]';

require("init.php"); 

if ($_SESSION['loggedinstatus']=="true") {
# User is Logged In - put any code you like here
} 

# Define the template filename to be used without the .tpl extension
$templatefile = "viewtutorials"; 
/*
To assign variables in Smarty use the following syntax. 
$smarty->assign('variablename', $value);
This can then be used as {$variablename} in the template
*/

#This is for those who are using the portal template and need more room by hiding the left menu
$smarty->assign('hide','<link rel="stylesheet" type="text/css" href="hide.css"/>');

$smarty->assign('tutorial',"modules/tutorials/{$tutorial}");

include("display.php");

?>

 

Step 2.

 

Now we need to create a tpl file called "viewtutorials.tpl" Save this into the template folder you are using (you might need to change the style of the td and the width/height of the iframe in this page to fit your sites layout):

 

<script type="text/javascript">
   {literal} 
$(function(){
       $('a.iframe').iframe();
   });
{/literal} 
</script>
<tr>
<td valign="top" style="padding-left:-20px;padding-bottom:-20px;">
[url="{$tutorial}.html"][/url]
</td>
</tr>

If you take a look at step 2 code you will see there is some script and a class called "iframe" which brings us to the next step.

 

Step 3.

 

I used a jquery javascript which creates an iframe (this worked great for me and also validated) Create a file called jquery_iframe.js and put this code in it, this goes into a folder called "js" in your main public_html directory:

 

/**
*  JQuery iFrame plugin for converting a link into an iframe.
*  @author:  Vlada Misic / [url]http://www.lucidcrew.com[/url]
*  @version: 1.0
*  [url]http://33rockers.com/2006/12/05/unobtrusive-iframe-with-jquery[/url]
*
*  Thanks to M. Alsup [url]http://www.malsup.com[/url] for his SWF plugin that was the basis for this code
*
*  This plugin converts anchor tags into iframes.
*
*
*
*  Sample HTML:
*      before:  [url="myIframe.html"]My Iframe Link[/url]
* 
*      after:   <div class=iframe>
					<iframe id=content_iframe marginWidth=0 marginHeight=0 src="myIframe.html" frameBorder=0 width=640 height=480>
				</iframe>
			</div>
*
*  Usage:
*      $('a.iframe').iframe();
*
*
*
*  Notes:
*  -----
*
*  Options are passed to the 'flash' function using a single Object.  The options
*  Object is a hash of key/value pairs.  The following option keys are supported:
*
*  Options:
*  -------
*  width:      	width of iframe (default: 640)			w:640
*  height:      	height of iframe (default: 480)			h:480		
*  scrolling:   	auto									sc:auto
*  frameborder:	height of iframe (default: 0)			fb:0	
*  marginwidth:	margin of iframe (default: 0)			wm:0		
*  marginheight:	margin of iframe (default: 0)			hm:0	
*
*  * height, width, version and background values can be embedded in the classname using the following syntax:
*    <a class="iframe w:450 h:450 scr:no"></a>
*/

jQuery.fn.iframe = function(options) {
   return this.each(function() {
       var $this = jQuery(this);
       var cls = this.className;

       var opts = jQuery.extend({
           frameborder:  ((cls.match(/fb:(\d+)/)||[])[1]) || 0,
           marginwidth:  ((cls.match(/wm:(\d+)/)||[])[1]) || 0,
           marginheight: ((cls.match(/hm:(\d+)/)||[])[1]) || 0,
           width:        ((cls.match(/w:(\d+)/)||[])[1]) || 780,
           height:       ((cls.match(/h:(\d+)/)||[])[1]) || 725,
           scrolling:    ((cls.match(/sc:(\w+)/)||[])[1]) || "auto",
           version:     '1,0,0,0',
           cls:          cls,
           src:          $this.attr('href') || $this.attr('src'),
		id:			  $this.attr('id'),
           caption:      $this.text(),
           attrs:        {},
           elementType:  'div',
           xhtml:        true
       }, options || {});

       var endTag = opts.xhtml ? ' />' : '>';

       var a = ['<iframe src="' + opts.src + '"'];
	if(opts.id){
		a.push(' id="' + opts.id + '"');
	}else{
		a.push(' id="content_iframe"');
	}
	a.push(' frameborder="' + opts.frameborder + '"');
	a.push(' marginwidth="' + opts.marginwidth + '"');
	a.push(' marginheight="' + opts.marginheight + '"');
	a.push(' width="' + opts.width + '"');
	a.push(' height="' + opts.height + '"');
	a.push(' scrolling="' + opts.scrolling + '"');
	a.push(endTag);

       // convert anchor to span/div/whatever...
       var $el = jQuery('<' + opts.elementType + ' class="' + opts.cls + '"></' + opts.elementType + '>');
       $el.html(a.join(''));
       $this.after($el).remove();
   });
};

 

Step 4.

 

Now we need to link to the java script from your header.tpl file which is in your template folder. Add this code to somewhere between the <head> and </head> section (change your-domain-name to your sites domain):

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://www.your-domain-name.com/js/jquery_iframe.js"></script>

 

Step 5.

 

Now if you didn't know allready there is a file called tutorials.php and tutorials.tpl. We will need to edit the tpl file, which is in your template folder, to link to our new viewtutorials.php file:

 

Open up tutorials.tpl and using "find and replace" replace all of this (I used notepad ++ for this, its free and will make this fast and easy):

modules/tutorials/

 

with this:

viewtutorials.php?tutorial=

 

    and this:
    target="_blank"


     
    with this: 

    nothing, as in, delete it (we do not need it anymore)

 

So what you are left with should look like this example for every link:

[*]1. [url="viewtutorials.php?tutorial=cpanel-x3-login"]How to login to cPanel[/url]

 

***********************Step 6.*********************

 

As stated in a note I am using the portal template so this is what I did to hide the left navigation, client login and search to make room for the swf's. (If you are using a defualt template then do not proceed with this step. I did not test this on the default template so I can't tell you if it works or not, I am assuming it will and you should be done at this point)

 

First create a css file called "hide.css" and put it into your main whmcs folder and add this to it:

 

.hide{display:none}

 

Now open up the header.tpl file again and add this to the head section:

{$hide}

 

And also in header.tpl add a class called hide somewhere around here (I can not give the exact line becuase mine is not default anymore and yours will probably differ):

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="hide" width="170" valign="top" style="padding-bottom:20px;">
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="navbar">
<tr>
<td class="navbutton" onmouseover="this.className='navbuttonover';" onmouseout="this.className='navbutton';" onclick="window.location='index.php'">{$LANG.hometitle}</td>
</tr>
<tr>
<td class="navbutton" onmouseover="this.className='navbuttonover';" onmouseout="this.className='navbutton';" onclick="window.location='clientarea.php'">{$LANG.clientareatitle}</td>
</tr>
<tr>
<td class="navbutton" onmouseover="this.className='navbuttonover';" onmouseout="this.className='navbutton';" onclick="window.location='announcements.php'">{$LANG.announcementstitle}</td>
</tr>
<tr>

 

this is the specific td line I added the class to:

<td class="hide" width="170" valign="top" style="padding-bottom:20px;">

 

And that should be it. Let me know if I missed something or if you have any problems. I think I got everything in there but its hard to remember for sure just by memory.

 

Thanks and good luck

 

Baja

 

Ps. A big thanks goes out to Matt for giving me the basic concepts to make this work.

0
Link to comment
Share on other sites
Baja Senior Member

Baja

Posted
  • Author
Posted
Real nice job, Baja. thumbsup%5B1%5D.gif

 

I used it this morning in an integration I'm doing for another WHMCS customer, and it looks great.

I'm glad to see it worked well for you. Did you have to make any little changes at all? Also did you use a portal template or default? I didn't test it on a default template but I figured it would work just the same so I am curious which you were using.

 

On a side note, I tested and found this to be working in current versions of:

 

Firefox, IE7, Opera and for kicks and giggles in IE6

 

Next week I will try to double check this in Safari too unless someone can beat me to it.

 

Baja

0
Link to comment
Share on other sites
uberhost Senior Member

uberhost

Posted
Posted
Did you have to make any little changes at all? Also did you use a portal template or default?

 

The only changes I made were not part of your code really. For instance, I needed to make it work on a secure server, so the third-party js link wouldn't work. I copied the updated script to the client's server. Other than that, I changed Matt's <ul>'s to

    's, and I think that was about it.

     

    The client's template it Portal, but integrated into his home page, so I had already removed the left nav panel anyway.

     

    Again, really nice work.

0
Link to comment
Share on other sites
Baja Senior Member

Baja

Posted
  • Author
Posted

In step 6 I show you how to hide the Left Nav in the portal template using css. As I learn more about smarty I am finding different ways of doing things. I think I like this new way better then using the css version, I will add it too:

 

If you all ready went through the tutorial and want to try this step 6 instead you will have to delete some previous code from the top of your header.tpl (in other words just reverse the other step 6):

 

Delete

{$hide}

 

and delete the

 

class="hide"

 

and you wont be needing the hide.css file anymore either.

 

**********************Smarty step 6 *****************

 

 

In viewtutorials.php replace this:

 

$smarty->assign('hide','<link rel="stylesheet" type="text/css" href="hide.css"/>');

 

With this:

 

$smarty->assign('hideleftnav','hide');

 

Then in header.tpl instead of using the class "hide" use this to wrap the left nav:

 

{if $hideleftnav eq 'hide'}{else}

 

I put mine here which seemed to work:

 

<table cellpadding="0" cellspacing="0" width="100%">
{if $hideleftnav eq 'hide'}{else}
<tr>
<td width="170" valign="top" style="padding-bottom:20px;">
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="navbar">

 

and don't forget to close the if at the end of the left nav with:

 

{/if}

 

Mine was about here:

   <input name="submit2" type="submit" class="submitbutton" value="{$LANG.go}" />
   </div></form></td>
   </tr>
   </table>
   {/if}</td>

 

*****************************************************

On another note, You can use this tutorial for pretty much any new page you want to create, not just for the tutorials. I won't add the complete step by step here, just some examples.

 

One example is to hide the language bar down at the bottom. For this example lets say you have a forum you want included but you want to hide the language option because the language change will not effect the forum. You could use something like this.(for a forum you might also want to hide the breadcrumbnav and the login too, so you can just hide it using a similar code)

 

Hiding the language bar:

 

$smarty->assign('languagebar','hide');

 

Then in the specfic .tpl file (in the languages case its the footer.tpl) use something like this:

 

{if $languagebar eq 'hide'}
{else}
<table class="hide" width="760" border="0" cellpadding="0" cellspacing="0" align="center" style="background:#efefef;">
   	<tr>
       <td><table width="760" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
   	<td class="footerbar">[b]{$companyname}[/b]</td>
   	<td class="footerbar"><div align="right">{if $langchange}{$setlanguage}{/if}</div></td>
       </tr>
       </table>
       </td>
   	</tr>
   	</table>
{/if}

 

For a forum you will have to create a new php page for this and a new tpl page too, ie. forum.php and forum.tpl(and link to it from within your site of course):

 

Here is a example of the forum.php which can hide left nav, breadcrumbnav, and the language if you choose to do so in the correct spots of the .tpl files.

 

<?php 

require("dbconnect.php"); 
require("includes/functions.php"); 

$pagetitle = $_LANG['forumstitle'];
$pageicon = "images/support/clientarea.gif";
$breadcrumbnav = '[url="index.php"]'.$_LANG['globalsystemname'].'[/url] > [url="forums.php"]'.$_LANG['forumstitle'].'[/url]';

require("init.php"); 

if ($_SESSION['loggedinstatus']=="true") {
# User is Logged In - put any code you like here
} 

# Define the template filename to be used without the .tpl extension
$templatefile = "forums"; 

/*
To assign variables in Smarty use the following syntax. 
$smarty->assign('variablename', $value);
This can then be used as {$variablename} in the template
*/ 
$smarty->assign('hideleftnav','hide');
$smarty->assign('languagebar','hide');
$smarty->assign('hidebreadcrumb','hide');

include("display.php");

?>

 

Now you might have to tweak this to work for your site but the concepts should all be the same>

 

Also don't forget to add the proper text to the language files so for the forum example the code below will display the proper text when displayed in the browser. ie. forumstitle

$pagetitle = $_LANG['forumstitle'];
$pageicon = "images/support/clientarea.gif";
$breadcrumbnav = '[url="index.php"]'.$_LANG['globalsystemname'].'[/url] > [url="forums.php"]'.$_LANG['forumstitle'].'[/url]';

 

 

Good luck,

 

Baja

0
Link to comment
Share on other sites
  • 2 weeks later...
Baja Senior Member

Baja

Posted
  • Author
Posted
do you happen to have a screenshot or demo page?
Sorry no demo at this point, maybe uberhost can help you out until my site goes live.

 

Basically it's just a way for your tutorials to play within your site rather then having them open up in a new window. Not really a big deal but it stream lines things a bit IMHO. This could be achieved in other ways I bet too.

 

Here is a screen shot using the default-portal template that comes with whmcs, although seeing it in action is probably more of what you are looking for:

 

http://www.driveway.com/nlqde45485

0
Link to comment
Share on other sites
  • 1 month later...
Baja Senior Member

Baja

Posted
  • Author
Posted
I have rss feeds available to me - that have video links embedded in the text of the feed that I would like to do the same thing with..

 

Rss2html ( http://www.rss2html.com )works fine on it's on.. So it should be able to work with the same iframe correct?

Ya sure, seems like you could get it to work with what you are talking about, you might have to play around with it a bit.
0
Link to comment
Share on other sites
Baja Senior Member

Baja

Posted
  • Author
Posted

Not sure why it has been changed but the original step 2 is missing something so I will post it again:

 

 <script type="text/javascript">
   {literal}
  $(function(){
       $('a.iframe').iframe();
   });
  {/literal}
</script>
<div>
<a href="{$tutorial}.html" class="iframe w:780 h:470"></a>
</div>

0
Link to comment
Share on other sites
mysmallbizu Senior Member

mysmallbizu

Posted
Posted

I set rss2html up in a directory /site/ with 50 individual feeds

 

http://www.mysmallbizwebhosting.com/site/

 

Example:

http://www.mysmallbizusupport.com/site/bloggingsecrets.php

http://www.mysmallbizusupport.com/site/googlerankings.php

 

Thanks - I tried using the php include in the smarty template but it didn't work...

 

I appreciate the help thanks!

0
Link to comment
Share on other sites
Baja Senior Member

Baja

Posted
  • Author
Posted

You could try this:

 

For your file called rss.php which goes into your main whmcs folder:

<?php 

require("dbconnect.php"); 
require("includes/functions.php"); 

$pagetitle = ''.$_LANG['rsstitle'].'';
$pageicon = "images/support/clientarea.gif";
$breadcrumbnav = '<a href="index.php">'.$_LANG['globalsystemname'].'</a> > <a href="site/goals.php">'.$_LANG['rsstitle'].'</a>';

require("init.php"); 

if ($_SESSION['loggedinstatus']=="true") {
# User is Logged In - put any code you like here
} 

# Define the template filename to be used without the .tpl extension
$templatefile = "rss"; 
/*
To assign variables in Smarty use the following syntax. 
$smarty->assign('variablename', $value);
This can then be used as {$variablename} in the template
*/

#This is for those who are using the portal template and need more room by hiding the left menu
$smarty->assign('hideleftnav','hide');

include("display.php");

?>

For a file called rss.tpl which would go into you template directory:

<script type="text/javascript">
   {literal}
  $(function(){
       $('a.iframe').iframe();
   });
  {/literal}
</script>
<div>
<a href="site/goals.php" class="iframe w:780 h:470"></a>
</div>

Just change the w:780 and h:470 so it fits your site. Also if you want to hide the left navigation you will have to go through those steps too. I used my updated step 6 for this.

 

Don't forget to add "rsstitle" to you language files:

 

$_LANG["rsstitle"] = "Rss Feed";

0
Link to comment
Share on other sites
mysmallbizu Senior Member

mysmallbizu

Posted
Posted

With Baja's help I've got the rss2html script pumping videos into whmcs!

 

Here's an example - not quite complete but you'll get the picture.

 

http://www.mysmallbizusupport.com/tutorials.php

 

The videos are coming from RSS feeds generated at one of my other sites. The great part is that any updates at the main site automatically update the support site.

0
Link to comment
Share on other sites
  • 3 weeks later...
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept