X-Cart forums

[gastu]

i dont know why but x-cart or addon skins not have image source (psd), its really necessary for change botton "go" "live help" "special offer" for example.

i buy software with all source.

[inboxnews]

Bump.

I'm looking for an easy way to change the 3-button sliced up buttons with one-button. Is there an easy way to do that?

Buttons I want to change:

'add to cart' on the product detail and shopping cart page.

I'd also like to add a new button for the 'click to enlarge' product image preview popup on the product detail page.

TIA

[inboxnews]

OK, I've changed the 'add to cart' button on the product detail page (product.tpl). Here's how to do it:

Change this code on skin1/buttons/button.tpl on or near line 25:

<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>

to this:

<td>
<img src="{$ImagesDir}/button-add.jpg" />
</td>

Make sure your new image has been uploaded to /skin1/images

Still working on the other stuff... feel free to submit your comments. Thanks.

[inboxnews]

OK, so the above directions unfortunately also changed the search button, so now my 'add to cart' button is also now my search button, which sucks. Hmm, help anyone?

[gb2world]

I have not done exactly what you are trying to do, I've only added a couple of button styles - so I can't give you precise directions, but maybe this will help. You will have to experiment.

The button.tpl is shared - you will see many instances of buttons that use button.tpl (that does not suck - it is shared code - more efficient, hopefully) - so if you are going to make changes in there for only certain buttons, you need to use {if} based on the variables you pass in with the include from the originating file (product.tpl in your case). Perhaps you could set the $style or the $button_title and/or other variables to something. You can figure out how xcart is using those variables, then modify their code, or do your own thing with an {if}.

in product.tpl:
{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="MY_HAPPY_BUTTON" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$sma rty.get.pconf`';document.orderform.action='pconf.p hp';document.orderform.submit()`$rdelim`" style="MY_HAPPY_BUTTON_STYLE" button_style="WHATEVER_I_WANT"}

Then, in button.tpl:
{if $button_style eq "WHATEVER_I_WANT"}
do cool stuff
{/if}

etc.

If this works - you can replace what they did with non-sliced buttons, or css or whatever you need. If it works - post back - I may want to duplicate it!


If that is too complex, have you tried just replacing the include for button.tpl in product.tpl to use your button code instead? Look at what that call to button.tpl would have included in product.tpl, and replace it with your code.

[inboxnews]

Originally Posted by gb2world

I have not done exactly what you are trying to do, I've only added a couple of button styles - so I can't give you precise directions, but maybe this will help. You will have to experiment.

The button.tpl is shared - you will see many instances of buttons that use button.tpl (that does not suck - it is shared code - more efficient, hopefully) - so if you are going to make changes in there for only certain buttons, you need to use {if} based on the variables you pass in with the include from the originating file (product.tpl in your case). Perhaps you could set the $style or the $button_title and/or other variables to something. You can figure out how xcart is using those variables, then modify their code, or do your own thing with an {if}.

in product.tpl:
{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="MY_HAPPY_BUTTON" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$sma rty.get.pconf`';document.orderform.action='pconf.p hp';document.orderform.submit()`$rdelim`" style="MY_HAPPY_BUTTON_STYLE" button_style="WHATEVER_I_WANT"}

Then, in button.tpl:
{if $button_style eq "WHATEVER_I_WANT"}
do cool stuff
{/if}

etc.

If this works - you can replace what they did with non-sliced buttons, or css or whatever you need. If it works - post back - I may want to duplicate it!


If that is too complex, have you tried just replacing the include for button.tpl in product.tpl to use your button code instead? Look at what that call to button.tpl would have included in product.tpl, and replace it with your code.

Thanks gb2. You're definately on to something, unfortunately for me, the 'if' statement wont work here. since the 'if' statement is already used. It needs to be an 'else' statement instead. I've tried some stuff but failed so far. I'll post my success should that happen.

[retrtrtrytrutru]

Another option you could use is to replace the graphics with the default form buttons... This way you don't have to create any new graphics and I personally feel that the default buttons are much more clear to unexperienced users.

How to do this; go to buttons\button.tpl and replace:

<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
    <td>
        <{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
    </td>
    <td class="Button"{$reading_direction_tag}>
        <font class="Button">{$button_title}</font>
    </td>
    <td>
        <img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
    </td>
</tr>
{/strip}
</table>

With this:

<input type="button" onclick="{$js_link}" value="{$button_title}">

[ARW VISIONS]

The change the add to cart button you edit add_to_cart.tpl.

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

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

Ok so atcButton.tpl does not yet exist, so you open button.tpl with your text editor and save a copy of it as atcButton.tpl

NOTE: make sure you don't save over button.tpl.

Make the appropriate changes to you new file and upload the add_to_cart.tpl and the new atcButton.tpl to the buttons folder and you've got it.

you can check out www.affordableimrpint.com to see it in action. I have changed all of the buttons. You can also make them change when hovered over.

[ARW VISIONS]

If you want the buttons to change whn hovered over use this.

in your product.tpl

find and change:
<tr>
<td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>


to:
<tr>
<td align="center"><a href="javascript: document.orderform.submit();"
onmouseover="document.atcButton.src='skin1/images/atcButton2.gif';"
onmouseout="document.atcButton.src='skin1/images/atcButton.gif';">
<img name="atcButton" src="skin1/images/atcButton.gif"
width ="200px" height="37px" />
</a>
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>

Now make the images you want to use as your 'out' and 'hover' buttons. Once you have them made upload them and the new product.tpl and you are good to go.

[inboxnews]

Thanks Ashley, that worked great!