X-Cart forums

[Mad]

Ok this mod can be seen in action at www.madtech.org. Basically what it does is let the user set a small cookie which you can then use to load specific css file and graphics. I will show how it is implemented on my website, it is a very specific example but this mod is easily manipulated to fit your needs. The whole hack took me about 6 hours to perfect, it has been working great since (about 2 weeks).

First off, we edit [/skin1/customer/home.tpl]. Below 'd' in skin_d.conf stands for default, I suggest you rename skin1.conf to skin_d.conf to make things easier.

{ config_load file="$skin_config" }

The above gets replaced with:

{if $smarty.cookies.skin} {config_load file="skin_`$smarty.cookies.skin`.conf"}
{else} {config_load file="skin_d.conf"}
{/if}

If you want the skins to also apply to the administration section of your site, repeat the above step to [/skin1/single/home.tpl], else move on.

Ok I put the skin selection into head.tpl, making it appear on every single page. You are free to put the following piece of code where ever the hell you want, it will not make a difference, but may be harder to find by your customers.

So this from my [/skin1/head.tpl]. Just put it anywhere, and delete any unneeded colors/options.

<FORM action="{$smarty.server.REQUEST_URI}" method=POST name=skin_form>
Skin:
<INPUT type=hidden name="redirect" value="{$smarty.server.QUERY_STRING}">
<SELECT name=skin onChange="javascript: document.skin_form.submit()">
<option value="d"{if $smarty.cookies.skin eq "d" or $smarty.cookies.skin eq ""}selected{/if}>Default</option>
<option value="b"{if $smarty.cookies.skin eq "b"}selected{/if}>Blue</option>
<option value="db"{if $smarty.cookies.skin eq "db"}selected{/if}>Dark Blue</option>
<option value="dg"{if $smarty.cookies.skin eq "dg"}selected{/if}>Dark Green</option>
<option value="g"{if $smarty.cookies.skin eq "g"}selected{/if}>Green</option>
<option value="or"{if $smarty.cookies.skin eq "or"}selected{/if}>Orange</option>
<option value="y"{if $smarty.cookies.skin eq "y"}selected{/if}>Yellow</option>
</SELECT>

</FORM>

Now we have the switch utility in head.tpl, but switching won't do anything... yet.

I chose the following file because it is loaded in EVERY SINGLE php, which is essentially what we want. We want the user to be able to switch skins from ANYWHERE on the site, and it beats editing every single php and inserting the code... so if anyone thinks it is a problem that I put it here, let me know. I don't see it being any harm though. What this code does is write the cookie, it expires after a year, which is plenty of time. Insert the following piece of code into [/customer/auth.php]. Just insert it right after the copyright statement and you won't run into problems.

if($_POST["skin"]){
	$store_skin = $_POST["skin"];
	setcookie ("skin", $store_skin, time()+31536000, "/", $xcart_http_host);
	func_header_location($PHP_SELF."?".$redirect);
}

Again if you want to be able to switch skins from the admin section of your site you will have to repeat the above step on [/admin/auth.php]

OK we are almost there. So far you will be able to select a skin, have the cookie written and then have the correct css file loaded. Everything should work except that the dialogs and site logos are still the default color. If you want them to stay the same then don't bother with the below, but if you do want to load a different dialog picture or logo just follow the example below.

For skinned graphics, just rename the default to filename_d, in this case rename the default bg_dialog.gif to bg_dialog_d.gif. Ok this example is for [/skin1/dialog.tpl] but can be applied on any graphic loaded. The original code in [/skin1/dialog.tpl] goes like this:

<TD height="20" class=DialogTitle background="{$ImagesDir}/dialog_bg.gif" valign=bottom>{$title}</TD>

Now simply insert _{if $smarty.cookies.skin}{$smarty.cookies.skin}{else}d {/if} between the end of the filename and the extention (whatever it may be).
So the snipet above should now look like this:

<TD height="20" class=DialogTitle background="{$ImagesDir}/dialog_bg_{if $smarty.cookies.skin}{$smarty.cookies.skin}{else}d{/if}.gif" valign=bottom>{$title}</TD>

Repeat the above step on any static graphics you want to be different, and that's it. You're all done, everything should work perfect and your users can enjoy different skins to match their mood/taste.

I'm a PHP/Smarty newbie (before I started working with X-Cart about a month ago), so I'm very proud of this mod that I made. What do you guys think? Any suggestions on what could be done better? If you're using this hack on your site, please reply with a URL so others can see more examples.

Cheers

[dealsondeals]

Good Work! Sweet mod! I Look forward to playing with this some, perhaps not letting the user set the skin, but perhaps expanding the selection of skin to be used based on day of the week, a holiday or something to that effect.

Continue your efforts, much success with your shop!

Regards,

Glen