Adobe Business Catalyst Developer

Require Minimum Order Amount or Product Quantities in an Adobe Business Catalyst Shopping Cart

Mon, 05 Dec 2011 01:55:00 GMT

Often a web site owner wants the shopping cart in Adobe Business Catalyst to require a shopper to purchase a minimum order amount, such as $25 or more per order. That's what my client wanted for www.PerkyMoose.com.

We can achieve this even though this feature isn't built into the current Version 2 of Adobe Business Catalyst by writing a little jQuery code plus using a trick or two. (Our method can alternatively require purchasing a minimum number of total products, rather than a dollar amount.)

Our solution is fairly easy to install in fifteen minutes once you know how, although truthfully we spent a whole day experimenting with various ways to get Business Catalyst to do what we needed. Given the BC shopping cart's quirks, all our normal programming ways didn't work, until we came up with the trick of hiding the real Business Catalyst generated checkout button and instead showing shoppers our own button to click.

When shoppers click our button, we can run our own code, not BC's code, to check the total order amount. If the order amount isn't OK, then our code displays a popup message. If the amount is OK, then our code behind-the-scenes clicks the hidden but real BC button.

How to Install in Business Catalyst

The first step is changing the Shopping Cart Layout in BC Admin-->More Customization Options-->
Online Shop Layouts. Click on the Shopping Cart Layout and open it in HTML view, so you can see the code.

Look for Business Catalyst's tag where the BC checkout button will be created when the shopping cart loads. The tag looks like this: {tag_buybutton}

To hide this, we're going to wrap it in a span tag, and after that, add our own <a tag to create our own button. We end up with our HTML looking like this:


<span style="display: none;">{tag_buybutton}</span><a id="ourbutton" href="#" onclick="checktotal()">Check Out</a>

What we're doing is giving the span a display:none style, so that will hide the button that Business Catalyst creates in place of tag_buybutton.

Then our <a tag creates our own link, which you will need to style as a button however you wish. For example, #ourbutton { background:#FF3300; padding:20px; text-decoration:none; font-size:18px; } would create a big, square red button. (Of course you can use an image instead, just put an <img between the <a tags.

In our button, we have href="#" because it won't link anywhere, instead, we have an onlick event so when the button is clicked it will run a script function we're about to create called checktotal().

But first, we have one more tweak in our HTML shopping cart layout to make. Find the <td table cell that is holding the amount that you want to use as the total order amount. BC has several amount tags, and you could use any one you need:

{tag_invoicetotal} is products+tax+shipping
{tag_productgrandtotal} is products+tax
{tag_productssubtotal} is products (no tax or shipping)

For the table cell holding that tag, you need to add an ID thetotal like this:

<td id="thetotal">{tag_invoicetotal}</td>

Now our code will know where to lookup the total.

Following is our simple jQuery/JavaScript that provides the magic by creating a function checktotal(). You place this script at the bottom of your Shopping Cart Layout in More Customization Options. To use this script, you must have jQuery running in your website, for details see Loading jQuery


<script type="text/javascript">
function checktotal() {
	var thetotal = parseFloat(jQuery('#thetotal').text().replace(/[^\d\.-]/g,''));
	if ( thetotal < 25 ) {
		alert("Total order must be $25 or more. Please add products.");
		} 
		else {
			jQuery('#catshopbuy').click();
			}
	}
</script>

How the jQuery/JavaScript Works

Line 4 stores the current total amount of products in the shopping cart into a variable called thetotal.

Line 4 is complex since it's doing several things, so let's break it down piece by piece...

The code with jQuery('#thetotal').text() looks in the shopping cart page for an ID = thetotal and reads the text in that td table cell.
But we need to convert text like $12.95 into a number, not text, so first we strip out all characters that aren't numbers or a period (like the $) with the .replace(/[^\d\.-]/g,'') regular expression.
Last we convert the remaining text into a number with parseFloat.
We end up with 12.95 as a number stored our thetotal variable.

In line 5, if thetotal is less than 25 dollars, then we popup an alert window with the message, "Total order must be $25 or more. Please add products."

If thetotal is 25 dollars or more then we use jQuery to find the element with ID = catshopbuy which is the ID that Business Catalyst always puts on its Check Out button. Then our jQuery .click() function clicks the hidden BC button, just as if the user had seen it and clicked it. BC's normal checkout code then runs, to make sure the shipping options etc. are correct, before taking the user to the checkout page.

We tried many other ways to accomplish this, but kept running into quirks due to the way that BC's own code works. This by far is the simplest method to install.

Requiring a Minimum Number of Products

The same idea can be used to require a minimum number of products that a customer must buy. For instance, in an online wine shop, if a customer must order 6 bottles of wine, but can mix and match different wines to reach that minimum, then BC has no built in way to do that, since it can only enforce minimum quantities per product, not across the whole order. To accomplish this with the script above, you just assign an ID thetotal to the table cell holding {tag_totalunits} which has the total quantity of products ordered.

Automatically Format Images with jQuery - Add Margins, Borders, More

Sun, 30 Oct 2011 14:19:00 GMT

This article shows how to automate the formatting of images in the articles your clients write in a content management system, like Adobe Business Catalyst.

A problem is helping clients learn how to format images they place into their articles. It's tricky for them to remember to do the little things, like adding the proper margin on the left of an image that is floated to the right of the text, so the text doesn't run into the image. Of course, images floated to the right need different styling and margins than images floated to the left.

