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

Page 2 of 4

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)

smh7233

07-07-2006 07:07 AM

Quote:

Originally Posted by Vacman

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?

In the special Instructions box for the payment you choose.

SamD	07-07-2006 07:50 AM

Quote:

Originally Posted by Grant

Almost done ;)

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

has anyone been able to code this part yet?

Vacman

07-07-2006 08:00 AM

Got it. Thanks.

Gant, what is the status on the rest of this?

cwill2200

07-07-2006 10:24 PM

Where do we add the tag for the CC images?

Quote:

fearnothing wrote:

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

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

I am also not sure where the above line is supposed to be inserted?
Can you tell us newbies?

NightFire

07-07-2006 11:22 PM

Insert at the line of the payment descriptions. Go to admin. Menu administration --> payment methods. The at the payments boxes enter this code before the text.

fearnothing

07-08-2006 04:22 AM

Thanks for clearing up those questions Nightfire and smh7233 - I should have been more considerate with my notes.

Yes, just to clarify the whole thing; Once you have made the change to payment_methods.php, anyone with administration rights in X-Cart will be able to go to Payment Methods (under Administration section) and amend the 'Special Instructions' field for any or all of the payment methods to include HTML markup. (which is not possible without the payment_methods.php modifcation)

To get the 'Visa or Mastercard' option to display the image as in my screenshot, this is the full entry in my 'Special Instructions' field for that payment method:

Code:

[img]../store/skin1/images/payment_visa.gif[/img]

Secure Online Credit Card Processing

I previously uploaded the GIF files to the standard skin1/images folder and my store is in the 'store' directory, but you can substitute this with the location of your store and preferred files location.

The tags are optional, I've included these to make the first (preferred) payment method stand out a little. The
tag puts the text below the image file.

You could of course not have any text in that field, and use an image file only - this would look neater again, but it would mean the customer would have to wait until the images rendered in their browser before choosing a payment method (dial-up, anyone?) so I wouldn't recommend this course of action.

Hope that helps ....

stevep

07-23-2006 08:56 AM

great mod just the job cheers.

expert47

07-27-2006 10:08 PM

Looks good!!

Hi there..

What's the chance you can list all the files and installation locations in one place? There have been some changes (someone did US based stuff) and it's all sort of scattered over this thread.

One set of files with everything needed would be sweet..!

It really does look nice.. !

marty

josebueso

07-30-2006 02:29 AM

Re: Looks good!!

Quote:

Originally Posted by expert47

I can't make this mode to work I followed all the instruccion but seem like nothind change.

Do this mode work with xcart 4.1.2?

Newpowerr

07-30-2006 01:29 PM

Quote:

Originally Posted by NightFire

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.

Too bad it does not work like this. The language variables are smarty tags that are not parsed as on regular pages.

If someone please knows the solutiuon to this, let us now, because there are far more NON English shops and Multilingual Shops than the guys at X-Cart and the X-cart mod manufacturers like to believe (lack of localization in their code).

Too bad that essential stuf on the front end, such as localized shipping and payment methods (i.e. Check or Bank transfer vs Overschrijving per bank, wich one makes the most sense to my Dutch, French or German customers?)

chris

07-31-2006 10:02 AM

new checkout look and feel

The changes you people have discussed on this thread for a much needed new look to the checkout are most interesting. However there are bits of code all over the thread can anyone provide a comprehensive set of code bringing all the bits together please.

Thanks

redstar5

08-09-2006 01:33 AM

I get this error...?

I get this error...

Warning: Smarty error: unable to read resource: "customer/main/sexy_customer_details.tpl" in /home/kravexo/public_html/Smarty-2.6.9/Smarty.class.php on line 1088

Ideas anyone?

jfilardo

09-06-2006 10:52 AM

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

Great mod! Was able to get it working with a little effort.

Be careful when cutting and pasting the code as mineput some spaces in the address calls which forced them to not display.

Question. Can anyone tell me what I would have to change to get the two boxes for Billing and Shipping to be on top of each other as opposed to beside each other? The way my page is formated it is better suited to a vertical format.

Thanks,
Jason.

inebriate

09-06-2006 01:57 PM

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

Quote:

Originally Posted by jfilardo

in sexy_customer_details.tpl, switch the td and tr tags around

sushob

09-22-2006 04:22 PM

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

This looks GREAT in IE, but it seems to be garbled in Firefox. Any ideas?

------
Internet Explorer 6.0
http://www.sushob.com/images/tempimages/sexycustomerdetailsie.jpg

------
Firefox 1.5.0.7
http://www.sushob.com/images/tempimages/sexycustomerdetailsfirefox.jpg

