X-Cart forums - A simple fix to pretty the checkout up a little

Page 1 of 4

Last »

Show 40 posts from this thread on one page

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

Vacman

06-04-2006 07:27 AM

That is looking real nice! Can't wait to use the rest of the code. Publish when ready!

Grant

06-05-2006 09:16 AM

Almost done ;)

http://www.wyzeshop.com/screenshot15.jpg

http://www.wyzeshop.com/screenshot16.jpg

TJ Stephens

06-05-2006 02:18 PM

Grant,

That looks great! Would love it if you would share your code when finished...

T.J.

expert47

06-06-2006 10:15 AM

dayum... sweet

Wow.. nice checkout page. Can't wait to use it.. I'd even pay for the darn thing.. Obviously a lot of work went into it. I'd not mind contributing some $ for it's continued improvement!

marty

amy2203

06-07-2006 02:09 AM

great mod - it looks soooo much better now,

Thanks!

expert47

06-08-2006 08:08 AM

i'm holdiing my cash.. !

Grant is keeping us all in suspense..

Can't wait for the cart as i do a lot of ebay stuff and it will make it so much easier for ebay people to check out..!

I'm sure this mod has taken a good amt of time, and i'm more than willing to cough up some cash for it, if that'll spur completion!

And if Firetank ever answers my mail about their ebay checkout product, this new mod and theirs could be a great combination. It's been 3 days and Firetank hasn't answered, so we'll hold our breath!

marty

rjcbear

06-08-2006 01:04 PM

Ok guy,

I have try to get this working and for some reason is not finding the four images.

I have placed the images in the following forder:

skin1/images

TIA

kind regards

Ricky

QVS	06-09-2006 04:47 AM

Quote:

Originally Posted by rjcbear

Ok guy,

I have try to get this working and for some reason is not finding the four images.

I have placed the images in the following forder:

skin1/images

TIA

kind regards

Ricky

same here, any clues.

JWait

06-10-2006 04:46 AM

"background: url(images/sbbody-r.gif)"

Just a guess, but it looks like the images directory is off the root directory in the example. What if you try

"background: url({$ImagesDir}/sbbody-r.gif)"?

Vacman

06-10-2006 07:24 PM

Quote:

Originally Posted by JWait

"background: url(images/sbbody-r.gif)"

Just a guess, but it looks like the images directory is off the root directory in the example. What if you try

"background: url({$ImagesDir}/sbbody-r.gif)"?

Here is where they go...

/public_html/xcart/skin1/images

rjcbear

06-11-2006 06:28 AM

Quote:

/public_html/xcart/skin1/images

that is the folder that I placed the 4 images

Kind regards

Ricky

Vacman

06-11-2006 07:48 AM

I assume you modified the files mentioned on the first page?

Grant

06-12-2006 10:11 AM

Hi guys,

Sorry been real busy with other stuff.
I'll post up a full set of instructions to the get your checkout looking like mine when I get a chance, and no I don't want any money for it ;)

To ensure that this works you must insert the CSS code into skin1.css as described in the instructions.. If you've done everything as listed there is no reason it shouldn't be working.

To clarify ... the path should be left like this in the skin1.css file :

background: url(images/sbhead-l.gif)

It won't work if you try to call the images using {$ImagesDir} tags.

AKR	06-14-2006 10:55 PM

wow, it's like sitting at the stop light, in a beat up, old ford taurus, and some guy pulls up in his ferrari and offers you a ride.

this is gonna be a sweet mod.

fearnothing

06-18-2006 11:56 AM

Woah Grant ... That is some mod. Congratulations for making us all feel like it is actually 2006 !!!

So considerate of you to choose a colour scheme that slots conveniently into my store, too .... :wink:

Can't wait to see the full set of changes. I'm feeling very embarrased at how giddy I got seeing that customer details page jump into view!

rjcbear

06-19-2006 08:07 AM

Quote:

Originally Posted by Vacman

I assume you modified the files mentioned on the first page?

Yes I sure did.

Kind regards,

Ricky

taltos1

06-19-2006 08:47 AM

Great stuff, another mod I have to add! They never end.. :-)

fearnothing

06-21-2006 03:18 PM

On a related theme ...

In trying to improve the look of the checkout process, I would like to see icons included for each payment method.

If you try to modify the 'Special Instructions' in the payment methods section in admin to include HTML code, when you press 'update' the HTML is deleted. Now if you edit the field directly in phpMyAdmin to include HTML naturally it saves okay.

This is an actual screen dump of how it looks with the IMG tags included by hacking it through phpMyAdmin:

http://www.smartchoicemusic.com/downloads/payment-method-screen-dump.gif

I've removed the tags now in case there is a good reason (?) for this behaviour.

Does anyone have any thoughts on this - maybe this has been covered elsewhere?

it would certainly brighten up the payment options .... 8)

TA	06-28-2006 05:27 PM

Anxiously awaiting... :lol:

taltos1

06-28-2006 06:28 PM

fearnothing
I am also very interested in your mod, looks great! please let us know how it is coming along.

cwill2200

06-28-2006 09:29 PM

fearnothing can you tell us where and what code you added to get this look. I have been looking at trying to do this myself.

Thank you!

shan	06-29-2006 02:59 AM

Quote:

Originally Posted by fearnothing

its a security thing...

