Free KB Popup Previews in Client Side - Kayako

Matthew · **KB Popup Previews in Client Side -** 20-10-2008, 01:08 PM

The IRS is nice (when it's able to find relevant articles, that is), but for some users it's confusing when they click on the article title and it opens in a new window/tab; they may think that the ticket text they've just entered has been lost and become cranky, or even irate. Heavens, we wouldn't want that.

So I thought, what if the KB article from the IRS link opens in a popup window, just as happens in the staff side. It's pretty easy to do (for you, at least--now that I've sweated it out

), although it does mean modifying a few core files.

Step 1 - Set up header and footer

In /themes/client_default, create the following two files. You can later customize these to, for example, display your company logo at the top of the article:

header.tpl

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title><{$documenttitle}></title>
<meta http-equiv="Content-Type" content="text/html; charset=<{$language[charset]}>">

<script language="Javascript">
var themepath = "<{$themepath}>";
var swiftpath = "<{$swiftpath}>";
var BLANK_IMAGE="<{$themepath}>space.gif";
var swiftsessionid = "<{$session[sessionid]}>";
</script>

<!-- default stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="<{$swiftpath}>index.php?_ca=css" />

</head>

footer.tpl

HTML Code:

</body>
</html>

Step 2 - Provide for File-based Templates on Client Side

In \includes\SmartyLight\class.template.php, located the displayTemplate function around line 526. Find this code:

PHP Code:

              // DB Template
            return $this->customCompiler($name, TEMPLATE_DB, $silent);

Place this code, directly above it:

PHP Code:

              // Allow file-based templates in client side (mod by matthew@xentana.com)
            if ($customtype == TEMPLATE_FILE)
            {
                if (file_exists($this->path.$name))
                {
                    $this->template_dir = $this->path;
                    return $this->customCompiler($name, TEMPLATE_FILE, $silent);
                }            
            }
            // End Mod

Step 3 - Register the 'preview' Action

In \modules\knowledgebase\knowledgebase.php, locate this code around line 55:

PHP Code:

          $events->registerEvent(EVENT_CLIENT, MODULE_KNOWLEDGEBASE, "irsfetch");

Insert this below it:

PHP Code:

          $events->registerEvent(EVENT_CLIENT, MODULE_KNOWLEDGEBASE, "preview"); // KB client-side preview popup (matthew@xentana.com)

Locate this code around line 83:

