Adobe’s Business Catalyst – Part 1

0 , , , , Permalink

Over the last week, I have been working with Business Catalyst, Adobe’s all-in-one solution for building and managing business websites. I was approached by the project manager last Monday, with a couple PSDs and asked to build them out using ABC. I started by quickly clicking around in the program, and watching a couple short intro tutorials to understand how sites come together. I decided my best bet would be to first build a prototype of the site. This was the easy part.

Based on an article I read on Sitepoint, I knew I should then cut up my code into templates and content holders (one of many modules). There have been a number of discussions on the BC forum related to the Dynamic Menu module, where some people have said that the menu doesn’t do what they want and thus it’s easier to create your own. I decided to give the Dynamic Menu a shot. If I have to use the system, I may as well try embracing it. There was a lot of testing involved as the first attempt at having the system create my menu produced a table-based menu. Sorry, not interested in tables when I know how to build a navigation using CSS. I scrapped the “default” option for creation and chose “CSS (HTML only)”. This option allowed me to style and add my own functionality while the system pulled and linked up the pages. Oh, and it spits out the menu as a list, not a table. This option worked well for me, but one of the issues I do have with Dynamic Menus is that it’s time consuming to organize your pages for the menu. I would prefer if we could drag and drop the pages into the order we would like to display the pages instead of having to right-mouse-click on each individual page to move it up or down one page at a time. I stuck this completed module into my template using the menu tag ({module_menu}). Oh, another beef I have with BC is that the default editing view is visual instead of HTML.

The next step was implementing the content. The design was split nicely into two columns so I decided to create two content holders (another module) so that text could be easily changed and inserted into the actual page, using the content-holder tags. Things were moving along nicely until I had to build out some additional sidebars, which would make use of the blog module and the web apps module. I came to realize that BC does not allow you to build modules within modules. This meant that based on the design I was given, I would have to build out the various modules for the left column, and include the surrounding HTML structure straight into the page, without the use of a content holder. I was able to make use of the content holder for the right column. This hasn’t posed as a huge problem for this project.

In playing with the blog module (listing posts in a sidebar), I discovered more limitations. Display of the date should be fairly easy to format in most cases, but not so in BC. They have made some strides by providing some options for formatting the date format, but it is still very limited and requires the use of JavaScript. Blog post listings will only display dates as dd-mm-yyyy whereas the designer has specified a US format, month dd, yyyy. I found code through the forum to re-format, but the person that provided the code ignored two things:

  1. Did not deal with the fact that the default publish date of the first post item shows us as time (i.e. 5 hours ago)
  2. Certain functions used did not work in IE

So, with a little bit of help, the code has been modified so that anything posted the day of, displays the correct date in US format. This fixed the issue in Firefox, Safari and Chrome, but IE was ignoring the function call. Why? IE is unable to understand datePreText = $(this).text().trim();. Through some research, I ended up changing the code to datePreText = $.trim( $(this).text() ); which I guess uses jQuery’s trim function, which seems to play with IE. I thought this was the end of the problems, but IE was still spitting out errors. It was getting stuck on Month = monthMap.indexOf(monthCompact) + 1;. Why? IE doesn’t like IndexOf for arrays, of course! My understanding is that indexOf method is not defined for arrays in IE so we need to use the JavaScript prototype function to create it. This is the code snippet I found, which solved the problem:
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i
More on page redirects to follow. Gotta get dinner started first.

Comments are closed.