A solution is to add some simple jQuery code so images are automatically formatted the way the web designer desires, without the client needing to remember anything except to place the image to the right or left of text. Here's how...

Step 1: CSS to Style Image Margins and More

The first step is to create CSS style sheet definitions to say how you want images formatted. What we usually do is create two, one for left images and one for right. These definitions can include any CSS you wish to apply, but in our case we're just setting the margins and borders....


.imgleft {
     margin:10px 20px 10px 0;
     border:none;
}
.imgright {
     margin:10px 0 10px 10px;
     border:none;
}

In imgleft we are setting a 20px margin to the right of the image to separate it from text. In imgright we set it to the left.

Step 2: Automatically Apply Styles to Images with jQuery

Now we create a simple jQuery script that will automatically assign the CSS classes we created to images.


<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").each(function (i) {
  if (jQuery(this).css('float') === 'left') { jQuery(this).addClass('imgleft'); }
  if (jQuery(this).css('float') === 'right') { jQuery(this).addClass('imgright'); }
});
});
</script>

Here's how this works...

Line 3 is the standard jQuery function that doesn't run the script until the document is ready (the web page has loaded in the browser.)

In Line 4 has jQuery searching for every <img> but only within a <div> with ID #content. We limit the search because we don't want to reformat images in the header, sidebar, footer, etc. but only those within the main content areas in our site. Change #content to whatever ID contains your page or blog articles. The jQuery each function makes it study each image within that ID.

In line 5 the jQuery checks if the writer assigned this image to float to the left of text, and if so, then the jQuery adds the CSS class .imgleft to the image. Line 6 checks for float right.

This script is usually inserted before the </body> in the template(s) used by all your web pages or blogs. Of course, since it uses jQuery your site must also load jQuery. See Loading jQuery.

Loading jQuery - Loading Latest jQuery - Test If jQuery Loaded

Sat, 22 Oct 2011 17:37:00 GMT

Below we explain several ways to install jQuery on your website:

Have your web page load the latest version from a CDN (content delivery network) like jQuery.com
Download the latest jQuery file, copy it to your web server, and load it locally.

Is jQuery Loaded On Your Site Already?

If you are using software like WordPress, or a content management system or development platform, or even a design template or theme you purchased, there's a good chance it already is loading jQuery because it is using it. You only need to load jQuery once so it's wise to create a test page to see if jQuery is already loaded. In the test page paste this script, then view the page in your browser. A popup message will tell you if you already have jQuery loaded or not.


<script type="text/javascript">
if (typeof jQuery == 'undefined') {  
    alert('jQuery is not loaded')  
} else {
    alert('jQuery is already loaded')
}
</script>

Loading Latest jQuery from jQuery.com

The following loads the latest version of jQuery from jQuery.com when you place this in your web page <head>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>

An advantage to loading this way is your web visitors may already have visited another site that loaded jQuery this way, in which case their browser will immediately use the copy already on their PC instead of wasting time downloading the file if you host it on your web site. This means your site loads faster.

Loading jQuery from Your Web Server

You can download jQuery here: jQuery.com.

Place the file in a folder on your own web server such as within /js and then include a load command in your web page <head> with a path to your copy:


<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>

Loading jQuery Only If It's Not Already Loaded

Here's a clever way to automatically load jQuery only if it isn't already loaded. I use this when distributing software or design themes and I won't know if jQuery already exists or not. This version will load the latest version if there is no version of jQuery already running...


<script type="text/javascript"> if (window.jQuery == undefined) document.write( unescape('%3Cscript src="/js/jquery-1.6.4.min.js" type="text/javascript"%3E%3C/script%3E') );</script>

Use JavaScript Galleria Slideshow to Display an Adobe Business Catalyst Photo Gallery using jQuery

Sat, 22 Oct 2011 18:22:00 GMT

View The Demo Gallery Slide Show

The demo shows one way to use our free BC-PhotoGallery plugin that connects Business Catalyst to Galleria, a wonderful and free image gallery created by Aino. Another example is on the home page of this BC site for Galen Medical Billing.

There are several ways to install Galleria in Business Catalyst:

Feed images setup in the BC Photo Gallery.
Insert images defined in a BC Content Holder.
Create a Web App to setup the images the gallery uses.

This tutorial will first discuss how to use Galleria with a BC Photo Gallery, because some of my clients are on the BC Business Plan and do not have Web Apps available. At the end of the article we'll show how Content Holders or Web Apps can be used instead.

Using the BC Photo Gallery with Galleria

With Galleria you can turn a BC Photo Gallery into an animated slide show complete with titles over or above photos, photo descriptions, and links so clicking photos takes you to another web page. This lets you create a home page slider to promote featured content -- clicking a photo will take your visitor to an article. Galleria is also a nice way to display new products or sales points.

By linking Galleria to the Business Catalyst Photo Gallery, your client can easily change the photos and messages/links using the BC Admin -- no need to tinker with HTML code.

Our tutorial provides you with jQuery code that can read the XML file that the BC Photo Gallery creates to define the images, headlines, photo descriptions and links that the Galleria Gallery will display.

You can change the size, position, and style of the captions and thumbnails, and display or hide the thumbnails or titles or descriptions, if you modify the included CSS file in the BC-PhotoGallery Galleria Theme we provide. Some tips are given below.

Let's get started...

