Checkout Manager tip: Magic Replace

by Michael Whitaker on September 5, 2006

I have been asked quite a few times by merchants if there is a way to change the "Shipping" label to "Handling"
in the checkout pages. Maybe you offer free shipping, but charge a
handling fee. Or perhaps you want to use a "Shipping and Handling"
label. In those cases, just labeling those charges under the generic
"Shipping" label may not accurately reflect what you want your
customers to know.

Shippinglabel

Fortunately, the new Checkout Manager has a very structured layout that
allows us to use a little bit of JavaScript magic to rewrite the
"Shipping" label on the fly. Sorry, but if you don’t use Checkout
Manager you can’t use this code.

To implement this in your Yahoo! Store, copy the following code into the Footer section of the Checkout Manager:

Checkout Manager > Global Settings > Checkout Wrapper > Footer

<script type="text/javascript">
/* "monitus_magic_replace" function by Jean Le Clerc.
Copyright 2006 Monitus LLC. This work is licensed under the Creative
Commons Attribution 2.5 License. To view a copy of this license, visit
http://creativecommons.org/licenses/by/2.5/ or send a letter to
Creative Commons, 543 Howard Street, 5th Floor, San Francisco,
California, 94105, USA. */

function monitus_magic_replace(pReplaceValue, pOriginalValue) {
if(!pOriginalValue) pOriginalValue = ‘shipping’;
var vCartDiv = null;
if(document.getElementById) vCartDiv = document.getElementById
(‘ys_cart’);
else {if(document.all) vCartDiv = document.all['ys_cart'];
else if((navigator.appName.indexOf(‘Netscape’) != -1) && (parseInt
(navigator.appVersion) == 4)) {vCartDiv = document.layers['ys_cart']; }}
if(vCartDiv) {var vTable = vCartDiv.getElementsByTagName("table")[0];
if(vTable) {vSection = vTable.getElementsByTagName("tbody")[0];
vRows = vSection.getElementsByTagName("tr");
if(vRows) {var vRE = (typeof pOriginalValue == ‘string’) ? new RegExp
(pOriginalValue, ‘i’) : pOriginalValue;
for(var vLoop = 0; vLoop < vRows.length; vLoop++) {var vCols = vRows
[vLoop].getElementsByTagName("td");
if(vCols && (vCols.length >= 2)) {if(vCols[0].firstChild && vCols[0].firstChild.nodeValue && vRE.test(vCols
[0].firstChild.nodeValue)) vCols[0].firstChild.nodeValue = vCols
[0].firstChild.nodeValue.replace(vRE, pReplaceValue);}}}}}
}

// Customizable call
monitus_magic_replace("Shipping and Handling");
  </script>

Locate the line just before the closing </script> tag:

monitus_magic_replace("Shipping and Handling");

and
enter the desired text inside the quotes. Click on Save and then
Publish your Order Settings when you are done. Check your published
site to make sure everything looks good. Also, please note that this
code obviously won’t work if visitors have JavaScript turned off in
their browser; they will instead see "Shipping" as before.

Finally, this code
is licensed under a Creative
Commons Attribution 2.5 License
. This basically means that you can use this
code for free in any manner you see fit as long as you keep the attribution.

Have fun!

{ 3 comments… read them below or add one }

Norm Beauchesne March 5, 2007 at 12:28 pm

Michael – thanks for the java script. I’ve been asking how to include “handling” on our checkout pages for quite some time now, Yahoo finally referred me to your blog. It works great, with one exception. We now get a page error on the cart page.
Details of the error:
Line: 322
Char: 35
Error: Object required
Code: 0
I’m using IE 7.0.
Do you know of any fix?
Thanks,
Norm Beauchesne

Michael Whitaker March 5, 2007 at 12:57 pm

Thanks Norm;
We have updated the code above; it seems that IE is not quite standards compliant in this regard. Please copy and paste the new code and let me know if this works for you.

Norm Beauchesne March 5, 2007 at 1:52 pm

Micheal,
Thanks for the quick fix – it works great!

Leave a Comment

Previous post:

Next post: