mini card code validation

[ruthann]

Hi,

I am re-doing my templates and I want them to be totally w3c compliant. Much as I would lke to make them xhtml I accept the fact that shopsite only writes html (take that as a request for the "wish list" please).

I copied the code from the instructions:

#### Mini Cart Summary Display ####

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- IF PAGE.LinkColor --]
[-- VAR.MiniCartTextColor PAGE.LinkColor --]
# [-- VAR.MiniCartBackgroundColor PAGE.BackgroundColor --]
[-- VAR.MiniCartBackgroundColor "transparent" --]
[-- ELSE --]
[-- VAR.MiniCartTextColor MORE_INFO.LinkColor --]
# [-- VAR.MiniCartBackgroundColor MORE_INFO.BackgroundColor --]
[-- VAR.MiniCartBackgroundColor "transparent" --]
[-- END_IF --]
[-- VAR.ShowCart "no" --]
[-- VAR.MiniCartColor "black" --]
[-- VAR.TextAlign "left" --]

#### DON'T CHANGE ANYTHING BELOW HERE ####

<script language="javascript">
var cookies=document.cookie; //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");
var cartvalues = "";
var linecount = 0;
var start1;
var end1;
var tmp;

// Start Output
document.write("<div style=\"color: [-- VAR.MiniCartTextColor --];");
document.write("background-color: [-- VAR.MiniCartBackgroundColor --];");
document.write("text-align: [-- VAR.TextAlign --];");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

[-- IF VAR.ShowCart "yes" --]
document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: [-- VAR.MiniCartTextColor --];");
document.write("\">");
document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\">");
document.write("</a> ");
[-- END_IF --]

document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: [-- VAR.MiniCartTextColor --];");
document.write("\">");
document.write("[-- STORE.SC_YourShoppingCart --]");
document.write("</a>");

if (start == -1) //No cart cookie
{
document.write("</div>\n");
}
else //cart cookie is present
{
start = cookies.indexOf("=", start) +1;
var end = cookies.indexOf(";", start);

if (end == -1)
{
end = cookies.length;
}

cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data

start = 0;
while ((start = cartvalues.indexOf("|", start)) != -1)
{
start++;
end = cartvalues.indexOf("|", start);
if (end != -1)
{
linecount++;

if (linecount == 2) // Total Quantity of Items
{
tmp = cartvalues.substring(start,end);
colon = tmp.indexOf(":", 0);
document.write("<br>[-- STORE.Contains --] <b>");
document.write(tmp.substring(colon+1,end - start));
document.write("</b>");
if ((tmp.substring(colon+1,end - start)) == 1 )
{
document.write(" [-- STORE.Item --]");
}
else
{
document.write(" [-- STORE.Items --]");
}
}

if (linecount == 3) // Product Subtotal
{
tmp = cartvalues.substring(start,end);
colon = tmp.indexOf(":", 0);
document.write("<br>[-- STORE.Subtotal --]: <b>");
document.write(tmp.substring(colon+1,end - start));
document.write("</b>");
}

start = end;
}
else
break;
}
} // end while loop

//close minicart HTML
document.write("</div>\n");
</script>


Now the validator has come up with a few errors. The first was that the line <script language="javascript"> didn't contain a type. Even though the instructions say don't make any changes below these lines I figured that adding <script language="javascript" type="javascript"> would be okay.

after that there are several lines with errors. The errors are as follows:

Line 186, column 23: end tag for "SCRIPT" omitted, but its declaration does not permit this

document.write("</div>\n");

Error end tag for element X which is not open



The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

* Line 182, column 19: end tag for element "A" which is not open

document.write("</a>");

* Line 244, column 8: end tag for element "SCRIPT" which is not open

</script>

* Line 247, column 5: end tag for element "DIV" which is not open

</div>

* Line 335, column 5: end tag for element "DIV" which is not open

</div>

In each case w3c suggests changing the code to be <\/div> instead of </div> --or whatever the tag is. I am very hesitant to add a \ into a script - I don't want to mess up the cart. Can anyone make a suggestion as to how to proceed? Thanks for your help!

[ruthann]

I take it back...changing
<script language="javascript"> to <script language="javascript" type="javascript"> caused the script to break down, so I need to address that error too.

Thanks for listening

Ruth

[loren_d_c]

Don't bother trying to run HTML code created in a JavaScript function through an HTML validator. It is not usually going to validate, because the order of the HTML tags that are actually printed by the browser is often going to depend on the path taken through the logic of the JavaScript function. For example, take some JavaScript like this:

Code: Select all

if somevar == "somevalue" {
    document.write("<div class='somevalue'>");
} else {
   document.write("<div class='someothervalue'>");
}
document.write("</div>");

To an HTML validator this is just going to look like '<div><div></div>', which would be invalid HTML because there is a missing </div>. But as you can see from the actual JavaScript code, only one opening div will really be written, depending on the JavaScript coding logic.

Bottom line, JavaScript may be included in HTML, but it is not HTML.

Especially for the purposes of an HTML validator when HTML tags are included in the JavaScript.

-Loren

[ruthann]

thanks, I guess I will have to live with the errors.

[BFChris]

Ruthann,

You can do some things to make it validate "better" if its an issue for you. (I like code that fully validates, but it's not always practical in a production environment, especially with more complex code.)

First, the "type" attribute should be "text/javascript", not just "javascript".

Adding the slashes <\/div> will work out just fine. I've done it in my cart code. The extra slash "comments out" the original slash (which is a special character), basically telling it to just write it as is and not interpret it as part of the coding.

[ruthann]

Thanks Chris, I knew what I had to do but I was hesitant to mess with the code for the script. I'm pretty good with html code. I can tweak javascript, but I don't write from scratch and messing with someone else's code intimidates me. That's what happens when you are self-taught, there are always gaps!

Clean code is important to me, whenever possible. You never know what errors will cascade down because of an error 50 lines above. And, since my business is small and my site is International, I have no way of checking every system and every browser!

Forums like this are a tremendous help and I greatly appreciate all the efforts of the participants. With all the bad press the web gets sometimes, it is nice to remember the shared communities that have developed, world-wide!