Step 1: Create a Business Catalyst Photo Gallery

Download Our Zip File of Galleria for BC
From within the Zip file extract the Galleria folder and copy it to the root folder of your BC server using an FTP program or Dreamweaver.
In Business Catalyst Admin use the File Manager or FTP or Dreamweaver to create a folder that will store your gallery images. Then upload the images into that folder. Every image in this folder will appear in the slide show, so don't put extras here.
In BC Admin click Modules --> Photo Galleries --> Create New Photo Gallery
In Name enter your gallery name. This doesn't appear online, only in BC Admin.
In Images Folder choose the folder name you created above to hold your images.
Click Next
One by one highlight each photo in the left box. In the description field for each photo, you can optionally enter a title headline, a description sentence, and/or a link. Since BC provides only one description box, we have to put all these in that one box, so we separate them by use a ^ delimiter like this:
- Your Title^A description sentence.^/link-to-page.htm
Our jQuery code will split apart these items at the ^ mark. You can leave out the title, or description, or link but you must still include the ^ in place so the code knows where to delimit the info. Here are examples:
- Your Title^^/link-to-page.htm
- Your Title^Description sentence.
- ^^/link-to-page.htm
You can leave the Photo Gallery Description empty if you only want images and no titles, sentences or links. No ^ marks are needed.
When done in right column click Generate XML File.
If you add a new photo or delete a photo in the gallery folder, you must return to Generate XML File. The current XML file version tells Galleria which photos and descriptions to use.

Step 2: Install Galleria Gallery on a Web Page

To display a Galleria Gallery on the web page all you do is add one line of HTML to create a DIV to hold the slide show plus load two scripts.

How It Works: The script looks in a BC Photo Gallery folder on the server for an XML file that describes the photos and their titles/captions. It then adds new HTML for those images into your page inside a DIV where you want the slide show to appear, the loads Galleria which turns that new HTML into the gallery.

Here's how to install it on your web site...

Create a blank page in Business Catalyst. In the BC editor switch to HTML View and paste in the following code. HINT: Hover the code box below and in upper right click COPY to put this code on your clipboard, then paste into BC. (This code is also included in a file within the Download Zip File above.) Save and publish your BC page.


<div id="bc-photogallery-1" style="position: relative;"></div>
<script src="/galleria/galleria-1.2.5.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(function(){
		jQuery.ajax({
			type: "GET",
			url: "/galleria/bc-galleria-images-1/PhotoGallery.xml", // set to path to BC photo gallery
			dataType: "xml",
			success: function(xml) {
				var location = '/galleria/bc-galleria-images-1/'; // set to path to BC photo gallery
				jQuery(xml).find('img').each(function() {
					// step through xml file and add image info into the web page
					var myurl = jQuery(this).attr('src');
					var mystuff = jQuery(this).attr('alt').split("^");
					var myinfo = "";
					if ( mystuff.hasOwnProperty("0") ) { myinfo = myinfo + ' title="' + mystuff[0] + '"'; }
					if ( mystuff.hasOwnProperty("1") ) { myinfo = myinfo + ' alt="' + mystuff[1] + '"'; }
					if ( mystuff.hasOwnProperty("2") ) { myinfo = myinfo + ' longdesc="' + mystuff[2] + '"'; }
					var myimg = '<img class="bc-gallery-image" src="'+location+''+myurl+'" '+myinfo+ '" />';
					jQuery('#bc-photogallery-1').append(myimg); // set to your div containing galleria
					});
					// load Galleria slideshow theme and start the show
					Galleria.loadTheme('/galleria/themes/bc-photogallery/galleria.bc-photogallery.js'); // set to your theme
					jQuery('#bc-photogallery-1').galleria({ // set to your div containing galleria
						height: 560, // set to height of slide + height of thumbnails (default 50px)
						image_crop: true,
						carousel: true,
						carousel_speed: 2000,
						autoplay: true,
						thumbnails: true,
						showInfo: true,
						transition: 'fade',
						transition_speed: 600
						});
			}
		});
	});
}); 
</script>

In addition to this code, you must also have jQuery installed on your web site. You can read my article on Loading jQuery.
Line 2 is the single line of HTML needed on a page to create a Galleria Gallery. Our code is looking for a DIV on the page with ID #bc-photogallery-1 and will insert the new gallery HTML into that DIV. (Note: You can have more than one gallery on page by creating a second DIV with a different ID and providing a second script that loads different images into the second DIV.
In line 27 change the height of the #bc-photogallery-1 container to the pixel height of the tallest photo in your gallery, plus add 50px. 50px is the default thumbnail height defined in /galleria/themes/bc-photogallery/galleria.bc-photogallery.css unless you change thumbnail size there. In our demo we set the height at 560 because we had images that are 510 px tall plus the 50px thumbnails. (Note: if the height isn't defined or too small the gallery may not appear.)
In line 9 change the file URL to your domain and the folder where you installed your images. Leave PhotoGallery.xml as the file name because BC always creates that file when you click Generate XML File in the BC Photo Gallery admin.
You can adjust carousel_speed in line 30. Numbers are milliseconds so 4000 means display a slide for 4 seconds.
If you make thumbnails: false in line 32 then they will not display, and you can remove the extra 50px from the gallery height. You can also hide thumbnails by adding a display:none in the CSS file.
There are other optional parameters you can add as described in documentation on the Galleria site.

