vBulletin LTS

Integration Project For vbAdvanced and Logican's WebTemplates

by TigerWare 11 Sep 2007

Integration Project For vbAdvanced and Logican's WebTemplates

Pre-requisites!

This is the system on which the article was written, I have no idea whether it will work on earlier versions of vBulletin.

vBulletin 3.6.8
vbAdvanced CMPS 3.0 RC1
Logican's WebTemplate CMS 3.6.02

Introduction

What follows is a very simplistic solution to a problem that may face others. I use vbAdvanced CMPS for my main website page, and Logican's WebTemplate CMS for all other static pages. I prefer this because the LWT provides for me a much better platform for the creation of extra pages.

My problem was this. I wanted to share a standard side navigation solution across both products. I am a C# Applications Developer by trade, and I am totally into GUI design. Having identical look and feel across disperate systems is vital for me, and code reuse is also highly important. Anyway, enough with the lecture on geekdom. Simply, I wanted a menu system in both areas to enhance the user experience so they can't see the joins.

So, how to accomplish? I tried different things but could not get the content of a menu system to display in both systems. In the end I went ahead and created an external .js file to solve the issue. It did work, but it was a very rubbish solution. Time to read.

I found a very good article by Kerry-Anne concerning the creation of a simple template, and how to use the plugin system to actually be able to consume the output elsewhere. [How To Include A Custom Template Via Plugins]. This was the turning point of my 3rd day trying to solve this problem. So, big thanks to Kerry-Anne who is now officially my hero.

After a good deal of fumbling, testing, fiddling and hair pulling I discovered that to make this work in a good way, I had to create a template for my own raw HTML content, another template specifically for the vBa specification, which contains a little extra HTML and consumes the content of my first template. Both templates use 2 plugins each, and we are displaying content successfully from a single source accross 2 different products... bonzer!

What we end up with is a solution that has no database changes, no additional files to upload and no code changes. Of course, changes to what is being displayed (in my case a menu) is edited in the template itself; one location, dead simple!

Step By Step

1. Create Template for Logican's WebTemplate

AdminCP >> Styles & Templates >> Style Manager >> Add New Template

Title: sitemenu
Template:
HTML Code:
<b>Raw HTML Content!</b>

2. Create 2 Plugins for "sitemenu" Template

AdminCP >> Plugins & Products >> Add New Plugin

##Plugin 1##
Product: vBulletin
Hook Location: global_start
Title: Sitemenu LWT - Start
Execution Order: 5 (default)
Plugin PHP Code:

PHP Code:

eval('$sitemenu_plugin = "' . fetch_template('sitemenu') . '";');

Plugin Is Active: Yes

##Plugin 2##
Product: vBulletin
Hook Location: cache_templates
Title: Sitemenu LWT - Cache
Execution Order: 5 (default)
Plugin PHP Code:

PHP Code:

$globaltemplates[]='sitemenu';

Plugin Is Active: Yes

3. Displaying Output In Logican's WebTemplate Theme

AdminCP >> Logician's WebTemplates >> WebTemplates >> Edit Theme

It is already assumed that you have an appropriate theme. To display the output from the template created in steps 1 and 2 you would simply type in the variable name at the appropriate place.

HTML Code:

$sitemenu_plugin

4. Create Template for vbAdvanced

We have to create a seperate template for 2 reasons. First, to consume the template in vBa, the title must be prefixed with "adv_portal_" and secondly, the actual template contains some required additional HTML to make it display correctly inside the module (once we create it). As you can see, the variable name we used here is the same one that was displayed directly in LWT, so now we have a template inside a template.

AdminCP >> Styles & Templates >> Style Manager >> Add New Template

Title: adv_portal_sitemenu
Template:
HTML Code:
<tr>
<td class="$bgclass">
$sitemenu_plugin
</td>
</tr>

5. Create 2 Plugins for "adv_portal_sitemenu" Template

AdminCP >> Plugins & Products >> Add New Plugin

##Plugin 1##
Product: vBulletin
Hook Location: global_start
Title: Sitemenu vBa - Start
Execution Order: 5 (default)
Plugin PHP Code:

PHP Code:

eval('$sitemenu_adv_plugin = "' . fetch_template('adv_portal_sitemenu') . '";');

Plugin Is Active: Yes

##Plugin 2##
Product: vBulletin
Hook Location: cache_templates
Title: Sitemenu vBa - Cache
Execution Order: 5 (default)
Plugin PHP Code:

PHP Code:

$globaltemplates[]='adv_portal_sitemenu';

Plugin Is Active: Yes

6. Displaying Output in vbAdvanced CMPS

AdminCP >> vBa CMPS >> Add Module

Module Type: Template
Name: Whatever
Active: Yes
Template to Include: adv_portal_sitemenu (prefix not required)

Now you can add the newly created module to the required location on your CMPS Page, and viola! You are displaying the same content as we have already seen.

Summary

Your final step would be to hone the HTML in your LWT Theme to mirror that of your vBa theme, and in my case the positioning of the output from both products has to be pixel perfect, which it is... but that is a whole different article!

At the time of writing I do not have a publically accessible site* to allow a demo of this integration, but I have attached an image to show what the output looks like in both product pages. The area inside the red rectangle is the bit being producted by this technique. On the left is the vBa page and on the right is the LWT page.

I am no vBulletin expert, and I'm pretty sure that there will be other ways to accomplish the same task, but for me this is a solution I'm very proud to have cracked. If this technique is of any use to others, then I'm happy that I have been able to give just a little back, with my thanks to the extended communities that make vBulletin A#1!

Cheers!

Respectfully Submitted,
TigerWare

Attached Thumbnails

vblts.ru supports vBulletin®, 2022-2024