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)

snorocket

08-04-2004 04:28 AM

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?

sstillwell@aerostich.com

08-04-2004 07:17 AM

Buttons

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.

snorocket

08-04-2004 07:44 AM

oh my

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

sstillwell@aerostich.com

08-05-2004 10:12 AM

buttons

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.

TheComputerGuy

10-14-2004 10:11 PM

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.

adpboss

12-02-2004 08:03 PM

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

balinor

12-03-2004 03:44 AM

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 :)

Yang Xu

12-04-2004 01:56 AM

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.

thundernugs

03-06-2006 12:32 PM

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

amy2203

04-14-2006 05:56 AM

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

balinor

04-14-2006 06:00 AM

Here's what I use for CSS buttons:

button.tpl

Code:

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



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

<TR>

<TD class="Button2Off" valign="middle" onMouseOver="this.className='Button2On'" onMouseOut="this.className='Button2Off'"><SPAN class="Button2">{$button_title}</span></TD>

</TR>

</TABLE>

Add these two classes to skin1.css and skin1_admin.css:

Code:

.Button2On {COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-DECORATION: none; Background-color: #3D9E6A; border: 1px solid #3D9E6A;}



.Button2Off {Background-color: #cccccc; COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-DECORATION: none; border: 1px solid #666666;}

Adjust the colors accordingly. Only catch with this is that you can't use 'enter' for form submission, you have to actually click on the button.

amy2203

04-14-2006 06:08 AM

I've sorted out button.tpl, and the css, my problem is the login buttons, the ones that want to use the Go image,

kb112211

11-30-2006 06:11 AM

Re: Editing Buttons in 4.0

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 :)[/quote]

HI, I have done all the above, but, I get the following line of text, instead of a button (the functionallity of the link works, but no image...

[img]/xcart/skin1/images/addtocart1.gif[/img]

Any idea??

Thanks!!

kazmattsas

12-09-2006 06:27 PM

Re: Editing Buttons in 4.0

Yep - I got the same issue as kb112211

I am using 4.1 has it changed again since then ???

I'm pretty sure it is an easy one - I just can't get my head around it

any ideas greatly welcomed

kazmattsas

12-09-2006 06:40 PM

Re: Editing Buttons in 4.0

ok

found it

instead of

[img]{$ImagesDir}/imagename.jpg[/img]

Try

<{$img_type} src="{$ImagesDir}/imagename.jpg" />

dhirsch

09-06-2007 09:44 PM

Re: Editing Buttons in 4.0

I'm not sure if this has been covered better anywhere else, but I ran across this thread tonight searching for a solution to this problem in 4.1 and ended up rolling my own solution... In the interest of sharing, here's what I did:

Goal: Make an easy way to replace certain buttons with images only

I wanted a solution that would be easy to replicate for multiple buttons and image files.

In 'buttons/button.tpl', I added this:

Code:

{** DH **}

{elseif $style eq 'image'}

    <span class="SimpleButton" style="{$extrastyle}">

        <a href="{$href|amp}"

            {if $onclick ne ''} onclick="{$onclick}"{/if}

            {if $title ne ''} title="{$title|escape}"{/if}

            {if $target ne ''} target="{$target}"{/if}>

            <img src="{$ImagesDir}/{$imgfile}" alt="{$title|escape}" />

        </a>

    </span>

{** /DH **}

right before:

Code:

{elseif $image_menu}

and after the block following:

Code:

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

I'm not using the standard button.tpl to begin with, so some of my code may be a bit different, but hopefully you get the idea.

Then I created a new TPL file for the button I was replacing. In my case, I wanted to replace the 'Update' button used in the cart for updating the cart quantities. So I created 'update_qty.tpl':

Code:

{include file="buttons/button.tpl" button_title=$lng.lbl_update href=$href title=$title style='image' imgfile='updatebtn.gif' extrastyle='padding-left:5px;'}

The important points here are the hardcoded style (image) which triggers my custom block in button.tpl, and the inclusion of two new variables (imgfile and extrastyle).

$imgfile is used to pass the actual image file - this way, I don't need multiple versions of button.tpl to use different images.
$extrastyle is used to throw in any last minute style changes for that button. Not great web design, but effective in this case.

All of this is called with an {include file="buttons/update_qty.tpl" ...} from cart.tpl in my case.

Result: Pretty much what I wanted. This is my first go-round with the idea, and I'll probably find some problems later, but I wanted to throw it out there in case anybody else had the same issue.

Daniel

Wedji

11-26-2007 04:40 PM

Re: Editing Buttons in 4.0

This has just worked beautifully for me - did it with the Update button so I could follow your example precisely being pretty much out of my depth with coding myself! Now to tackle the rest of my buttons!

Thank you very VERY much for taking the time to post that Mr. dhirsch! :-)

If I may add from my own experience there, your last bit about calling an include in cart.tpl caused a bit of a headscratch for a novice here, so to clarify for those who follow;

Once you've done the above steps, edit skin1/customer/main/cart.tpl

find this line:

Quote:

<td class="ButtonsRow">{include file="buttons/update.tpl" type="input" href="javascript: document.cartform.submit()" js_to_href="Y"}</td>

...and change "update.tpl" to "update_qty.tpl"

You should now see your new image and no text, but still behaving exactly as it did before the editing.

Cheers dhirsch!

JD

Wedji

11-26-2007 05:49 PM

Re: Editing Buttons in 4.0

Oh boy, what a nightmare. They're all called differently! ARGH!

Could any kind soul give us a clear guide on how to replace all the usual buttons with our own separate images please? I've got a lovely Update button now thanks to dhirsch, but I'm snookered for Clear Cart, Checkout, Submit, just about any of the clickable in-cart links, all of which I've got lovely glassy button images made up to replace and am in danger of hurting myself with. :-p

JD

tarty00

05-02-2008 06:35 AM

Re: Editing Buttons in 4.0

Quote:

Originally Posted by balinor

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}

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}

balinor I did this exactly like you said and it works fine and calls the right files but instead of my new button I just get the text for my image. Can you or anyone else check it out:

HERE

and let me know what I am to change because I think I am on a winner here. LOL. Thank you heaps :)

ScrapOrchard

06-10-2008 07:02 PM

Re: Editing Buttons in 4.0

I keep getting this error:

Error: Smarty error: [in buttons/button-cart.tpl line 1]: syntax error: unrecognized tag: \rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{ \f0\fswiss\fcharset0 Arial; (Smarty_Compiler.class.php, line 436) in /home/scraporc/public_html/market/Smarty-2.6.12/Smarty.class.php on line 1095

What did I do wrong?! :(

Realsecurity

05-18-2009 08:45 AM

Re: Editing Buttons in 4.0

How about EDITING the text on the BUTTONS ? i have the latest xcart installed and alot different from previouse versions, i have in the past changed text using the languages feature, the 2 things i want to change is SHOPPING CART button to read VIEW BASKET, and the link CHECKOUT to Checkout lower case! but no matter where i look cant see where to change! totally lost.

any ideas of what tpl files to look at would be great....

All times are GMT -8. The time now is 10:58 AM.