Style and Position the Gallery Titles, Slide Sizes, Etc.

The appearance of the Galleria Gallery is controlled by editing a CSS file: /galleria/themes/bc-photogallery/galleria.bc-photogallery.css

Some ideas about the items you can change to suit your design...

.galleria-container: change background color surrounding the image (on my demo it is set to none so transparent.).
.galleria-stage: this is the slide area within the .galleria-container. You can adjust margins to make the stage the same size as the container, so there is no border areas around the slides.
.galleria-info: this contains the title and description. The info normally displays in the top left corner so setting in CSS top:200px moves it down over the slide. You can adjust left: from 0 to move the title right, or delete left: and make it right:0 to align to right of slide. The width default is 50% of the width of the slide, adjust as needed including up to 100% if the info is displayed above or below the images.
.galleria-info-text: the container around the title and description - change the text background color or use a semi-transparent .PNG
.galleria-info-title: change the title's color or font size or font family.
.galleria-info-description: change the description's color or font size/family.
.galleria-thumbnails-container: adjust the position of the thumbnails.
.galleria-thumbnails .galleria-image: adjust thumbnail size. Thumbnails are automatically created by JavaScript from the full-size images.

Animating Titles/Captions

A developer is asking if the caption can be animated to slide out or down. It can by adding a little more jQuery to the script. I'll work on showing how to do that in a later revision to this article.

Using A Business Catalyst Content Holder with Galleria

In some projects we use a Business Catalyst Content Holder to define the images we want Galleria to use. This is a simpler approach to install, but requires the client to be extra careful when adding info in the content holder. The problem is BC has a friendly UI that lets you easily add a longer description and link to an image, but to add a Title your client will need to switch to HTML view in the content holder and type in some text.

For Galleria to work it needs HTML markup on the page that looks like this:


<div id="bc-photo-gallery-1">
    <img src="/images/pic1.jpg" alt="My longer description sentence." title="My title" longdesc="http://www.some-website-to-view-when-image-is-clicked.com">
    <img src="/images/pic2.jpg" alt="Another description" title="Another title" longdesc="/some-bc-page-seen-when-image-clicked.htm">
</div>

We put the <img tags inside our content holder, and on the page where we wish the Galleria Gallery to appear we'll put a BC Module tag to insert the content holder within a DIV. Here's step by step...

In BC Admin in the upper right toolbar click on Admin --> Manage Content Holders.
Create a new content holder and name it.
In the Content Holder Content box use the Image button on the editor toolbar to insert an image. Continue inserting more images in the order you wish them to appear, without adding a blank space or line break after each image.
To add the Title and Description, you can right click on a photo to select it and choose Properties from the popup.
In the Alt Text box you enter the longer description sentence for the image.
In the Long Description box you enter an optional URL link, so when the image in the slide show is clicked your user will go to another page on your site like /some-page.htm or an external website like http://www.AtlantaWebDesignGA.com
To add a Title unfortunately the BC UI has no method, so close the properties box, then at bottom of Content Holder click on HTML view. Inside the IMG tag for each photo, add: Title = "My title." You could of course manually enter the Description this way as an ALT attribute, and the URL link as a LONGDESC attribute, so your end result looks like the HTML markup above.
Save the content holder.
On the page where you Galleria Gallery will appear, you'll add a DIV and in it use the BC Add Modules button to add module tag that will insert the HTML in the content holder into this page. When you are done your markup will look like this, with the number being your own Content Holder's ID.
```
<div id="bc-photo-gallery-1">
{ module_contentholder,1234}
</div>
```

The next step is adding the code to make Galleria work. Download the Zip File using the button atop this article and copy the Galleria folder in the zip file to the root of your BC Server. Then on the bottom of your Gallery page before the </body you need to add a script like this:


<script src="/galleria/galleria-1.2.5.js"></script>
<script>
jQuery(document).ready(function(){
  // load Galleria slideshow theme and start the show
	Galleria.loadTheme('/galleria/themes/bc-photogallery/galleria.bc-photogallery.js'); // set to your theme
	jQuery('#bc-photogallery-1').galleria({ // set to your div containing galleria
		height: 560, // set to height of slide + height of thumbnails (default 50px)
		image_crop: true,
		carousel: true,
		carousel_speed: 2000,
		autoplay: true,
		thumbnails: true,
		showInfo: true,
		transition: 'fade',
		transition_speed: 600
		});
}); 
</script>

Galleria needs to know the width of the gallery in pixels or it will not start. It usually can determine the height automatically, although you can specify one if you wish. You can add additional parameters as described on the Galleria site on the Galleria Options Page.

Remember you also need to load jQuery on your website if it is not already installed. See Loading jQuery.

Using a Business Catalyst Web App with a Galleria Gallery

If you have the Business Catalyst Pro Plan then you can use a Web App to control which slides display in your Galleria Gallery.

Your client will be entering images as new Web App Items in Modules --> Web Apps --> Add a new Web App Item. On your Galleria Gallery page, you'll insert a BC Module to list the web app items (images) within your HTML markup.

Here's how to set this up...

