E-com DevBlog Spider-ball-vacuum

28Feb/080

Add dealers to freemotion

If you ever need to add dealers to freemotion you'll need to look at a file called dealers.js..."don't worry when the time comes, you'll know"

you shouldn't, but you may also need a file called dealerLocatorDisplay.jsp but only if you are adding a new province. Even though dealers.js doesn't show that all states are added, they are already in dealerLocatorDisplay.jsp (provinces are not all there) so you shouldn't have to touch dealerLocatorDisplay.jsp unless you are adding a province.

Print This Post Print This Post
27Feb/080

Limelight, the content cacher

No doubt you've run into this by now.  You just got an image from the design group and you placed it out on the live server.  You refresh the page, and boom, nothing happens.  Here's how to get around it.

  1. Log onto http://reports.llnw.com
  2. Use our log in name and password (aquire from confluence, ninja, ben, brandon, or me)
  3. click on the 'Tools' tab
  4. Click on "Add Request" (over on the far right of the screen)
  5. enter the full URL path into the 'URL' field (I'm a little hazy on leaving the images.sitename.com versus the 3w's)
  6. click "Submit Request"
  7. watch the screen load and wait 10-180 seconds.

It should update to the new URL path you threw in, go and check your site to make sure that your image change was successful.

Print This Post Print This Post
25Feb/080

Changing payment prices when lower than $25

On some sites, namely NordicTrack and Weider it is quite simple to change a payment price to lower than the minimum ($25) if that product already has a payment price lower than $25.

All you need to do is find the product in accelerator and go to the descriptive attributes, under the ICON tab look for the attribute with the "H" under "type" and then you can change the price in the Details tab.

Now if you have to add this ability to a product in either of the aforementioned sites it's not as simple as adding a descriptive attribute. It has something to do with modifying tables and changing helpcard logic, a lot of pish-posh that I don't currently have access to. But I leave this post simply because I wasted roughly 30 min. looking for a place to change the price in a properties table when it was in accelerator, and as frequently as I do it I'll likely forget by Tomorrow.

Edit: Actually the above paragraph is not true cuz I just logged into one of the sites and added some "H" attributes to a few products and it worked like a dream. So that Pish Posh above is just a bunch of Hocus Pocus someone fed me.

Print This Post Print This Post
22Feb/080

Table Style Training

Today we had a very good lesson on the correct way to style and set up good looking tables. Just as a quick recap, I'll post highlights from the html and css here, as well as the original audio from the training session (40ish minutes).
Here is an example of a table well thought out and coded correctly. Notice the use of classes to facilitate the css in controlling the visual flow of the table.

?View Code HTML4STRICT
<table class="standard-table" cellspacing="0">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
		<th>Column 4</th>
	</tr>
	<tr class="lightrow">
		<td width="60">Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
</table>

Also note, that WordPress absolutly destroys any layout and aligns everything to the left (argh!) Anyway, pressing on, here is a From Table, again well thought out and designed correctly.

?View Code HTML4STRICT
<table class="form-table" cellspacing="0">
	<tr>
		<td rowspan="2" class="description">Name:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description"> </td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">City:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">State:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">Zip Code:</td>
		<td><input type="text" value="" /></td>
	</tr>
</table>

Now if you find yourself wishing you could see the original files, well you can. Simply grab them from here. Also, if you happen to have your "Bulletproof Web Design" by Dan Cederholm handy you can flip to page 153 and start reading there.  I'd also post some css, but the post is getting rather lengthy as is so just grab the zip file to see the fully stylesheet.

And now the part you've been waiting for ...
The audio from the training.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Print This Post Print This Post
20Feb/080

JS Compressors

