X-Cart forums - Editing Buttons in 4.0

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Editing Buttons in 4.0 (https://forum.x-cart.com/showthread.php?t=8771)

Editing Buttons in 4.0

oh my gosh how do you put an image as a button in 4.0? this was a piece of cake in previous version but now the buttons are all javascripted and you lose button cliking functionality, what's the deal with buttons/button.tpl, if you change 1 thing the none of the buttons work, oh my gosh buttons are so simple whats the deal? seriously is this a bug?

I tested 4.0.0 and the buttons were quite buggy. A lot of the javascript was broken.

It seems this has changed in 4.0.1. To change them to an image from the ugly "text and go" button.

Code:

{include file="buttons/update.tpl" style="button" href="javascript: document.cartform.submit()" js_to_href="Y"}

The style="button" is what you are looking for to make it an image.

I hope this helps.

well i tried to get an image as a button in the buy_now.tpl but i can't get this to work at all, in previous version all i used to put was:

[img]images/buynow.jpg[/img]

in 4.0 the default is:

{include file="buttons/button.tpl" button_title=$lng.lbl_buy_now href=$href title=$title style=$style}

and i'm trying to use:

{include file="buttons/button.tpl" button_title=$lng.lbl_buy_now href=$href title=$title style=button src="images/submit.jpg" width="200" height="22"
}

and no matter what i try to do i can't get my own custom image as a button, the javascript is messing thigns up, what are you using to geth this to work? Thanks

Open up the file skin1/buttons/button.tpl

That is the final code for the button. There you can specify some things about the button. You may also want to look at the css file skin1.css under the .Button listing there are some things to look at.

Essentiall the button is just a three celled table. The left side, the middle with the text of the button, then the right image.

ok, i'm in the same boat here. All I want to do is change all the buttons in X-cart 4.0.1 to images (.gif's) i have made. No text involved, just images.

Could someone please point out exactly how to do this (what files to edit, and how to edit them).

There has been no clear cut answers as of yet.

If you want to use image buttons in 4.0 it is a nightmare. SNO is right.

So we are stuck with the stock FUGLY X-cart buttons, because I can't seem to find a source file to edit.....

Here is a method for changing the buttons to a simple .jpg or .gif. Keep in mind that all buttons use the same template, you will want to create a different button.tpl file for each different type. The text for the button in this case will be in the .jpg or .gif, the Smarty tags will not be used. I'll use 'Add to Cart' as an example.

1. Create a new .tpl in the buttons/ directory and call it button-cart.tpl.

2. Paste the following code in to it:

Code:

{* $Id: button.tpl,v 1.16 2004/06/23 08:14:34 max Exp $ *}

{if $type eq 'input'}{assign var="img_type" value='INPUT type="image"'}{else}{assign var="img_type" value='IMG'}{/if}

{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}

{if $js_link eq $href}{assign var="js_link" value="javascript: self.location='`$href`'"}

{else}{assign var="js_link" value=$href}{if $js_to_href ne 'Y'}{assign var="onclick" value=$href}{assign var="href" value="javascript: void(0);"}{/if}{/if}

{if $style eq 'button'}

<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" valign="middle"{if $title ne ''} title="{$title}"{/if}>

<TR>

<TD>[img]{$ImagesDir}/imagename.jpg[/img]</TD></TR>

</TABLE>

{else}

<FONT class="FormButton">{$button_title} <{$img_type} {include file="buttons/go_image.tpl" full_url='Y'}></FONT>

{/if}

4. Insert the name of your button image where it says imagename.jpg. This can of course be a .jpg or a .gif.

5. Upload your image to the Skin1/images directory.

6. Open the buttons/addtocart.tpl and replace this:

Code:

{include file="buttons/button.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}

with this:

Code:

{include file="buttons/button-cart.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}

7. That should change your addtocart button to the image you just specified.

You will need to follow this same procedure for add to wish list, buy now, etc. If you want the same image for ALL the buttons, just edit the button.tpl file.

I can't promise this will work for you, but it does the trick for me :)

1. Open your skin1/button/button.tpl file:

2. Delete the two <td> with images but1.gif and but2.gif. Codes will be:

Code:

{* $Id: button.tpl,v 1.16.2.1 2004/11/01 07:33:15 max Exp $ *}

{if $config.Adaptives.platform eq 'MacPPC' && $config.Adaptives.browser eq 'NN'}{assign var="js_to_href" value="Y"}{/if}

{if $type eq 'input'}{assign var="img_type" value='INPUT type="image"'}{else}{assign var="img_type" value='IMG'}{/if}

{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}

{if $js_link eq $href}{assign var="js_link" value="javascript: self.location='`$href`'"}

{else}{assign var="js_link" value=$href}{if $js_to_href ne 'Y'}{assign var="onclick" value=$href}{assign var="href" value="javascript: void(0);"}{/if}{/if}

{if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}

<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" valign="middle"{if $title ne ''} title="{$title}"{/if}>

<TR><TD class="Button" nowrap background="{$ImagesDir}/butbg.gif">{$button_title}</TD></TR>

</TABLE>

{else}

<FONT class="FormButton">{$button_title} <{$img_type} {include file="buttons/go_image.tpl" full_url='Y'}></FONT>

{/if}

3. Name your image as butbg.gif and put it in skin1/images directory.

Done.

balinor, you are the man - i have been wanting to change the x-cart buttons to actual, nice looking images for a long time, but whenever i get into it, it is such a hassle i give up. your mod works great in 4.0.17

now i am confident to change all the buttons!

thanks!

mike

My buttons are actually just styled links that are styled by css, so I'd like to replace them all but I'm not sure how to go about it, am I best trying to edit the button templates, or editing the other tpl files to just call the button.tpl file?

I guess it's easier to do the first option so I don't have to sort out all the variables each time,

Why is this so complicated and in so many files!!