Base JavaScript versus jQuery example – Driving a DOM selector

One of the things a good web programmer should be able to do is write code using multiple libraries. In this case I have created two snippets that show how to select an HTML on a page using both bare-bones JavaScript and its corollary in jQuery.

The basic flow is:

MouseEnter Listener -> Modify border -> Click Listener -> Call Function

MouseOut Listener -> Restore border

This gives you an interface where you can then select a DOM element right from the web page. It would look like this:

web-selection

Here are the two different implementations, you can see why I love jQuery, its brevity is breathtaking. The biggest difference is the selector API in jQuery that does the loop processing for you.

Base JavaScript

var all_1_Links = document.getElementsByTagName('div');
for (var i = 0; i < all_1_Links.length; i++) {
    var elm = all_1_Links[i];
    elm.addEventListener('mouseenter', function() {
        this.addEventListener('click', clickListener, true);
        this.style.oldborder = this.style.border;
        this.style.border = 'thin solid red';
    });
    elm.addEventListener('mouseout', function() {
        this.style.border = this.style.oldborder;
    });
}

 

jQuery Version

$("div").mouseenter(function(e) {
    e.target.oldborder = e.target.style.border;
    $(e.target).css("border", "thin solid red"); 
    $(e.target).click(clickListener); 
}); 
$("div").mouseout(function(e) { 
    $(e.target).css("border", e.target.style.oldborder); 
    $(e.target).off("click"); 
});

 

Short URL: http://bit.ly/1dz0rft

Did you know about the Adobe Experience Manager to IBM WebSphere Commerce Connector?

Have you seen this cool new connector for Adobe Experience Manager and IBM WebSphere Commerce? Click the picture below to see more.1400693369262

Short URL: http://bit.ly/1f0EVRW

Finding every possible combination of array entries from multiple lists with unknown bounds in Java

I am sure this post will resonate with pretty much any developer that reads it. Have you ever had a problem where you had to really step back and think about for a long time? A problem where the wealth of the internet helps a little but just isn’t what you were looking for? One big problem is I had recursion on my brain and I was convinced for a long time recursion would be needed. Seeing many similar problems solved with recursion I thought it was the way to go.. “Much to learn you still have…my old padawan.” – Yoda.

A long time for me is hours or even days. Usually I have some level of experience in the past that helps me quickly figure out coding tasks. Well for some reason this thing got me thinking for almost an entire day. And when I say entire day I mean I still do other things but its embedded in the back of my brain. I had my notebook with me the entire day drawing out boxes, arrows, and visualizing walking through loops. It wasn’t until later that night when I realized what I had to do. This was that kind of problem.

Head shots thoughtful, thinking, finding solution man

Continue reading

Short URL: http://bit.ly/1T70z6C

Eclipse and SWT to the rescue

For the past week or so I have been able to do some Eclipse and SWT programming. I have a tool here for technical sellers written in Java and what has been requested for a couple of years is a front end UI to that tool. One thing that really stuck out was the Window Builder and the information on the internet. You see, when I started Eclipse development it was very new. Unless you knew where to look it was often difficult to find answers or great examples. Almost 13 years later and its a very different story.

window_builderFirst off, Window Builder is amazing, it works, and the amount of functionality in it is very impressive. I remember early on with was pretty bug ridden and we ended up coding by hand. Now, you can do all kinds of really cool things right in the user interface. I was able to completely use the WindowBuilder editor for all of my windows and dialogs – piece of cake! I especially like the Menu and Table editors – makes creating these things a snap.

Next, I have to mention the internet, StackOverFlow, and all of the blogs and articles out there. It seems no matter what I search for someone has written about it or asked about it. Great job Eclipse Community!.

Short URL: http://bit.ly/1FCkH6m

Learn about Smarter Loyalty for IBM Commerce

The team over at Exchange Solutions have really out done themselves this time. Their Smarter Loyalty plugins for WebSphere Commerce are clean and easy to use. They have created seven easy to use widgets that can be placed on page templates for use throughout your store. These widgets deliver a personalized experience to  your shoppers and your loyalty program.

Smarter Loyalty

Check out the video to learn more about Smarter Loyalty (or click here to see the full-page).

Short URL: http://bit.ly/1Pv9Aaq

Two cool product integrations I saw at Amplify