PHP Code:

          } else if ($eventtype == EVENT_CLIENT && ($eventaction == "view" || $eventaction == "viewarticle" || $eventaction == "printable" || $eventaction == "pdfexport" || $eventaction == "ratearticle")) {

Replace with:

PHP Code:

          // KB client-side preview popup (matthew@xentana.com)
        } else if ($eventtype == EVENT_CLIENT && ($eventaction == "view" || $eventaction == "preview" || $eventaction == "viewarticle" || $eventaction == "printable" || $eventaction == "pdfexport" || $eventaction == "ratearticle")) {

Step 4 - Set Up the 'preview' Handler

In \modules\knowledgebase\client_knowledgebase.php, locate the last line (around 216) of the section of code called Question Display (it's an echo statement), and place the following code right after it:

PHP Code:

 
/**
* ###############################################
* PREVIEW
* KB client-side preview popup (matthew@xentana.com)
* A modification of code found in \modules\knowledgebase\staff_misc.php
* ###############################################
*/
} else if ($eventaction == "preview") {
    $_kbarticle = getArticle($_GET["kbarticleid"]);
    if (empty($_kbarticle["kbarticleid"]))
    {
        trigger_error($_SWIFT["language"]["invalidkbarticle"], E_USER_ERROR);
    }
    $dbCore->query("UPDATE `". TABLE_PREFIX ."kbarticles` SET `views` = `views` + 1 WHERE `kbarticleid` = '". intval($_GET["kbarticleid"]) ."';");
    $_articlecontent = $dbCore->queryFetch("SELECT * FROM `". TABLE_PREFIX ."kbarticles` AS kbarticles LEFT JOIN `". TABLE_PREFIX ."kbarticledata` AS kbarticledata ON (kbarticles.kbarticleid = kbarticledata.kbarticleid) WHERE kbarticles.kbarticleid = '". intval($_GET["kbarticleid"]) ."';");
    echo $template->displayTemplate("header.tpl",TEMPLATE_FILE);
    ?><body>
                <table width="100%"  border="0" cellspacing="1" cellpadding="0">
                      <tr>
                      <td width="1" align="left"><img src="<?=$_SWIFT["themepath"]?>icon_topicbig.gif" align="absmiddle" border="0" /></td>
                      <td align="left" valign="middle" width="100%"><span class="articletitle">&nbsp;<?=$_articlecontent["subject"]?></span></td>
                      </tr>
                      <tr>
                        <td width="100%" colspan="2"><img src="<?=$_SWIFT["themepath"]?>space.gif" width="1" height="4" border="0" /></td>
                        </tr>
                  </table>

    <fieldset class="swiftfieldset">
    <legend><?=$_SWIFT["language"]["kbsolution"]?></legend>
    <span class="mediumtext"><?=preg_replace("!a=viewarticle!","a=preview",getProcessedHTML($_articlecontent["contents"]))?></span><BR /><BR />
    </fieldset>
    <BR />
    [&nbsp;<a href="javascript:window.close();" id="moduletitle">Close Window</a>&nbsp;]<BR />
    <?
    echo $template->displayTemplate("footer.tpl",TEMPLATE_FILE);

Step 5 - the Javascript Popup Function
Now we need a function that is found in \themes\admin_default\main.js. You could load that file in the client side header template, but I opted for just copying the function into \themes\client_default\base.js, which is already called in the header.

So, you just need to open up the latter file, and past this function into the very end:

Code:

function popupDataWindow(url) {
    screen_width = screen.width;
    screen_height = screen.height;
    widthm = (screen_width-700)/2;
    heightm = (screen_height-600)/2;
    window.open(url,"datawindow"+doRand(), "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=700,height=600,left="+widthm+",top="+heightm);
}

Step 6 - Modify the irssuggestions Template

In Admin CP->Templates->Manage Templates, navigate to the template group you want to modify, open the irssuggestions template, and (since it's such a bother to point to the one exact line to change) replace everything with:

HTML Code:

 <BR /><div class="irsui"><table border="0" cellpadding="3" cellspacing="1" width="100%"><tr><td class="smalltext"><span class="articletitle"><{$language[irssuggestions]}></span><BR /><{$language[irsdesc]}><HR class="irshr">
    <BR />
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="smalltext">
    <{foreach key=key value=searchitem from=$irsitems}>
    <tr onMouseOver="this.className='row2';" onMouseOut="this.className='smalltext';"><td width="1" align="left" valign="top"><a href="<{$baseurl}>_m=knowledgebase&_a=viewarticle&kbarticleid=<{$searchitem[kbarticleid]}>" target="_blank"><img src="<{$themepath}>mimeico_blank.gif" border="0" /></a></td> <td align="left" valign="middle" width="100%">&nbsp;<a href='javascript:popupDataWindow("<{$swiftpath}>index.php?_m=knowledgebase&_a=preview&kbarticleid=<{$searchitem[kbarticleid]}>")'><span class="mediumtext"><{$searchitem[subject]}></span></a><BR /><span class="articlepreview"><{$language[irsrelevevance]}><i><{$searchitem[relevance]}>%</i></span><BR /></td></tr>
    <{/foreach}>
    </table>
    </td></tr></table></div>

Operating Instructions

Make sure IRS is enabled in the client side (consult your documentation)
Go to client side and move to submit a ticket
Type some appropriate text into the message box, and wait for IRS to kick in (you'd better have a few choice articles in your KB, doh!)
- Click the article title to open as a popup.
- If you want to open in the normal way, click the little document icon next to the title.
  (bad Human Interface design, I know. But I thought I'd leave that in as an Easter Egg.)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Live support client side automatically goes to "Leave a message"	bruinbear714	SupportSuite, eSupport and LiveResponse	4	08-03-2008 11:00 PM
Ticket status change alerts - client side	tim.hyndman	SupportSuite, eSupport and LiveResponse	1	03-03-2008 08:56 AM
prevent modification of field contents (client side)	davecnhi	SupportSuite, eSupport and LiveResponse	3	15-08-2007 11:11 AM
Client side ticket sorting	zoe	Wont Implement / Already Implemented	5	11-06-2007 01:24 AM