haroldalv

09-26-2006 06:50 AM

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

codes are buggy for 4.1.3 :( can anyone make it work for x-cart 4.1.3 and firefox.

ranger82nd

09-27-2006 04:27 PM

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

Stating the obvious...but it appears that some of the css is not compatible with Mozilla.
So the not so obvious...does anyone have a fix?

ranger82nd

09-29-2006 07:33 AM

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

For the Firefox issue try this! This is only a small snippet of the code being modified!

Instead of checkout.tpl like this:

Code:

<INPUT type="hidden" name="action" value="place_order">

<TR><TD>

<PRE>

<FONT>

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

</FONT>

</PRE>

<P>

{if $ignore_payment_method_selection eq ""}

Change it to:

Code:

<INPUT type="hidden" name="action" value="place_order">

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

<TR><TD>

{if $ignore_payment_method_selection eq ""}

On a side note: Holy Carp! I never realized how <table> redundant x-cart is.

sushob

09-29-2006 01:22 PM

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

Thanks! Looks great!

ranger82nd

10-03-2006 06:33 AM

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

Because all of the image "calls" in the CSS is to the non-SSL image directory this seems to "break the lock" on all of the HTTPS pages.

Code:

.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;

}

Is the solution to put the full HTTPS path?
Such as: url(https://www.yourdomain.com/skin1/images/xxx.gif)

sushob

10-03-2006 12:05 PM

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

I thought this broke my SSL as well, but I found it was actually the Skype button I added to the top menu calling a java script from the Skype website. I fixed that, and everything is as it should be. This mod didn't effect the security at all for my site, as far as I can tell.

ranger82nd

10-04-2006 10:55 AM

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

OK, so I've got this almost the way I want it, but how do I get rid of the dialog.tpl for ONLY the checkout process? It's redundant!

http://www.autographedathlete.com/images/dialog.jpg

I thought I could just make another dialog.tpl and name it something like dialog_checkout.tpl remove the row in the table that has the images and change this:

Code:

{include file="dialog.tpl" title="`$lng.lbl_checkout`: `$lng.lbl_step` `$checkout_step` `$lng.lbl_of` `$total_checkout_steps`" content=$smarty.capture.checkout_dialog extra="width=100%"}

Code:

{include file="dialog_checkout.tpl" title="`$lng.lbl_checkout`: `$lng.lbl_step` `$checkout_step` `$lng.lbl_of` `$total_checkout_steps`" content=$smarty.capture.checkout_dialog extra="width=100%"}

But I'm obviously wrong! I'm guessing it has something to do with:

Code:

content=$smarty.capture.checkout_dialog

Can someone shed some light?

haroldalv

10-04-2006 06:31 PM

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

can anyone get the sexy checkout to work on 4.1.3? its buggy on here.

iDirectGrp.com

10-04-2006 06:39 PM

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

Have read through this whole thread and was quite impressed with the work Grant originated here. I tried to implement this customization to my cart but it did not work. I am running Version 4.1.3 of X-Cart and am new to the product, actually had someone else develop our cart, so excuse my limited knowledge. I am trying to get up to speed as quickly as possible.

What I did discover is that the mod probably didn't work for me since it appears the code dealing with displaying the customer information no longer resides in customer_details.tpl but instead in customer_details_html.tpl under a new subvolume area. This is confusing because the customer_details.tpl does exist just where Grant specified, but appears to not be part of the 4.1.3 implementation. I may be way off on this and I am seeing some customization changes made by the guy who developed my site.

I've experimented with changing the customer_details_html.tpl with no success so far. If anyone has run into this issue implementing this mod in 4.1.3 I would be grateful on knowing how you retrofitted these mods.

sushob

10-05-2006 05:41 PM

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

Here's what I have working successfully on 4.1.3:

1. Create a new file skin1/customer/main/sexy_customer_details.tpl with this code:

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">

{if $userinfo.default_fields.firstname}{$userinfo.firstname} 

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

<br/>

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

{/if}

<br/>

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

{/if}

<br/>

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

<br/>{if $userinfo.default_fields.b_address}{$userinfo.b_address}{/if}

{if $userinfo.b_address_2}<br/>{$userinfo.b_address_2}{/if}

<br/>

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

<br/>

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

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

<br/>

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

{if $userinfo.s_address_2}<br/>{$userinfo.s_address_2} {/if}

<br/>

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

<br/>

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

</div>

</div></td>

</tr>

</table>

2. Open skin1.css and add this at the bottom:

Code:

.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 4 images from the first post and save them in skin1/images.

4. Open skin1/customer/main/checkout.tpl and replace:

Code:

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

With:

Code:

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

Hope it works as well for you as it did for me! :-)

