X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   A simple fix to pretty the checkout up a little (https://forum.x-cart.com/showthread.php?t=22197)

Grant 06-01-2006 11:34 AM

A simple fix to pretty the checkout up a little
 
That horrid customer details page on the last page of the checkout was hurting my eyes so I had a play around and came up with this. I've still got a lot of stuff to workout on this page for my site but i thought i'd post this up before I start making too many modifications and it's too hard to back track...

I've left out a few things like the email address and the extra fields call codes but if you need them in there just copy & paste them into this script from your customer_details.tpl

Hope it's useful to somebody ;)

Here's how the standard customer_details.tpl displays :

http://www.wyzeshop.com/screenshot10.gif

Here's how this new sexy one looks :

http://www.wyzeshop.com/screenshot9.gif

Here's how you do it :

1. Create a new file - skin1/customer/main/sexy_customer_details.tpl and put this inside it :


Quote:

{* $Id: sexy_customer_details.tpl,v 1 2006/06/01 15:15:52 max Exp $ *}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="sidebox">
<div class="boxhead"><h2>{$lng.lbl_billing_address}</h2></div>
<div class="boxbody">


{if $userinfo.default_fields.firstname}{$userinfo.b_fi rstname}{if
$userinfo.default_fields.lastname} {$userinfo.b_lastname}{/if}{/if}

{if $userinfo.default_fields.b_address}{$userinfo.b_ad dress}{/if}{if
$userinfo.b_address_2}

{$userinfo.b_address_2}{/if}

{if $userinfo.default_fields.b_city}{$userinfo.b_city} {/if}

{if $userinfo.default_fields.b_state}{$userinfo.b_stat ename} {/if}


{if $userinfo.default_fields.b_country}{$userinfo.b_co untryname} {/if}

{if $userinfo.default_fields.b_zipcode}{$userinfo.b_zi pcode} {/if}
</div>
</div></td>
<td><div class="sidebox">
<div class="boxhead"><h2>{$lng.lbl_shipping_address}</h2></div>
<div class="boxbody">


{if $userinfo.default_fields.firstname}{$userinfo.s_fi rstname}{if
$userinfo.default_fields.lastname} {$userinfo.s_lastname} {/if}{/if}

{if $userinfo.default_fields.s_address}{$userinfo.s_ad dress} {/if}
{if $userinfo.s_address_2}

{$userinfo.s_address_2} {/if}

{if $userinfo.default_fields.s_city}{$userinfo.s_city} {/if}

{if $userinfo.default_fields.s_state}{$userinfo.s_stat ename} {/if}

{if $userinfo.default_fields.s_country}{$userinfo.s_co untryname} {/if}

{if $userinfo.default_fields.s_zipcode}{$userinfo.s_zi pcode} {/if}

</div>
</div></td>
</tr>
</table>

2. Open skin1.css & add the following code right at the bottom :

Quote:

.sidebox {
margin: 0 auto;
width: 28em;
background: url(images/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(images/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: left;
}
.boxhead h2 {
background: url(images/sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px;
}
.boxbody {
background: url(images/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

3. Download the following 4 images and put them in your images directory.

http://www.wyzeshop.com/xcartforum/sbbody-l.gif
http://www.wyzeshop.com/xcartforum/sbbody-r.gif
http://www.wyzeshop.com/xcartforum/sbhead-l.gif
http://www.wyzeshop.com/xcartforum/sbhead-r.gif

4. Open skin1/customer/main/checkout.tpl

Find :
Quote:

{include file="customer/main/customer_details.tpl"}

Replace with :
Quote:

{include file="customer/main/sexy_customer_details.tpl"}

Best thing about this little mod = if you don't like it just undo step 4 and it will all go back to how it was before ;)

balinor 06-01-2006 12:02 PM

Sexy..now there is a word not often associated with X-Cart! :) Moving to Custom Mods.

Grant 06-01-2006 12:13 PM

Haha, I swear to God i'm gonna get my checkout looking so hot I'm gonna have to start selling soiled panties :P

vulcan-works 06-02-2006 05:19 PM

Re: A simple fix to pretty the checkout up a little
 
Quote:

Originally Posted by Grant
4. Open skin1/main/customer/checkout.tpl


you mean skin1/customer/main/checkout.tpl right?

Dongan 06-03-2006 02:17 AM

Re: A simple fix to pretty the checkout up a little
 
Quote:

Originally Posted by vulcan-works
Quote:

Originally Posted by Grant
4. Open skin1/main/customer/checkout.tpl


you mean skin1/customer/main/checkout.tpl right?


He means. you are right.

Grant 06-03-2006 02:29 AM

Re: A simple fix to pretty the checkout up a little
 
Quote:

Originally Posted by vulcan-works
Quote:

Originally Posted by Grant
4. Open skin1/main/customer/checkout.tpl


you mean skin1/customer/main/checkout.tpl right?


Yeah sorry :oops:

Kiwami 06-03-2006 03:13 PM

sexy is right !
 
Sweet - That made soooooo much of a diffrence to my eyes :)

groovico 06-03-2006 04:49 PM

Its amazing what a difference small changes like these can make to the overall feel of the shopping experience :)

TA 06-03-2006 06:49 PM

Very nice mod and a great improvement over default. Thank you!

Grant 06-04-2006 02:31 AM

Glad this is useful to somebody ;)

I'm working on a total overhaul of the checkout as the default look is so messy and not very easy to follow for the customer.

Here's a little snip of the progress so far :

http://www.wyzeshop.com/screenshot13.gif


All times are GMT -8. The time now is 02:10 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.