In BC Admin click Modules --> Web Apps then click Build a New Web App
Give the Web App a Name. Your users don't see this, it's just for Admin.
At bottom click Next.
Now on the Custom Fields screen we'll create some custom fields. We'll explain these later when we create our first web app item.
On the Custom Fields screen in Field Name enter Select Image, in Field Type select Image, check the mandatory box, and click Save Field.
Click New Field and for Field Name enter Copy Image URL, in Field Type select Text (String), check the mandatory box, and click Save Field.
Click New Field and for Field Name enter Image Title, in Field Type select Text (String), and click Save Field.
Click New Field and for Field Name enter Image Description, in Field Type select Text (String) or Text (Multi-line) if you need very long descriptions, and click Save Field.
Click New Field and for Field Name enter Image Link, in Field Type select Text (String) and click Save Field. (Don't choose type Hyperlink, we need our link to be text.)
In right column click Customize Web App Layout. We need to modify the List Template to output the kind of HTML that Galleria needs. Switch to HTML view and paste in this code:
```
<img longdesc="{tag_image link}" alt="{tag_image description}" title="{tag_image title}" src="{tag_copy image url}" class="bc-gallery-image" />
```

Now we are ready to add web app items (images) to our Galleria Gallery.

In BC Admin click Modules --> Web Apps and click the name of your gallery web app.
Click Create a New Web App Item.
In Item Name enter the image name. This will not display online, it's just for BC Admin. The reason we don't use this field for the Image Title in Galleria is you may not want a title on all images.
In Template leave on Don’t' use a template.
In Select Image, click on the blue Select Image link at right and navigate to your image already in a BC server folder, or upload a new image to a server folder. When done, the image URL will appear in this box. However, we cannot use this field to send an image to Galleria because when BC outputs a web app field of type image to a web page it automatically creates an IMG link that wouldn't have any parameters for an image title, image description, or image link that we wish our Galleria gallery to use. So, this is a dummy field we added simply so we'd have a Select Image link to help us navigate to find an image URL or upload a new photo. The next field is the one we'll really be using.
In the next field, Copy Image URL, we want to copy the URL in the Select Image field into this field. This one is a type text, and allows us to provide the proper image link to Galleria in our web app List Layout along with the image title, description, and link info.
In Image Title, enter a title to appear for this image in the slide show display. You can leave it blank if you don't want a title.
In Image Description, enter an optional description to display in Galleria.
In Image Link, enter an optional link that the user will go to when the slide show image is clicked. This can be to a BC web page ( /some-page.htm ), an external web site (http://www.AtlantaWebDesignGA.com) , or link to a larger blow up of the image in the gallery.
At bottom left Save the web app item.

When you are done creating images as web app items, you are ready to prepare the page where you want the Galleria Gallery to appear.

In the page you'll want to create markup that looks like this where 12345 will be the ID for your web app:


<div id="bc-photo-gallery-1">
{ module_webapps,12345,a,}
 </div>

Finally, install the Galleria script as described in step 9 in the previous section, Using A Business Catalyst Content Holder with Galleria.

Migrating A Site into Adobe Business Catalyst with Proper Google Redirects

Sat, 19 Nov 2011 00:15:00 GMT

A challenge when moving any website into a new system like Adobe Business Catalyst is insuring that any existing links appearing in Google search results when clicked will connect to specific pages in the new website.

This is normally done by creating a list of redirects, a directory of the URL addresses the old site's pages mapped to the URLs on the new site, so Google can readjust its info.

However, there's a problem if you need to redirect to a new page in Business Catalyst that doesn't end in a .htm, .html or other file type but rather looks like this:

http://www.yoursite.com/some-page-name/

or http://www.yoursite.com/some-page-name

Your redirect to that link will fail with a "404 Error - Page Not Found" If you create it following instructions in the BC's redirect instructions.

I discovered this when migrating to Business Catalyst a web site from WordPress in which almost all the pages on the WordPress site ended in a / and so I was also trying to redirect the old URLs to new URLs in BC ending in a /.

In particular, if you are trying to redirect an old site's link to a shopping cart catalog URL in the new site, since all BC catalog URLs end in / then no redirects will work.

Fortunately, working with Matt B. at BC Tech Support, a solution was found by using a little trick. It turns out that Business Catalyst assumes any URL ending in / is referring to a folder, not a page, which causes BC to report the errors. So you have to trick BC into thinking there is a a page.

The trick is to redirect http://www.yoursite.com/some-old-page-name/ in the old site to http://www.yoursite.com/some-new-page-name/index.htm in the new BC site, even though there really is no page named index.htm. That works to redirect to a Business Catalyst page like http://www.yoursite.com/some-new-page-name/ or a BC shopping cart catalog like http://www.yoursite.com/shoes/

That little trick saved my client from losing hundreds of existing links already recorded in Google search results.

Sneak Preview Video: Adobe Business Catalyst V3 Version 3 Lets a Web Developer Design Anything Using Liquid Markup

Fri, 28 Oct 2011 03:12:00 GMT

Adobe is busy writing the new Version 3 of Adobe Business Catalyst and what's coming is revealed in a video presentation (below) made by Bogdan Ripa (left) at the Adobe Max Conference in October, 2011. He's the BC Director of Engineering who is leading the BC development team in Romania.

Two exciting ideas coming in Business Catalyst V3 are "Liquid Markup" that give the developer the power to control the design and logic when the server outputs a page, and "Site Import" which takes an existing website and automatically creates the design templates needed to convert it onto the Business Catalyst platform. Here's more...

Business Catalyst Liquid Markup

An exciting new feature coming in Business Catalyst V3 is "Liquid Markup" which give the web designer complete control over the way that products and catalogs in an online shopping cart are displayed on screen. Anything is possible, such as displaying products in one catalog in a completely different way than products in another. Liquid Markup also allows customizing in any way the shopping cart and checkout experience.

Summary: web designers are free to create anything, because Liquid Markup gives us more ability to control not only what the BC server outputs but also insert conditional programming processes to control decision making. This is a blessing, because often I run into clients who need a different product display or even a different shopping cart checkout experience for the different types of products being sold. In the past, BC limited you to one product display and one checkout process, but that limitation is now being erased.

Liquid Markup will extend to other parts of Business Catalyst, including web apps and blogs, giving the web developer tremendous power to quickly create powerful online applications or organize written information so web visitors can navigate it more easily.

Of course, with more power the web developer will need to do a bit more programming to create the Liquid Layout templates that customize the user experience. This process requires someone familiar with programming concepts and not just page design, because Liquid Layout enables the developer to control the program logic flow and the tables and table fields and variables running server side. It literally lets the developer create his own custom programming modules to run however needed. It also lets the developer blend in any jQuery or JavaScript logic with the BC output, resulting in cutting-edge websites that can have the fanciest features imaginable.

In the past I've sometimes not put a client in the Adobe Business Catalyst platform because I knew it had limitations that wouldn't meet the client's business needs. However, with Version 3 of Business Catalyst, those limits are now erased and I can build any kind of site needed. This truly makes Adobe Business Catalyst the best platform for almost any kind of website.

Another mind-boggling feature in Business Catalyst Version 3 is the ability to take an existing website on another server, and automatically import the site into Business Catalyst not only creating all the web pages but also the design templates needed to render those pages. In that past, BC could bring in pages, but then the developer had to spend a couple days creating site-wide templates to render the common parts of those pages (header, footer, sidebar columns, etc.) and then manually convert all the existing pages to use those templates. Now instead of spending days, you click a button and the templates are created for you on the server in minutes! I can migrate more clients existing sites into BC quicker and they don't have to pay me for my time to do it. Another reason to prefer Business Catalyst as your favorite web development platform.

Business Catalyst Version 3 Video Sneak Preview

Use a Link to Submit A Web App Search Results Page in Adobe Business Catalyst

Tue, 08 Nov 2011 14:13:00 GMT

I was helping another web designer at www.PizzaToday.com solve some quirks with Adobe Business Catalyst. On the pizza magazine’s site they are have several web apps and one of those lets visitors submit classified ads. Visitors can then go to the classified ads page, choose a category of ads from a search form like Equipment for Sale, and click the Submit button to get a list of those ads.

But the magazine needed another approach. Elsewhere in the site, they needed a link that when clicked would take a web visitor directly to a specific category of classifieds, like the list of Equipment for Sale classifieds, without the visitor having submit the search form.

Unfortunately, Adobe Business Catalyst has no built-in way to automate this. It normally requires creating a separate page dedicated to displaying each category, which isn't practical when there are many categories of info.

What PizzaToday.com needed was a way for a link to go to the regular classified search page and automatically act as if the user clicked on one category and automatically produce the correct results list.

We created the solution using a few lines of jQuery code. Here’s how…

Normally going to www.PizzaToday.com/classifieds.htm takes you to the page where web visitors search with a web app search form.

Now we want a www.PizzaToday.com/classifieds.htm?category=Equipment for Sale link to go that page and automatically choose the Equipment for Sale category and submit the form and immediately produce the chosen ads.

Here’s our solution:


<script type="text/javascript">
   jQuery(document).ready(function(){
   var theCategory = '{ module_url,category}' ;
   if (theCategory) {
      jQuery('form.webapp option:contains("' + theCategory + '")').attr('selected', 'selected');
      jQuery("form.webapp").submit();
  }
 });
</script>

Remember, for this script to work your site must have jQuery loaded. See Loading jQuery.

Also, to your web app form on the page, you must add class="webapp" so this script knows which form on your page to work with, since your page may have more than one form.

How Does It Work?

Adobe Business Catalyst has a { module_url,variable} which will look at the address for this page in the browser, and look for a variable at the end of the URL in the format: variable=somevalue. In our example, if we use {module_url,category} then it will study the page URL http://www.PizzaToday.com/classifieds.htm?category=Equipment for Sale and look for the word "category" following a ? and if found then { module_url,category} will return the value "Equipment for Sale"

In line 4 of the script, we store any value following category= in the URL that called the classifieds page into our variable theCategory.
In line 5, the IF tests if theCategory has a value, otherwise if it is null then nothing happens and the script ends. If there is a category value we continue...
In line 6, the code looks at form with class="webapp" (form.webapp) and in it selects the category value in the form's category select box.
In line 7 the code submits the form, causing Business Catalyst to render the search results to display only classifieds in the given category.

Modifying This Code

In addition to selecting a category, this code can be changed to use other search fields in the form. For instance, we could put the text parsed off the URL with { module_url, variable} into a input text box in our search form and then search for that phrase in the titles of the web app classifieds.

An example: if we have an input text box where the user types in keywords...


<input id="CAT_txtKeywords" class="cat_textbox" type="text" name="CAT_txtKeywords" maxlength="255" />

we can add ?keywords=oven at the end of the link and change line 6 to replace the keywords input box that has name "CAT_txtKeywords" with the value "oven" like this:


<script type="text/javascript">// <![CDATA[
   jQuery(document).ready(function(){
   var theKeywords = '{ module_url,keywords}' ;
   if (theKeywords) {
      jQuery('form.webapp input[name="CAT_txtKeywords"]').val(theKeywords);
      jQuery("form.webapp").submit();
  }
 }); 
// ]]></script>

Improving Search Engine Optimization on Adobe Business Catalyst

Sun, 04 Mar 2012 15:35:00 GMT

NEWS! Please come back in a week to get the revised version of this article. We've been working with Adobe Tech Support and they are about to release a new solution that will be unveiled in our revised article.

For those wishing to improve your SEO, here's a tested simple solution that works on any type of Adobe Business Catalyst page: web pages, catalogues, booking events, web apps, etc.

I've tested on several large BC sites on all types of pages and this solution correctly renders Canonical Links so Google will always know to index your site as www.yourdomain.com instead of as yourdomain.businesscatalyst.com or yourdomain.worldsecuresystems.com.

For info on how Canonical Links tell Google how to index your site correctly, see Google's Info and Video.

Just add the following to the end of your HEAD section atop your various Business Catalyst site templates:


<link rel="canonical" />
<script type="text/javascript">
jQuery(document).ready(function() {
	// for Google search optimization this coverts *.businesscatalyst.com and https://*.worldsecuresystems.com domains to real domain
	// replace your-domain-name.com with your own domain in this code
	var theurl='http://www.your-domain-name.com'+window.location.pathname+window.location.search;
	jQuery("link[rel=canonical]").attr("href",theurl);
	});
</script>

How this works

When a user goes to http://somesite.businesscatalyst.com/somepage.htm when when the page loads, the script replaces the link rel="canonical" with link rel="canonical" href="http://www.yourdomain.com/somepage.htm". That command appearing in your HEAD tells Google to not index the page on the somesite.business.catalyst.com domain but rather only on the yourdomain.com. Neat!

You can move the script into your .js file if you have other code on your site loading from one file. Of course, you do need to leave the <link rel="canonical" /> in the HEAD section of your template so the script can modify it.

Of course, for this script to work your site must have jQuery loaded. See Loading jQuery.

If you wish to inspect your pages to see how it's working, you need to inspect them with Firebug in Firefox or Developer Tools in IE because the link is modified in DOM; you won't see it inspecting the Page Source.

You can see this in action of some of my sites like http://www.murphys-atlanta-restaurant.com

Visit murphys.worldsecuresystems.com or murphys.businesscatalyst.com and using Firebug you'll see the <link rel="canonical" /> in the head is telling search engines to index the site as http://www.murphys-atlanta-restaurant.com

To see an e-commerce store example, inspect kudzu.businesscatalyst.com and in Firebug you'll see the canonical lnk is http://www.kudzuantiques.com. Go to product pages and you'll see it works fine in the e-commerce layouts.

Make Main Product Image Link to Poplets Thumbnail Slide Show in Adobe Business Catalyst

Sat, 22 Oct 2011 17:51:00 GMT

In Adobe Business Catalyst shoppers eventually land on a page showing one product for sale. That page normally has one large image of the product, and below it you can optionally add a built-in Business Catalyst feature called Poplets which are thumbnail images that when clicked start a larger slide show of alternate views of the product.

My client wanted to simply this for shoppers, so when they click the large product image, it reveals a popup window with that image larger plus it becomes the first photo followed by the poplets slide show. Makes perfectly good sense, now shoppers make one click to see all the product's photos instead of clicking twice on the product photo and again on the poplets.

You can see this in action at Kudzu Antiques Market.

To make this happen required adding some jQuery programming code. Here's how we do this in the Admin area of Adobe Business Catalyst:

1. Click Admin --> Other Customization Options --> Individual Product - Large template.

2. Click HTML button at bottom.

My HTML code looks like this:


<div class="shop-product-large clear">
<div class="product-name">
<h1>{tag_name}</h1>
</div>
<div class="order-info">
<div class="price-view">
<div class="price">{tag_saleprice}</div>
<div class="view"><a href="#description"><img alt="View More" src="/site-images/button-view.png" /></a></div>
</div>
<div class="quantity-button">
<div class="quantity">{tag_addtocartinputfield}</div>
<div class="button-add-to-cart">{tag_addtocart,<img alt="Add To Cart" src="/site-images/button-add-to-cart.png" />}</div>
</div>
<div class="image"><a href="{tag_largeimage_path}" onclick="myLightbox.start(this); return false;" rel="lightbox[1]"><img alt="" src="{tag_largeimage_path}?Action=thumbnail&amp;Width=640&amp;Height=640" /></a></div>
<div class="description">{tag_description}</div>
</div>
</div>
<a name="description"></a>
<div class="poplets">{tag_poplets}</div>

3. Now Edit Admin --> Other Customization Options --> Overall Layout in Adobe Business Catalyst

4. Click HTML button at bottom and at the end of your layout add this jQuery code:


<script type="text/javascript">
jQuery(document).ready(function() {
  var popletnumber = jQuery('.productPopletsItem a').attr('rel');
  if (popletnumber ) {
    jQuery('.shop-product-large .image a').attr('rel', popletnumber);
  }
});
</script>

How the jQuery works: In the HTML we've made the large image a link and added a Javacript event to it: onclick="myLightbox.start(this); return false;" rel="lightbox[1]. This onclick is like the code that BC normally inserts to call the poplet show, but we've got a dummy parameter [1] since the HTML doesn't know the exact ID number of the poplet show until the page will be rendered for one product.

When the product page loads, our jQuery script replaces the dummy [1] parameter with the real ID poplet number of the poplet show on the page, if there are poplets. The result is our dummy link on the large product image becomes a real link to start the poplet show when the large image is clicked. The large image becomes the first slide in the slide show, followed by the poplet images.

In the example HTML above, we could have used Business Catalyst's simple {tag_largeimage} to display the large image, but we didn't because the client sometimes has large 900px images that are too wide to display within the web page layout's width, which can only accomodate an image up to 640px wide. If we used {tag_largeimage} then BC would try to put a 900px photos into a 640px space. The solution there is to use the Business Catalyst thumbnail feature to insert the large image no wider than 640px: src="{tag_largeimage_path}?Action=thumbnail&Width=640&Height=640". This way, when the 640px image is clicked, the Business Catalyst lightbox effect zooms out to show the 900px photo which becomes the first picture in the poplets slide show.

Of course, for this script to work your site must have jQuery loaded. See Loading jQuery.

Make Product Thumbnail Images Link To Product Detail Pages in Adobe Business Catalyst with jQuery

Mon, 13 Feb 2012 20:59:00 GMT

In an Adobe Business Catalyst shopping cart, catalog pages list many products, and a shopper clicks one to view a product page. The user can click either the product title or the small thumbnail image, providing you render the thumbnail using the Business Catalyst's {tag_smallimage} which automatically makes the thumbnail into a link to the product page. But that requires creating a small image thumbnail for each product in addition to a large prduct image, a lot of work for a merchant who has lots of products.

Most of my e-commerce clients want to upload only one large image for a product, and have Business Catalyst automatically create a small thumbnail image like this: {tag_largeimage_path}?Action=thumbnail&Width=280&Height=280". That command creates a 280px thumbnail on the catalog page from the large image, but unfortunately then the thumbnail doesn't automatically become a link to the product.

To fix this, we can use jQuery code to wrap the thumbnails with their corresponding links to the product pages. Here's how... My HTML code looks like this in the Business Catalyst Admin -> More Customization Options -> Individual Product - Small :

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
  if ( jQuery('.shop-product-small').length != 0 ) {
  jQuery('.shop-product-small .haslink a').each(function(){
     var anchor = jQuery(this).first().attr('href');
     if (anchor) {
       jQuery(this).parents('.shop-product-small').find('.image img').wrap('<a href="' + anchor + '"></a>');
     }
  });
  }
});
</script>

