Home I Log In I DemoShop I FAQ I Contact I Security I Help
.   .
Top Tip - Dynamic Multi-Currency Prices
 
  The following instructions explain how to add dynamic multi-currency price fields to your web page using eButtonz.

Minimum requirements:

Method:

When adding your eButtonz buy buttons add 2 buttons next to your product or service.

1. Make a buy button with style = "Text & Price". This will add a dynamic price to the page. The code will look something like this:

<ebutton id="FLP34" sid="5846TestShop" >
<script language="JavaScript">
<!--
makeB("5846TestShop","FLP34","Price: ","2");
//-->
</script>
</ebutton>

2. Now add the 2nd buy button style = "Image". This will add an image buy button. The code in will look something like this:

<ebutton id="FLP34" sid="5846TestShop" >
<script language="JavaScript">
<!--
makeB("5846TestShop","FLP34","add2basket.gif","1");
//-->
</script>
</ebutton>

Tip: You can easily duplicate the buy buttons in your web page at the code level and just change the buy style attribute from 1 to 2.

Trick

A buy button with style "Text & Price" will look like a standard form button. However, if you use CSS (cascading style sheets) you can make the gray button elements disappear leaving just the text in your chosen font and size. To do this you need to add some simple CSS code to the head section of your web page such as the example below:

<html>
<head>
<title>Products</title>

<ebuttonz_script>

(eButtonz code removed for demonstration purposes only -do not edit your original code)

</ebuttonz_script>

<style type="text/css">
<!--
input {
BACKGROUND-COLOR: #FFFFFF ;
BORDER-BOTTOM: #FFFFFF 0px solid;
BORDER-LEFT: #FFFFFF 0px solid;
BORDER-RIGHT: #FFFFFF 0px solid;
BORDER-TOP: #FFFFFF 0px solid;
COLOR: #FFFFFF ;
CURSOR: hand;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 12px; color: black;
FONT-WEIGHT: normal;
WIDTH:120px;
HEIGHT: 20px
}
-->
</style>
</head>

Note that an eButtonz buy button with style "Text & Price" & "Image" will generate a form button with an "input" attribute. The CSS effects all form elements with an input attribute.

In the CSS example above the WIDTH: 120px and HEIGHT: 20px attributes match the size of the image used in the eButtonz buy button style = "Image" as used in 2 above. If these sizes in the CSS do not match your image it will appear distorted.

Considerations

By adding this code to your web page ALL form elements with an input attribute will be effected by the CSS - which may not be what you want. To prevent this create additional CSS definitions for your own form elements that share the input attribute.

<style type="text/css">
<!--
input {
BACKGROUND-COLOR: #FFFFFF ;
BORDER-BOTTOM: #FFFFFF 0px solid;
BORDER-LEFT: #FFFFFF 0px solid;
BORDER-RIGHT: #FFFFFF 0px solid;
BORDER-TOP: #FFFFFF 0px solid;
COLOR: #FFFFFF ;
CURSOR: hand;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 12px; color: black;
FONT-WEIGHT: normal;
WIDTH:120px;
HEIGHT: 20px
}

.mybutton {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
height: 25px;
width: 100px
}
-->
</style>
</head>

Note that input does not have a "." before it and mybutton does. This means that any element in your web page with an input attribute will attract this CSS class. The "." means that only form elements with "class=mybutton" will attract this CSS class.

Now in your web page attach the CSS class to your own form button as shown below:

<form name="form1" method="post" action=whatever.cgi"">
<input type="submit" name="Submit" value="Submit" class="mybutton">
</form>

Tip: The image must be wide enough to allow the text and price to be displayed as defined in style = "Text & Price".

  
       
.   .
. Back .
Home I Log In I DemoShop I FAQ I Contact I Security I Help
copyright moltengold ltd