there is a list of trusted variables / scripts etc

if you add this to that list you should be ok.

the same thing would strip html from various other forms

not sure where the post is youll have to have a hunt around

fearnothing

06-29-2006 11:42 AM

Hmmm.

Thanks for that Shan. I have searched the forum using 'trusted variables', and there are few posts but mostly relating to using markup in 'Extra Fields'.

It's at this point where I have to admit that I'm getting out of my depth. I think the relevant PHP file is admin/payment_methods.php but beyond that I cannot see what needs to be done to add this variable to the trusted list.

The field that needs to be freed up to accept HTML is 'payment_details' within the 'payment_methods' table (cwill2200 - this is where I added the <IMG> tag to get the CC logos to appear using PHPMyAdmin).

If no-one comes up with an answer in the next few days I'll use up a few support points and ask the X-Cart crew.

MCM	07-05-2006 04:07 PM

What a great mod... the old checkout page to new is incomparable. I did make a few changes, though...

The changes:
1- Add personal details
2- "Americanize" the address, bringing city/state/zip onto one line

Here's how it looks:

http://www.moderncoinmart.com/skin1/images/checkout.jpg

Here's the new, full code for sexy-customer-details.tpl:

Code:

{* $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_personal_information}</h2></div>

<div class="boxbody">





[b]{if $userinfo.default_fields.firstname}{$userinfo.firstname} 

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









{if $userinfo.default_fields.phone}

  {$lng.lbl_phone}: {$userinfo.phone}

{/if}




{if $userinfo.default_fields.fax}

  {$lng.lbl_fax}: {$userinfo.fax}

{/if}




{if $userinfo.default_fields.email}

  {$lng.lbl_email}: {$userinfo.email}{/if}

</td>

<td></td>

</tr>





<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_firstname}{if

$userinfo.default_fields.lastname} {$userinfo.b_lastname}{/if}{/if}




{if $userinfo.default_fields.b_address}{$userinfo.b_address}{/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_statename} {/if} 

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




{if $userinfo.default_fields.b_country}{$userinfo.b_countryname} {/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_firstname}{if

$userinfo.default_fields.lastname} {$userinfo.s_lastname} {/if}{/if}




{if $userinfo.default_fields.s_address}{$userinfo.s_address} {/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_statename} {/if} {if $userinfo.default_fields.s_zipcode}{$userinfo.s_zipcode} {/if}








{if $userinfo.default_fields.s_country}{$userinfo.s_countryname} {/if}






</div>

</div></td>

</tr>

</table>

Again, thanks so much for the great mod!

cwill2200

07-05-2006 05:05 PM

Love this, thank you! If the gray doesn't match our site would there be a way to edit the colors or would I need to just redo images and replace them in the code?

MCM	07-05-2006 05:33 PM

Quote:

Originally Posted by cwill2200

Love this, thank you! If the gray doesn't match our site would there be a way to edit the colors or would I need to just redo images and replace them in the code?

Since they're images, I believe you'd have to just redo the images. An easy way is to go into a good photo editing program and just select a color range and replace the colors with ones that match your site.

Jeremy

fearnothing

07-06-2006 12:24 PM

An update to the images in the Payment Methods fields in admin, courtesy of our good friends the X-Cart Men:

Code:

If you would like to add HTML tags to the "payment_details" field you should open admin/payment_methods.php file and 

replace in it:



require "./auth.php";



with



define('USE_TRUSTED_POST_VARIABLES',1);

$trusted_post_variables = array("posted_data");

require "./auth.php";





Those changes do not introduce any security risk, because the list of the payment methods can be changed by x-cart store administrator only.

It works a treat, and the descriptors in 'Payment Methods' now accept HTML.

So you would need to add this into the field before any text:

[img]../yourlocation/skin1/images/payment_xxxx.gif[/img]

(I Haven't tried using the Image Location variable, but this works and keeps the SSL intact)

You'll obviously need some GIF files - the ones I have used in my store (with white background, not transparent) are available here:

Visa and Mastercard

Amex and Diners

Paypal

Cheque (Check)

And if you prefer to mess around with them yourself, this should do the trick:

Photoshop PSD file in layers

I've updated the screen shots in the earlier posts to reflect exactly how it looks as of now.

NightFire

07-06-2006 02:38 PM

Wow nice fix fearnothing :lol:

What really does the trick if this thing will accept language variables. Then you can place your html tags into the language variables, and also your payments methods descriptions are multilanguage.
Thanks for the fix anyway, it gives me an idea where to start.

Using language variables wouldn't mess up all the code of html and normal text. And also the imagedir variable works etc.

taltos1

07-06-2006 08:30 PM

Quote:

Originally Posted by fearnothing

An update to the images in the Payment Methods fields in admin, courtesy of our good friends the X-Cart Men:....

I just did this, excellent mod, Thanks a lot for the update!

Vacman

07-07-2006 06:43 AM

Quote:

Originally Posted by fearnothing

So you would need to add this into the field before any text:

[img]../yourlocation/skin1/images/payment_xxxx.gif[/img]

I am not sure where the above line is supposed to be inserted?
Is it to go into my line "Visa or Mastercard" in the Payment method screen in Admin?

All times are GMT -8. The time now is 05:35 AM.

Page 1 of 4

Last »

Show 40 posts from this thread on one page