The jQuery code finds the product's <a href...> link, then wraps that link as an <a href...> around the image thumbnail.

The line including jQuery's each method steps through the web page looking for every instance of an anchor <a> element with class="haslink". When it finds one, copies the href link into the anchor variable. Then it searches for the <img alt="" /> following an element with class="image" and wraps it with the anchor element it copied earlier.

I had to add the if line only because there was a conflict with BC's Poplets feature; adding this line fixed that.

We put this script in the Overall Layout so it only runs once; we can't put it in the Small Product Layout because the code would be included multiple times, once for each each product.

Here's how to use it in your Business Catalyst layout.

Add the class="haslink" to whatever element contains the link to your large product page. In a default Business Catalyst small product layout, the {tag_name} appears within an <h5> and when BC displays the page it replaces {tag_name} with the product's name wrapped within an HTML <a href...> linking to the product. So add my class="haslink" to the <h5> headline tag that contains the {tag_name} enabling the jQuery code to know where to find the link.

The jQuery code also needs to know where to find the HTML <img ...> tag it should wrap with that link. In the default BC layout that's the {tag_smallimage} within a <div class="image">. So the code wraps '.image img'. If your layout is different and displays {tag_smallimage} within a <div class="picture"> then you'd change the code from .image img to .picture img.

If your HTML in the Business Catalyst Small Product Layout is more complicated, you may need to adjust the jQuery to know where to find the href and img elements. In another client's project the HTML in the Small Product Layout looks like this:


