Buttons on Shopping Cart and Checkout pages - onmouseover

[CarolA]

Hi. I have a custom shopping cart template. In there, I use the typical [-- BUTTON Checkout --] and all the other "BUTTON" calls. I know where to change the images that those use in the Store Preferences. In there, it's just a link to each image. In the rest of my pages, I use onmouseover to change the button images when the user hovers over the button. For instance, here's my code for "add to cart" in my product template:
<input type=image src="media/images/addtobag.gif" onmouseover="this.src='media/images/addtobag_over.gif'" onmouseout="this.src='media/images/addtobag.gif'" alt="add to shopping bag" width="88" height="25" vspace="0" hspace="0" border="0" align="bottom" name="Add to Shopping Bag">

Is it possible to do this for my buttons in the shopping cart and checkout page? I hate just having static images for important functions like checkout, submit order, etc.

thanks!
Carol

[Jim]

You should be able to use onmouseover events with the buttons in the cart.

Instead of just using [-- BUTTON Checkout --] in your template replace it with the code that ShopSite generates for the button and modify that to include your onmouseover images

Something like
replace [-- BUTTON Checkout --]
with
<input src="http://mydomain.com/shopsite-images/en-US/buttons/3col-blue/btn-securecheckout.png" class="button8" name="Checkout" onmouseover="this.src='http://mydomain.com/shopsite-images/en-US/buttons/3col-blue/btn-emptycart.png'" onmouseout="this.src='http://mydomain.com/shopsite-images/en-US/buttons/3col-blue/btn-securecheckout.png'"alt="Checkout" title="Checkout" tabindex="5" onclick="return(CheckIt(8,0));" align="bottom" border="0" type="image">


You need to make sure the images are the same size or it kind of shakes as it changes from one image to the other. This is caused by the location of the onmouseover and onmouseout changing based on the size of the image. In my trial code above the buttons are not the same size but you can see that it works.

[CarolA]

Hi Jim. Sorry it took me so long to reply. Is there information anywhere on the role of the tabindex and CheckIt values? I'm viewing my cart multiple times and they are different each time, so I would have to programmatically figure out what that's doing and insert the correct values? Not sure it's worth that much trouble unless that code is somewhere already that I can use. thanks.

[Jim]

I'm not aware of any reference that states what the tabindex and Checkit values are but you might check out http://www.shopsite.com/templates/cookbook/builtintemplates.shtml and see if that mentions it.

The tabindex is simply the order the buttons will be accessed when you press tab on the screen. It will probably be different for different templates since the buttons are placed in different locations. You could probably just leave the tabindex out and most people would never no. Or if you leave it as it is they will eventually get to the correct button if they continue pressing tab until the button they want is hilighted.

I believe the Checkit values are always the same since they reference the same section of javascript that is included in all templates. They are used to validate which button function is being called and what happens when the button is pressed. So those values would need to remain the same.

To get the section of code that I previously posted I went to the template and where ever there was a [-- BUTTON something --]
tag I put JIM in front and behind the tag like
<p>JIM (buttonname)<p>[-- BUTTON name --]<p>JIM<p>
Where the (buttonname) became the name used for the button for example 'Checkout'.

I saved the template and then went to the cart.

The code for each button was highlighted with the JIM buttonname before and JIM after so it was easy to see what was output by the BUTTON tag. I then copied that and replace the button tab in the template with the resultant code and made the modifications. Note: you can comment out the original button tag by putting it on a line by itself in the template and putting a # as the first character of that line. That way if your modified code has a problem you can just remove it and the # in front of the tag and you're back to where you started.

[CarolA]

Thanks Jim! I'll look at it some more. I thought the checkit value was changing each time, but maybe I was confused. We're in the middle of a conversion from MOM to Ordoro, our busy season is starting, and things are kinda frantic around here. I probably won't get back to it for a few weeks.

Carol

[mjbrunelle]

The CheckIt function scans through your input form to besure there has been data input.

[CarolA]

Thanks for the additional information on CheckIt!