Adobe Business Catalyst Developer

  Please click our Google +1 Button if you find this helpful.

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

Jonathan Beacher - Thursday, February 03, 2011

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.

Comments
Post has no comments.
Post a Comment



Captcha Image

Trackback Link
http://www.atlantawebdesignga.com/BlogRetrieve.aspx?BlogID=11204&PostID=312238&A=Trackback
Trackbacks
Post has no trackbacks.