Wondering if anyone out there has come up with a way of displaying a table on their Product Description page. When I try it, I get major differences when viewing in FireFox and IE, and the tables just don't come out right.

Also, I would love to create a "You Save" function which would be a difference between List Pric and Our Price (or whatever the webpage owner has named them) and would be expressed as both $ and % saved. I see this on most pages, but MC doesn't have a function for this.

A "You Save" function is a great idea and I'll make sure that it is logged as a feature request. In the meantime, here is a way you can create a "You Save" function for your site using the Adv. Product Display.

In your APD template, place a span tag that has an id around your DRAWPRODUCTOTHERSPRICE function call. Also place an empty span tag that has an id where you want your "You Save" price to be. So your HTML would look something like this-



Then place the following Javascript at the bottom of your template-



This should give you the "You Save" price difference and percent difference. Let me know if you have any questions.

Thanks so much Ryan!
I've been looking for a way to do that for a long time!!!

I've changed two things for my site...
First, I added an if statement so it will not display that $NaN$ thing if there is not a list price for a product.
If the youSave is greater than or equal to $0.01, it will display it, if not it will display nothing.
I also made it so the youSave amount is truncated at two decimal points.
One thing I changed is in the next to last line I used:

Thanks again Ryan!!

Doing it this way will work, but you will get a decimal value instead of a true percent (so 0.17 instead of 17%). If you want a percent that is rouned to two decimal places you could do it like this-

Ryan, I edited my previous post to include an if statement to check to see if there is a value in youSave.
Let me know if you think that will work fine.

Here is an example of how it displays nothing when no List Price is entered:
http://www.lowpriceskates.com/index.asp?Pa...&ProdID=282

Adding that "If" statement should work. If you wanted, you could even update the code to hide the entire "You Save" section. To do this, move the "You Save" text to be inside the span tag. Then update the span tag so that it will not display by default by adding style="display:none". So your HTML would look like this-



Then you can add this JavaScript. I updated it to check for numeric values for othersPrice and productPrice. If there are numeric values, it will calculate the difference and then display the "You Save" section.



Also, I updated the code to use the "toFixed" method instead of the "Math.round" function. The number passed to "toFixed" determines which decimal place the number is rounded to (so ".toFix(0)" will return a rounded whole number, ".toFix(2)" will return a number rounded to the second decimal place, and so on).

As always, feel free to post any questions you may have.

Ryan, I'm trying your new code and it works, but it still displays the You Save: part even when there is no List Price.
Check it out:
http://www.lowpriceskates.com/index.asp?Pa...&ProdID=282

I changed the toFixed(2) for the percent to (0) so it would only display the percent in a whole number.
Any ideas on not displaying the You Save Part?

For the example in my previous post, the "You Save" text needed to be inside the span tag. However, since you have the "You Save" text and value in different cells of a table, that wouldn't work well for you. But this will still work with a table with just a few quick changes.

For the row that displays the "You Save" section you have this-


You will need to assign an ID to this row ("YouSaveRow") and move the style "display:none" property from the span tag to the row tag. So your HTML will end up looking like this-



Then update the JavaScript to display the YouSaveRow instead of the span tag when a "You Save" value exists. Here is the JavaScript (only the last two lines of code before the "</script>" tag changed)-



That should do it. Let me know if you run into any problems.

Perfect, thanks!!!

Ryan, thanks so much, I was ready to do it manually for like 500 products. Yikes!
I seem to be having the same problem lowpriceskates was having, I can't get the "you save" to disapear if there's not savings. My html seems to be different than his:

<table width="100%" border="0" cellspacing="0" cellpadding="3" style="font:14px Verdana, Arial, Helvetica, sans-serif;color:#111"> <tr> <td><b>List Price:</b>&nbsp;<span id="OthersPrice" style="text-decoration:line-through"><% DRAWPRODUCTOTHERSPRICE %></span><BR></td> </tr> <tr> <td><b>Our Price:&nbsp;<span style="color:#FF0000"><% DRAWPRODUCTPRICE %></span></b></td> </tr> <tr> <td> <b>You Save:&nbsp;<span id="YouSave"></span></b> </tr></td> <tr><td><BR>

I'd also like to change the color of just the $ and % to blue #0000FF. I've changed it to bold, which I wanted but are you able to see what I'm doing wrong? Thanks!

BamaCat,

You need to assign an id to the TR tag that the "You Save" section is in. View my previous post for details on how to do this.

Also, I noticed that after your "YouSave" span tag, you have your </td></tr> tags switched around.

To change the color of the "You Save" price and percent, you can add a color attribute (style="color:#FF0000") to the span tag.

Let me know if you run into any problems.

Well, I switched </td></tr> and the color worked, thanks. But, jeez, I can't get the "You Save" to dissapear if the List Price and Our Price are the same! I've got:

<tr> <td><b>List Price: </b><span id="OthersPrice" style="text-decoration:line-through"><% DRAWPRODUCTOTHERSPRICE %></span><BR></td> </tr> <tr> <td><b>Our Price: <span style="color:#FF0000"><% DRAWPRODUCTPRICE %></span></b></td> </tr> <tr> <td> <b>
<span id="YouSave" style="display:none">You Save: </span><br></b> </td></tr>

And I added your JavaScript exactly as it is above, I'm just not sure what I'm doing wrong? Help!

BamaCat,