<div class="shop-product-small clear">
<div class="order-info">
<div class="price-view">
<div class="price">{tag_saleprice};</div>
<div class="haslink">{tag_button,<img src="/site-images/button-view.png" alt="More info" />};</div>
</div>
<div class="quantity-button">
<div class="quantity">{tag_addtocartinputfield};</div>
<div class="button-add-to-cart">{tag_addtocart,<img src="/site-images/button-add-to-cart.png" alt="Add To Cart" />};</div>
</div>
</div>
<h5>{tag_name};</h5>
<div class="image"><img src="{tag_largeimage_path}?Action=thumbnail&amp;Width=280&amp;Height=280" alt="" /></div>
</div>

Because the image is separated away from the parent div's containing the href, when the code finds the href link it we need to tell it to start searching for the image starting within the parent element .shop-product-small. Here's how we do that in the script we add to the Overall Layout


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
  if ( jQuery('.shop-product-small').length != 0 ) {
  jQuery('.shop-product-small .haslink a').each(function(){
     var anchor = jQuery(this).first().attr('href');
     if (anchor) {
       jQuery(this).parents('.shop-product-small').find('.image img').wrap('<a href="' + anchor + '"></a>');
     }
  });
  }
});
</script>

Of course, for this script to work your site must have jQuery loaded. See Loading jQuery.

Good luck.