Hand Holding Small We Love Customer SignageWe had an amazing time at Amplify this year. The IBM Commerce Showcase was pretty busy despite the poor location of the solution center room. We captured some great analytics for the demo use; where customers could use the IBM Commerce tooling live on the big screens. But enough about showcase, today I am writing about two very slick-looking solutions that can easily integrate with your WebSphere Commerce sites.

The first one is from Exchange Solutions, I watched a really nice demonstration of their loyalty package called Smarter Loyalty that plugs into WebSphere Commerce. This is honestly one of the most feature rich loyalty systems I have seen to date. With tight integration with the purchasing process on the site you can not only gain points for doing activity on the site but use the loyalty points as “cash” to pay for products. It also comes with a very nice individualized incentive program – which once I returned home I started searching around for more information. Check out this article on loyalty360.org which describes how it works.

The second one is from Powerfront, Asia-Pacific CEO, Michael Browitt, gave me a quick demonstration of their live support/chat feature. I saw a very slick virtual store front user interface which was a 3D layout of an online e-commerce store, showing different person icons browsing different categories on the site.  Clicking on a person gives you all kinds of statistics and  you can even start an online chat request with the customer.

There will be more to follow and possibly a demonstration on these two partners, stay tuned.

Short URL: http://bit.ly/1eaT0f7

Get hands-on at Amplify!

This year we will have some hands on tutorials which take anywhere from 3-6 minutes to complete at Amplify. Check out below some of the cool features you can play with live in the IBM Commerce tooling. Some key things you will be able to try:

  • Commerce Composer – adding marketing content to a page and creating new layouts
  • Search Rules – control which products rank higher in search results
  • Merchadising attributes – hidden attributes that can be used in precision marketing
  • Mixing advertisements with product results
  • Promotions and Promotion codes
  • Dynamic categories – categories based on attribute values

Make sure you schedule some time in San Diego to play with the IBM Commerce tooling!

Showcase hours are:

Monday – 6:30 – 7:30 pm
Tuesday – 9:30 am – 7:30pm
Wednesday – 9:30 am – 7:30 pm

Not registered for Amplify, register today here!

IBM Showcase

Short URL: http://bit.ly/1IsGEdN

Responsive and Adaptive Web Sites win!

blog.balfes.netIn the past, companies were faced with two primary models for a web site design:

  1. Responsive or Adaptive design with a single source
  2. A separate “m.” sub domain for the mobile version of the site

As Google promised back in February, a site with a mobile design will have priority in the Google search result index. So if you went down the m.domain.com route you may be losing search results ranking according to Google. Check out your site URL to see if your site is “mobile friendly” using the Google Mobile-Friendly Test.

The WebSphere Commerce starter store “Aurora” is built on a responsive design framework similar to bootstrap. Basing your eCommerce store code on the Aurora template means you will be mobile friendly right out of the gate!

responsive

If you recall, one of my previous posts about SNOW you will also realize that just being mobile friendly with an adaptive or responsive approach is not the entire picture. SNOW gives your site the ability to send properly sized images for the devices hitting your site. This is not only a screen real estate problem being solved but a bandwidth problem. Smaller resolution images also mean faster connections when going over 3G, 4G, or LTE.

Is your site mobile friendly?

Short URL: http://bit.ly/1da6eZ4

Should out of stock be the end game for the shopper?

out of stock

With today’s order management solutions and insight into inventory and warehouse management it still surprises me that stores don’t have a way for a shopper to order out of stock items. Instead of just preventing the order from happening why not offer an email or SMS alert when the item becomes in stock?

I purchase many different kinds of consumables and some of them are very hard to come by because of demand. I can order some things online and have them shipped to me or to the store (depending on shipping rules for New York) but many times the web site doesn’t list the item when it’s out of stock. So instead, I have to wait for a newspaper or flyer from the store and show up at 8:30am on the day of the sale to buy the item – and hope the line in front of me is not too big.

Imagine if you had a way to be notified when an item becomes in stock right from the store front. Or, even better, be able to order the out of stock item with a ship date well into the future. I am not saying this would really work for all products but we all know hot items sell out fast and being able to be notified when it is in stock would go a long way in my opinion.

Screen Shot 2015-03-26 at 12.04.11 PM

Lastly, eCommerce systems would have to do two things to make this work:

  1. The first thing is to show items that are not in stock. Many eCommerce systems hide items under certain inventory levels, in order for this to work you need to at least have the products in the catalog regardless of inventory.
  2. You will also need a notification mechanism that has visibility into your inventory. The system should handle (by user profile) how to notify the customer. If they signed up for email or SMS notifications, or if they are a mobile user a rich notification in the store front mobile app.

