Adding Slideshows Setting to Kaimono Kago

Kaimono Kago is a Codeigniter + BackendPro based shopping cart and it has a slideshow in the webshop front-end. Since there are many javascript slideshows are available, it will be nice that we can use different types of slideshow by one click.
This article shows how to add a slideshow setting to Codeigniter+BackendPro based shopping cart, Kaimono Kago.

The method is pretty similar to this article.
And this we are going to add one more slideshow this time. If you know how to do this you can add as many slideshows as you like. Good thing about this is that a browser will download only one js for the slideshow.

The slideshow we are going to add is ‘CU3ER‘. CU3ER is a very popular 3D transition slideshow. Since this uses xml and flash files, it will be different from normal js slideshow.

This is the summary what we are going to do.

Preparing js and other files
Adding assets
Adding group, fields to system/application/controllers/admin/settings.php
Adding languages to system/application/language/english/backendpro_lang.php
Adding fields in DB
Adding labes and descriptions to modules/preferences/language/english/preferences_lang.php
Modifying the webshop controller index

Preparing CU3ER

Create cu3er folder under Kaimonokago/assets folder.
Download CU3ER files and unzip.
Find config.xml, cu3er.swf and expressInstall.swf and copy and paste them in the cu3er folder which you just made.
Open config.xml and copy/paste the following code.

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
		<auto_play>
		<defaults time="2" symbol="circular"/>
		<tweenIn x="470" y="45" width="30" height="30" tint="0xFFFFFF" alpha="0.5"/>
		<tweenOver alpha="1"/>
		</auto_play>
    	<prev_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver time="2" tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</prev_button>

    	<prev_symbol>
			<tweenOver tint="0x000000" />
		</prev_symbol>

    	<next_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</next_button>

    	<next_symbol>
			<tweenOver tint="0x000000" />
		</next_symbol>
	</settings>    

	<slides>
        <slide>
            <url>assets/images/frontpage/oak_leaf.jpg</url>
        </slide>
		<!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" direction="down"/>
        <slide>
       		<url>assets/images/frontpage/buil.jpg</url>
        </slide>
		<!-- changing transition between second & third slide -->
        <transition num="4" direction="right" shader="flat" />
		<slide>
            <url>assets/images/frontpage/sunset_tree.jpg</url>
        </slide>
        <transition num="5" slicing="horizontal" direction="left" delay="0.05"/>
		<slide>
       		<url>assets/images/frontpage/The_Oak_tree.jpg</url>
        </slide>
		<transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <slide>
       		<url>assets/images/frontpage/big_tree.jpg</url>
        </slide>

	</slides>
</cu3er>

CU3ER has a nice documentation, so please modify this xml file as you prefer.

Create cu3er.js under assets/js and add the following code.

// jquery dropdown menu
...
...
// cu3er js
...
...

var flashvars = {};
		flashvars.xml = "assets/cu3er/config.xml";
		flashvars.font = "assets/cu3er/font.swf";
		var attributes = {};
		attributes.wmode = "transparent";
		attributes.id = "slider";
		swfobject.embedSWF("assets/cu3er/cu3er.swf", "slideshow", "516", "200", "9", "assets/cu3er/expressInstall.swf", flashvars, attributes);

$(document).ready(function(){
	$('div#slideshow').append('<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>')
	});

The first part is jquery dropdown menu. Then cu3er js.
Don’t worry about font.swf. It will work without it. Change the “516″, “200″ etc which is the size of images.
And we append some html with jquery at the end.

Adding Assets

Open modules/site/config/bep_assets.php and add the followings.
Cu3er does not need jquery, but we have a jquery drop-down menu and we added some jquery in cu3e. That’s why it needs jquery.


// cu3er slideshow. since appending some html we need jquery
$config['asset'][] = array('file'=>'cu3er.js', 'needs'=>'jquery');

// Slideshow groups. There are two kinds of slideshows are implemented
// cu3er group
$config['asset_group']['cu3er'] = "cu3er";
$config['asset_group']['interfade'] = "webshop_js";

And also I deleted webshop_js from $config['asset_group']['SHOP'] group as follows.


$config['asset_group']['SHOP'] = 'shopcustomtools|FlashStatus|webshop|browserDetect-min';

Adding Group and fields

Open system/application/controllers/admin/settings.php and add the followings.

$config['group'] = array(
...
...
'slideshow'   => array('name'=> $this->lang->line('preference_frontpage_slideshow_settings'), 'fields'=>'webshop_slideshow,slideshow_two'),
);

...
...
// for slideshows
		$config['field']['webshop_slideshow'] = array('type'=>'dropdown','params'=>array('options'=>array('none'=>$this->lang->line('userlib_none'),'interfade'=>$this->lang->line('userlib_interfade'),'cu3er'=>$this->lang->line('userlib_cu3er'))));
		$config['field']['slideshow_two'] = array('type'=>'dropdown','params'=>array('options'=>array('none'=>$this->lang->line('userlib_none'),'interfade'=>$this->lang->line('userlib_interfade'),'cu3er'=>$this->lang->line('userlib_cu3er'))));

As you can see in the image, this will show Slideshow Settings under Settings. However we still needs add Labels and Descriptions.

Adding Languages

Open system/application/language/english/backendpro_lang.php and add the followings.

...
/* For slideshows */
$lang['preference_frontpage_slideshow_settings'] = "Slideshow Settings";
...

Open modules/auth/language/english/userlib_lang.php


...
/* Slideshow options */
$lang['userlib_interfade'] = 'INTERFADE';
$lang['userlib_cu3er'] = 'CU3ER';
$lang['userlib_none'] = 'None';
...

Adding Fields to DB

Add webshop_slideshow and slideshow_two in the table be_preferences.

Adding Labels and Descriptions

Open modules/preferences/language/english/preferences_lang.php and add the following code.


// for Slideshow Settings label and description
$lang['preference_label_webshop_slideshow'] = 'Slideshow type for webshop front page';
$lang['preference_desc_webshop_slideshow'] = 'Select a slideshow type for webshop front page';
$lang['preference_label_slideshow_two'] = 'Slideshow type for other page';
$lang['preference_desc_slideshow_two'] = 'Select a slideshow type for other pages';

Modifying the controller

Finally we modify the controller. Open modules/webshop/controllers/webshop.php and add the followings.

//slideshow
$this->bep_assets->load_asset_group($this->preference->item('webshop_slideshow'));

Setting Slideshows

Go to the backend, System>Settings>Slideshow Settings. And choose one of slideshow type for the front-end.
I added the secondary slideshow for the other pages to use.