iDirectGrp.com

10-05-2006 07:05 PM

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

Nate,

Thanks for you help with this, I seem to be getting a little closer to fixing the issue now. My text appers to be getting formatted correctly now that I put the changes into fastlane_checkout.tpl instead of checkout.tpl, unfortunatly the boxes are not getting displayed even though I have the images in my images folder. Thinking it was because of lack of qualification on the URL specifiers in the skin1.css, I put in the proper path and still no luck :?.

Lew
www.iDirectGrp.com

sushob

10-06-2006 12:04 PM

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

Is it okay to place a test order on your site so I can see what's going on?

I'm not the most qualified on this forum (by a long shot), but I'll certainly give it a try.

ranger82nd

10-06-2006 12:41 PM

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

It doesn't seem as though you added the css code to your skin1.css file?
If you did, it's not showing, try emptying your templates_c directory!

ranger82nd

10-06-2006 12:48 PM

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

Wait a minute....
It appears that you are using skin1_c.css not skin1.css, make sure you put the code in the skin1_c file.

2coolbaby

10-08-2006 02:25 PM

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

This looks great, but so far the code is only for the cusomter address fields. Anyone have code for further areas of checkout???? IE: Cart Details and Payment Method?

iDirectGrp.com

10-10-2006 08:55 PM

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

Quote:

Originally Posted by sushob

Is it okay to place a test order on your site so I can see what's going on?

I'm not the most qualified on this forum (by a long shot), but I'll certainly give it a try.

Nate,
If all else fails maybe you can try a test order. Not sure exactly what you are proposing, I assume a sandbox order in test mode. Anyway, greatly appreciate your input.
Lew
http://www.idirectgrp.com

iDirectGrp.com

10-10-2006 08:58 PM

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

Quote:

Originally Posted by ranger82nd

Wait a minute....
It appears that you are using skin1_c.css not skin1.css, make sure you put the code in the skin1_c file.

ranger82nd,
No, I actually changed the skin1.css not the skin1_c.css. I had thought I had made this mistake as well. Thanks anyway for your response. If you have any other theories please feel free to share them.
Lew
http://www.idirectgrp.com

sushob

10-11-2006 11:57 AM

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

Quote:

Originally Posted by iDirectGrp.com

I believe he meant that your site is calling skin1_c.css, not skin1.css, so you need to add the code to skin1_c.css:

Code:

.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;

}

ranger82nd

10-11-2006 12:09 PM

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

Quote:

Originally Posted by sushob

I believe he meant that your site is calling skin1_c.css, not skin1.css, so you need to add the code to skin1_c.css:

Code:

.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;

}

YEP!

iDirectGrp.com

10-11-2006 08:55 PM

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

Quote:

Originally Posted by sushob

I believe he meant that your site is calling skin1_c.css, not skin1.css, so you need to add the code to skin1_c.css:

Code:

.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;

}

YES! That was the problem! Thanks for you help on this.

pnm	10-12-2006 04:34 AM

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

Hey Lew,

like your site, did you have it customised or is it a skin, I am looking to fancy my site up from the standard x-cart options.

Kara	10-12-2006 01:27 PM

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

Thanks for this great mod! After reading the ENTIRE thread, tweaking here and there, all is well except ONE thing. My right nav bar whacks out when the sexy boxes are used. And also, I can't seem to see a place to edit/change the info on them after they've been filled out and submitted.

Here's the page before: http://d2729703.u51.websitesource.net/store/cart.php?mode=checkout&registered=

Here's when it goes whacky: http://d2729703.u51.websitesource.net/store/cart.php?paymentid=16&mode=checkout

Any help would be great.

Thanks

sushob

10-12-2006 01:30 PM

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

Quote:

Originally Posted by Kara

The links only work if we add items to the cart and then fill in all the user info. Could you post some screenshots instead?

2coolbaby

10-12-2006 03:16 PM

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

okay I will ask again: This looks great, but so far the code is only for the customer details. Anyone have code for further areas of checkout???? IE: Cart Details and Payment Method?

sushob

10-12-2006 03:20 PM

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

Quote:

Originally Posted by 2coolbaby

okay I will ask again: This looks great, but so far the code is only for the customer details. Anyone have code for further areas of checkout???? IE: Cart Details and Payment Method?

Sorry, but I don't have any reason to....the payment method and cart details look fine in 4.1.3. Only the cutomer details were 'plain text' looking. Maybe someone else can help.

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

Page 2 of 4

Show 40 posts from this thread on one page