If you know an online site that allows this today comment here, I am always interested in seeing how companies carry out features like this.

Short URL: http://bit.ly/1M58WhW

Image optimization delivery with Trilibis SNOW IO

multiple-devices-snow-io

Optimized image delivery has been around for a long time and one open source technology that has provided this to thousands of sites in WordPress is ImageMagick. I have been a huge fan of ImageMagick because it’s so darn simple and straightforward.

Trilibis, a certified IBM Commerce partner has a WebSphere Commerce extension (SNOW IO) that brings image optimization delivery to this extensible platform. The way it works is you install the ImageMagick software on your server and configure it to point to where your images are stored on the server. You then configure a job to run frequently (hourly, daily, weekly) to resize images stored in that directory. The default setup will create three versions of your images – Desktop, Tablet, and Phone sized images.

Check out my video below where I show how I configured SNOW IO to work with the out of the box Aurora starter store in WebSphere Commerce.

 

 

Short URL: http://bit.ly/1BmZECO

3 new videos about IBM Commerce!

You may have missed this but three videos were published last month by IBM Think Academy covering three different topics in the IBM Commerce space: Insights, Personalization, and Fulfillment.

Short URL: http://bit.ly/1wZpvFs

Big Win for CoreMedia LiveContext

content_logo_coremedia_gr_1spalteRegular readers of my blog know that I’m a fan of CoreMedia and the impressive content management integration that they have developed with WebSphere Commerce. They launched the product last year at the Smarter Commerce Global Summit in Tampa and have been hard at work developing enhancements and lining up customers.

I’m happy to announce that all of their work has really paid off. Their first joint WCS integration project officially went into production last November and I’ll tell you more about that in this blog soon.

On top of that, however, the company announced last week that retail giant, Office Depot, will deploy CoreMedia LiveContext (Office Depot press release) to enhance the customer shopping experience for officedepot.com. Based on the strength of the REST APIs that they developed with the WCS team, CoreMedia was able to integrate their technology with Office Depot’s homegrown e-Commerce system in less than a week.

This is not only big news for CoreMedia but for the retail e-commerce space in general. Since merging with OfficeMax back in 2013, Office Depot has  become one of the biggest players in Internet retailing with over $7 billion in web sales according to Internet Retailer. Given the high volume of online visitors that Office Depot supports as well as its large presence in the B2B space, this is a great validation of CoreMedia’s ability to operate in a very challenging enterprise environment. This is as challenging as it gets!!!

Given that the recently released WCS Release 7 Feature Pack 8 is designed to accelerate time-to-market for next generation B2B e-commerce, the timing of this announcement couldn’t be better. My sources tell me that CoreMedia has had Feature Pack 8 in their development environment since before its release last November and will be validated by IBM’s Labs in February.

The news around Office Depot – as well as the recent joint customer wins – will kick start some more well deserved attention for this solution.

Short URL: http://bit.ly/18Hgwxz

Stay up to date with the Commerce Validated Technology Partner Solutions Feed!

I got this feed URL passed on to me by a colleague and if you use an RSS or Atom feed reader then this is right up your alley. You can view the feed in your favorite reader or even subscribe to it with browsers like FireFox. You can also just view the partner page to see the list of partners and their solutions.

You will immediately see there are three new partners on board already this year:

partnerfeed

Short URL: http://bit.ly/1yIZXe8

Tip of the day: How effective is your tweet?

searchThere are a lot of tools out there that help you measure how effective a tweet is doing. Did you know Twitter added a nice analytic package for your tweets? Last year Twitter launched a new page where you can measure the effectiveness and engagement of your tweets. Here I present two options that can help you figure out how well your tweets are doing in your network.

The first option is the new Twitter activity page on the Twitter site itself. Just follow this link (https://analytics.twitter.com) to view your engagement levels. You can gauge three different categories: Tweets, Followers, and Twitter Cards. Here are some screen shots on what you can expect:

Continue reading

Short URL: http://bit.ly/1EeeZMx

Responsive design and WebSphere Commerce

In this video I show a free way to develop responsive design advertisements using a combination of Eclipse and inline editing with Chrome. I showed this technique last year in the post “Tip Of the Day: Modifying and saving CSS with Google Chrome” and now I combine it with managed files in WebSphere Commerce Management Center.

 

Short URL: http://bit.ly/1y5v0vQ