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

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)

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!

Quote:

Originally Posted by fearnothing

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)

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

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.

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!

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?

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

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.

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.

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!

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?