Javascript with code block as variable

[Arend]

Hi,

I have added some simple javascript in the checkout-step4.html page but I can't get it working.

<script language="javascript" type="text/javascript">
var x=[BALANCE];
var y=1.21;
var vat=x/y;
document.write (vat);
</script>

It does not seem to proces the code block [BALANCE] because if I change it to a manual input like '100' it outputs the right result (= 82.64) ...

Does this mean I can not use the code blocks as a variable in javascript? Or am I missing something here?

Thanks in advance.

Arend

[cbsteven]

You can, but they can only be used in sections of the page that are expected. In this case I believe [balance] can only be used in the section surrounded by <!--START: GIFTCERTS--> and <!--END: GIFTCERTS-->
You could set the variable there and then use it again later on.

[Arend]

You can, but they can only be used in sections of the page that are expected. In this case I believe [balance] can only be used in the section surrounded by <!--START: GIFTCERTS--> and <!--END: GIFTCERTS-->
You could set the variable there and then use it again later on.

Thanks for the quick response, sorry, I am a newby with javascript.

What do you mean with 'set the variable there'?

I have put the whole script between <!--START: GIFTCERTS--> and <!--END: GIFTCERTS--> but that does not work.

                      
<!--START: GIFTCERTS-->
<tr class="font1">
<td valign="top" align="right" width="32%" class="invoice_table"><b>[shoppingcart_giftcertificate]:</b></td>
<td valign="top" align="right" width="8%" class="invoice_table">[GIFTCERTS]</td>
</tr>
<tr class="font1">
<td valign="top" align="right" width="32%" class="invoice_table"><b>[shoppingcart_balance]:</b></td>
<td valign="top" align="right" width="8%" class="invoice_table">[BALANCE]</td>
<td>Bedrag exclusief 21% BTW:
<script language="javascript" type="text/javascript">
var x=[BALANCE];
var y=1.21;
var vat=x/y;
document.write(vat);
</script>
</td>
</tr>
<!--END: GIFTCERTS-->

[cbsteven]

As I read it this should work. It's possible that the system will only replace the first instance of [BALANCE]. Try moving it to the top of the section and see if it works.

If not then I am out of ideas as I am only slightly more advanced with JS than you are.

If it does work then your only problem will be displaying the balance down where it was originally. You'd need to use javascript to do this using its ability to replace HTML. Vague tutorial here

[jleclair]

there are many tags you cant reuse. [balance] may be one of them. it may be slightly less efficient but you could just wrap balance in a span or something you can slap an id to and reference the value that way. 3dCart Template Reference Guide will tell you the dependencies of each particular tag.

imo. leave balance where it is.. wrap it with <span id="yourVariableName">[balance]</span>

jQuery('#yourVariableName').text() will return the value for you.

your code would then read:

<script language="javascript" type="text/javascript">
var x= parseFloat(jQuery('#yourVariableNameHere').text()) ;
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));
</script>

CodePen · Pen

[cbsteven]

Agreed. That's a better way to do it.

[Arend]

there are many tags you cant reuse. [balance] may be one of them. it may be slightly less efficient but you could just wrap balance in a span or something you can slap an id to and reference the value that way. 3dCart Template Reference Guide will tell you the dependencies of each particular tag.

imo. leave balance where it is.. wrap it with <span id="yourVariableName">[balance]</span>

jQuery('#yourVariableName').text() will return the value for you.

your code would then read:

<script language="javascript" type="text/javascript">
var x= parseFloat(jQuery('#yourVariableNameHere').text()) ;
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));
</script>

CodePen · Pen

Thanks for tuning in, I have tried your code but I get a 'NaN' error which I am trying to solve now.

[Arend]

I just read on w3schools about the parseFloat() Function the following:

Note: If the first character cannot be converted to a number, parseFloat() returns NaN.

When I look at the page I notice a currency symbol, this symbol is included in the code block, e.g. [BALANCE] contains the currency symbol and the numbers.

Is there a way to force it to skip the first digit and start with the second?

EDIT:
I just tried to leave the currency symbol in the shopadmin blank, the currency symbol is indeed gone on the checkout pages but the script output is still 'NaN'.

[cbsteven]

Should be easy to solve. First you need to figure out what character is messing it up. Maybe it's just an extraneous space. Put it some example figures until you can replicate the problem. You should be able to use some combination of the functions here to change the [balance] until parseFloat works on it. Lets say there is an extra space at the end of the number, you could use the replace() function to get rid of it. Example:

var x= jQuery('#yourVariableNameHere').text() ;
x = x.replace(" ","");
x = parseFloat(x);

[Arend]

I am going to try it, thanks for your input again.

[jleclair]

hey im really sorry about forgetting the dollar sign. when the asp processes the tag, i believe it trims of all whitespace so the extra space should not be an issue. if it does, let me know ill show you where to put the .trim() at also.

updated code to remove the $ sign

var x= parseFloat(jQuery('#yourVariableNameHere').text(). replace(/[\$]/g, '')); //those are 2 single quotes after the comma
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));

check the codepen to confirm here: CodePen · Pen

[Arend]

hey im really sorry about forgetting the dollar sign.

updated code to remove the $ sign

var x= parseFloat(jQuery('#yourVariableNameHere').text(). replace(/[\$]/g, '')); //those are 2 single quotes after the comma
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));

check the codepen to confirm here: CodePen · Pen

I am very glad you both try to help me! Unfortunately it still produces a 'NaN', perhaps ASP does leave whitespace so I would be glad if you could provide me the 'trim' code.

[jleclair]

if you copy/pasted from my last post.. for some reason there was a space between the . and replace so potentially it wasnt removing the $ if you copied it directly. /shrug

if you need the trim i would put it after text.. as shown below

var x= parseFloat(jQuery('#yourVariableNameHere').text(). trim().replace(/[\$]/g, ''));
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));

edit: it keeps adding spaces.. make sure your code doesnt have any spaces in the chain of expressions. something with this forum? in the editor window there are no spaces.. but if i copy and paste from the posted code, it shows at least one has been inserted

[Arend]

Still 'NaN' .

                      
<!--START: GIFTCERTS-->
<tr class="font1">
<td valign="top" align="right" width="32%" class="invoice_table"><b>[shoppingcart_giftcertificate]:</b></td>
<td valign="top" align="right" width="8%" class="invoice_table">[GIFTCERTS]</td>
</tr>
<tr class="font1">
<td valign="top" align="right" width="32%" class="invoice_table"><b>[shoppingcart_balance]:</b></td>
<td valign="top" align="right" width="8%" class="invoice_table"><span id="btwgrondslag">[BALANCE]</span></td>
</tr>
<!--END: GIFTCERTS-->
</table></td>
<table><tr><td>
<script language="javascript" type="text/javascript">
var x=parseFloat(jQuery('#btwgrondslag').text().trim().replace(/[\$]/g,'')); 
var y=1.21;
var vat=x/y;
document.write (vat.toFixed(2));
</script>
</table></tr></td>
</tr>
</table>

[cbsteven]

Can you confirm that you have jquery installed? Look in your frame.html for any lines that contain the word jquery and paste it in here.