I have a site where the main site picks an image from a particular folder for the background every time you hit a page, rotating through the available images in a loop. We also have a CubeCart store, which has had the template skinned to fit the main site, so obviously enough, I wanted to have the same background image feature for the shop.
The thing with CubeCart templates is that you can’t just add php to the .tpl files – you have to do all your PHP jiggery pokery in include files, and assign values to object properties, and include a placeholder in the tpl.
There are two key CubeCart files to make this change over the whole shop:
{www,yourdomain.com}/{shop_location}/includes/global/index.inc.php
{www,yourdomain.com}/{shop_location}/skins/{your_skin}/styleTemplates/global/index.tpl
First off you want to get your functions together from the main site. Mine all live in a lib.php file, but as I don’t need to load all of them into CubeCart, I pulled the relevant ones into a new file, /lib/php/rotatebg_lib.php. Now I can include this file in my original lib.php as well as in CubeCart, and reduce unnecessary memory overheads.
The system relies on three functions:
files_in_dir($start_dir) creates an array of the files in a directory. This is one of my standard ‘off the shelf’ functions
index_background_images() checks for files with a .jpg extentsion, creates an array of them and stores it in a $_SESSION variable, called only when a session is started. There are other ways of checking for file types – the most reliable is to mime_content_type() function, but if you trust the files on your server, my method is fine. If you are dealing with user uploaded files, remember you should NEVER trust the file to be what it says it is!
rotate_background() checks for a session, calls the indexing function if necessary and otherwise increments the index counter.
rotatebg_lib.php
$background_image_path = '/img/backgrounds/';
function rotate_background(){
if(isset($_SESSION['backgrounds'])){
$_SESSION['backgrounds']['index']++;
if($_SESSION['backgrounds']['index'] >= count($_SESSION['backgrounds']['files'])){
$_SESSION['backgrounds']['index'] = 0;
}
$background = $_SESSION['backgrounds']['index'];
}else{
$_SESSION['backgrounds']['files'] = index_background_images();
$_SESSION['backgrounds']['index'] = 0;
$background = 0;
}
return $background;
}
function index_background_images(){
global $background_image_path;
$files = files_in_dir($_SERVER['DOCUMENT_ROOT'] . $background_image_path);
foreach($files as $file){
if(substr($file,0,10) == 'background' && substr($file,-4,4) == '.jpg'){
$bg_images[]=$file;
}
}
return $bg_images;
}
function files_in_dir($start_dir){
$files = array();
$dir = opendir($start_dir);
while(($myfile = readdir($dir)) !== false){
if($myfile != '.' && $myfile != '..' && !is_file($myfile) && $myfile != 'resource.frk' && !eregi('^Icon',$myfile) ){
$files[] = $myfile;
}
}
closedir($dir);
return $files;
}
Now we need to include and run these functions in the CubeCart global index include.
Line numbers may vary dependant on your template, but essentially you want to add this just after the $body template has been defined
{your_skin}/includes/global/index.inc.php
Replace:
$body = new XTemplate ("global".CC_DS."index.tpl");
With:
$body = new XTemplate ("global".CC_DS."index.tpl");
include($_SERVER['DOCUMENT_ROOT'].'/inc/php/rotatebg_lib.php');
$background = rotate_background();
$body->assign('VAL_CUSTOM_BACKGROUND', $_SESSION['backgrounds']['files'][$background]);
And finally, insert VAL_CUSTOM_BACKGROUND into the index.tpl file. This needs to be added in the head section, I prefer the end of the head section as CSS latency will ensure that the rule is obeyed. Again, line numbers may vary.
{your_skin}/styleTemplates/global/index.tpl
Replace:
With
<style type="text/css">
#pageSurround{
background-image:url("/img/backgrounds/{VAL_CUSTOM_BACKGROUND}");
}
</style>
</head>
Shazzamwhazzam. We are done.