So Jason found that one of the compressed versions of prototype we were using was causing some function to not work. The prototype file in question had been shrinked using ShrinkSafe, which is based on Rhino, and is actually made by dojo (I figured since IBM has a dark-alliance with dojo, it'd work fairly well with Websphere. Needless to say, ShrinkSafe is well... crap. So here is what you should use instead.

*Now I didn't link to the jsmin or to YUI because they could be updated, and they are files you run locally on your box while /packer/ is a copy-paste web-util.

In my opinion YUI is the best, you can choose several different compression levels and it works very well compressing prototype, so well in fact that we got it to shrink down an extra 10k than what had been done with  ShrinkSafe.  Also the YUICompressor is semi-intelligent with whitespace, it checks for ascii characters before and after a piece of whitespace to know if it should remove it.

Print This Post Print This Post
19Feb/080

Form input=”checkbox” clearing

So it turns out that there is a fairly-easy way, and a wicked-easy way to handle almost things you come across. And if it feels like it's way to hard, I'm pretty sure it is. Needless to say we were on the NordicTrack site working on a form for the 'compare' feature, and we needed to clear all the check-boxes on the page whenever certain buttons are pressed (the 'bug' so that it would compare the two items listed in the series). We finally ended up with this nice little loop (lifted partially from a google code site)

var frm = document.selectionform;
var el = frm.elements
for(i=0;i<el.length;i++){
if(el[i].type == "checkbox"){
el[i].checked = false;
}
}

Now while this is super-great, I knew that it could be better done since we are incorporating Prototype into the project, but I couldn't remember the command that would make this better. Well, I just stumbled on to it. What we needed was a one liner.

Form.reset(formname)

That's it, that would have fixed the entire thing, no looping, no extra variables, just that line. Now if you use this in your own code elsewhere, remember that it erases everything from your form, not just check-boxes.

Print This Post Print This Post
18Feb/080

Using Accelerator Fields to set Images on Product Displays.

So you've got a marketing "genius" who would like to place variable images on various products throughout the website. This can be quite simply done with the use of a bean. You can use the "com.ibm.commerce.catalog.beans.ProductDataBean" to get the field information at the product level.

Simply declare your bean:
<wcbase:usebean id="product" classname="com.ibm.commerce.catalog.beans.ProductDataBean" scope="request"></wcbase:usebean>

Then wherever you need to access a field on the page you can call the bean and field like so:

<c:if test="${product.field4 == 'EXCLUSIVE'}">
<div><img src="<c:out value="${jspStoreImgDir}" />Exclusive.jpg" alt="Internet Exclusive" /></div>
</c:if>

Per the above example any product with the word "EXCLUSIVE" in field 4 will display the "Exclusive.jpg" image.

You can also use this logic in a choose statement and display different images.

e.g.

<c:choose>
<c:when test="${product.field4 == 'EXCLUSIVE'}">
<div><img src="<c:out value="${jspStoreImgDir}" />Exclusive.jpg" alt="Internet Exclusive" /></div>
</c:when>
<c:when test="${product.field4 == 'INTRODUCTORY OFFER'}">
<div><img src="<c:out value="${jspStoreImgDir}" />IntroOffer.jpg" alt="Introductory Offer" /></div>
</c:when>
<c:otherwise>
<div><img src="<c:out value="${jspStoreImgDir}" />Sale.jpg" alt="Sale" /></div>
</c:otherwise>
</c:choose>

Print This Post Print This Post
18Feb/080

Dirty Auto-Eval of Rational in 561

So your compy has gone lag-happy, and it's all because of the auto syntax-error-warning checker and it's driving you nuts. Well no longer! Simply crack open your window->preferences and then scroll down to "Web and XML Files" expand that to "JSP Files", and then click on "JSP Annotations". On this click on warnings (over to the left) and un-check the show in text. That should fix your problems... Now code in peace, and enjoy!

561 Windows Preferences

Print This Post Print This Post
15Feb/080

Ninja-Script — When all else fails

When all else fails, what do you do? You call a ninja, and when he shows up he gives you a piece of code, or knowledge. Now this knowledge came in the form of a scriptlet which I know we frown upon, but here it is, because it runs back and finds the parent category, and if it is there then we use the logic to place a change in the sidenav of NordicTrack.


<%@ include file="CatalogUtilities.jspf" %>

<%
try {

Integer storeIdInt = Integer.valueOf((String)pageContext.getAttribute("storeId"));
Long catalogId = Long.valueOf((String)pageContext.getAttribute("catalogId"));
java.util.LinkedList list = null;
String categoryId = (String)pageContext.getAttribute("categoryId");
if(categoryId != null && !categoryId.equals("")){
list = (java.util.LinkedList)getCatGrpHierarchyByCatalogIdAndCatGrpId(request, response, storeIdInt, catalogId, categoryId);
} else {
Long catEntryId = Long.valueOf((String)pageContext.getAttribute("productId"));
list = (java.util.LinkedList)getCatGrpHierarchyByCatalogIdAndCatEntryId(request, response, storeIdInt, catalogId, catEntryId);
}
pageContext.setAttribute("rootCategory", list.getFirst());
} catch (Exception e) {
e.printStackTrace();
}
%>

What this all did for us was allow us to see the actual root parent of the catalog.  So by finding that out we can then be as deep into the catalog as we want and still be able to write code that modifies something on the page based on if you are even in that category.  What we ended up doing was checking the root parent to find out if the CachedSideBar.jsp needed to be modified when displayed to customers.  It's all checked into CVS, so pull it down and take a look if you'd like.

Print This Post Print This Post
5Feb/080

JSTL to the rescue when your EJB S’plodes

Alright, so I tried using a nice wcbase: call to get the bean I wanted to I could grab the SKU, but that didn't work. Instead I ended up searching through some old IBM 561 docs until I found that I could pull an item number from catEntry. The main problem was that the number I pulled was exactly what I asked for, the item from the database (I wanted the SKU). I read a little more down the list and found that I could get the catEntry.partNumber which does give me the SKU, but it gives me the prd_ in front of it. So I checked with Mr. Google, and he showed me this site from ONJava.com that had some JSTL goodery. Most of the page was not important, but what was useful was the substringAfter command. Here are some JSTL goodies you can use in a pinch to fix a problem (and yes I realize this fix will NOT work on NordicTrack as we are incorporating apparel and that has tons of SKU's for clothing, and this fix actually does not fetch the actual SKU, but a close representation of it).

fn:substring(string, begin, end) | Returns a part of the string, starting from the begin index up to and including the end index.

fn:substringAfter(string, substring) | Returns the part of the string that follows the substring.

fn:substringBefore(string, substring) | Returns the part of the string that precedes the substring.

I ended up using the substringAfter like this --> SKU: <c:out value="${fn:substringAfter(catEntry.partNumber, 'prd_')}" /> so that I could get the prd number and then trim/substring off the prd_. I now need to go back and trim off the _21663 on a few NT products...

Print This Post Print This Post