It looks like you are looking at the wrong post. You do not have an ID in your TR tag. Your TR tag needs to look like this - "<tr id="YouSaveRow">". Then use the JavaScript from this post - http://forums.monstersmallbusiness.com/ind...mp;#entry116838

So now I have this (below), I used the JavaScript above and it still does not hide "You Save". Ugh!

<tr> <td><b>Our Price:&nbsp;<span style="color:#FF0000"><% DRAWPRODUCTPRICE %></span></b></td> </tr> <tr id="YouSaveRow"> <td> <b>You Save:&nbsp;<span id="YouSave" style="color:#0000FF"></span></b> </td></tr>

It looks like your HTML is correct. Make sure that the Template you are updating is the same one that is active for your site. Otherwise you site will not show the changes you made.

Also double check your JavaScript - I should have the line "document.getElementById("YouSaveRow").style.display = "";" near the bottom.

Let me know if you are still having problems.

This is the JavaScript I'm using, the one from above. I don't see that line, but not sure if it's an addition, or if it needs to replace some html already in this script?

<script language="javascript" type="text/javascript">
othersPrice = parseFloat(document.getElementById("OthersPrice").innerHTML.replace('$', ''));
productPrice = parseFloat(document.getElementById("strRealPrice").innerHTML.replace('$', ''));
youSave = parseFloat(othersPrice - productPrice);

document.getElementById("YouSave").innerHTML = '$' + youSave + ' (' + Math.round(youSave / othersPrice * 100) + '%)';
</script>

Try this JavaScript-

doesn't work. I don't know what's wrong.

Make sure the Template you are updating is the one that is active. Otherwise you will not see the changes on your StoreFront. If that's not it - what web browser and operating system are you using?

I am, I've been updating them all along. I have a "test" template that I save to test the new html I'm trying, then if it works I save it as my main template. Then I switch to that template from the test template. It's just not working. But I've had html problems ever since I started working with APD editor. Functions don't work, my wish list disapeared one day and still hasn't been corrected, etc.

Another problem is some of my products are being calculated to 16 digits for the $ amount! It's so weird! The List Price and Our Price numbers are all discounted by an even dollar amount like $2 or $4, but they are still going out 16 digits. What the heck?

BamaCat,

I checked your HTML in the APD editor and I don't see the function call for Wishlist anywhere. Try adding <%DRAWADDTOWISHLISTBUTTON%> to the HTML and Wishlist should appear on your site. Let me know if you have any further questions.

Thanks,

Okay, cool. I'll add the wishlist function.

Any idea why the "you Save" html is calculating some of my products $ savings to 16 digits? It's weird. An example is in "Alternative Energy" link in Products. The product "Solar Power - Power Tech Series!" in the 4th column, 2nd row. If you click on it to get to Product Details page you can see it's You Save: $3.0000000000000036 (9%)

Also, "You Save" wont disapear when "List Price" and "Our Price" are the same?

You can make the "You Save" section not appear by changing the following line of JavaScript-


To this-

The $ and % amount disapears but not "You Save:"

You need to assign a row id to your TR tag. You have this-


Make it this-

nope, doesn't work

After re-reading one of my original posts, I realized I did not give you all of the HTML you needed. You will also need to initially hide the row using a style tag. So your HTML will look like this-



Sorry about that - hope it works this time.

That did it, excellent! Thanks!

I'm sure you're sick of this thread, but wondering if there's html to make "List Price" dissapear if it's $0, so only "Our Price" is shown. Right now, the $ amount for List Price doesn't show if it's $0, but "List Price" text does. thanks again, getting there!

You can hide the "List Price" section the same way you hid the "You Save" section. First, you will need to modify the TR tag the "List Price" section is in by adding an ID and hiding it with the style attribute. So your HTML will look like this-



Then the JavaScript needs to be updated to display the "List Price" section when the value is greater than zero. The modified code would look like this-

Now nothing disappears. Yikes!

I mean that "List Price: $ XX" doesn't disappear from Product Details page.

Ryan,

I've been tryng to implement the "You save" script without any luck. I'm certain that I've updated the corrected APD script as well as added the Javascript - I can see the code in a live page. But nothing happens. Any idea why?

see this page as an example

thanks,

Sal

I wish I were better at html, but I'm not. After a few tries, I got the "you save" function to work.

This is my java script , and below is the function code. hope it helps. It not, maybe one of the techs will jump in.

<script language="javascript" type="text/javascript">
var othersPrice = parseFloat(document.getElementById("OthersPrice").innerHTML.replace('$', ''));
var productPrice = parseFloat(document.getElementById("strRealPrice").innerHTML.replace('$', ''));

if (!isNaN(othersPrice) && !isNaN(productPrice))
{
var youSave = othersPrice - productPrice;

if (!isNaN(youSave) && youSave > 0)
{
var youSaveSpan = document.getElementById("YouSave");

youSaveSpan.innerHTML = '$' + youSave.toFixed(2) + ' (' + (youSave / othersPrice * 100).toFixed(0) + '%)';
document.getElementById("YouSaveRow").style.display = "";
}
}
</script>



<% DRAWPRODUCTPRICE %></span></b></td> </tr>
<tr id="YouSaveRow" style="display:none;" > <td> <b>You Save:&nbsp; <span id="YouSave" style="color:#0000FF"></span></b>

Bama,

Glad to here you got it, would love to see it but your site is under construction. As well, we would possibly be interested in using this, but I believe it requires APD. We are going to wait for this to come out of Beta before we go with APD.