Learn How to Add a Slideshow to a Product Page in this Ubercart Tutorial

Our designers are constantly pushing the envelope for our developers. That allows our team to come up with ways to build better experiences for users on the web. In a recent case, one of our developers turned the table and made a recommendation that our designers didn’t think of. Grant, our developer hero in this story, recommended adding a slideshow to the product page to show different images of the product.

When it comes to Drupal sites, our “go to” module for product pages is Ubercart. Ubercart allows you to seamlessly integrate your online store with the Drupal platform. The majority of what you want on your product page comes standard, such as a configurable product catalog, flexible product features, single page checkout, and simple order processing through a variety of vendors. When we approached this seeming simple feature we found that no one had created module to fulfill this need on Ubercart (yet).

Ubercart Tutorial

We made use of Nivo Slider for the sliding functionality, as this is a flexible, feature-rich jQuery library. It’s a library we’re very familiar with that has quickly become (at the time of writing) an industry standard for slideshow functionality. Unfortunately, it wasn’t as simple as copying and pasting. We needed to make a few modifications to the code.

Adding Nivo Slider to the Theme

First things first—download the Nivo Slider. Upload it to the js directory in your theme. Since the slider (in this example) is only being used on the product page, we want the javascript file to load only when that content type is being called. Therefore, in the theme template add this code:

function theme_name(&$variables) {
  if (isset($variables['node']) && $variables['node']->type == 'product') {
    $path = path_to_theme();
    drupal_add_js($path.'/js/jquery.nivo.slider.js');
    drupal_add_js($path.'/js/nivo-ini.js');
  }
}

The nivo-ini.js file is the file that we will use to initialize the slider. We’re also assuming here that the content type is “product.”
The jquery.nivo.slider.js is the Nivo Slider package. Also, ensure you change the function name (theme_name) to an appropriate name so it gets triggered.

Stripping Out Unneeded Markup

By default, Ubercart allows you to upload multiple images to be associated with a particular product. Once you’ve uploaded three photos, you’ll need to strip out the div tags that Drupal wraps the images in. All that is left should be <img> tags. This can be accomplished by customizing the field template for images. Our machine name for the product image is uc_product_image, therefore we’ll create a file called field—uc-product-image—products.tpl.php in our templates folder within our theme. This makes sure that only the image tags are being printed out and gets rid of all the divs and extra html that comes with it.

Initializing the Slideshow

Finally in the nivo-ini.js file, we’ll add the js to initialize the slideshow.

jQuery(document).ready(function() {
  jQuery("#slider").nivoSlider({
    effect: "slideInLeft",
    controlNav: false,
    directionNav: true,
    startSlide: 0
  });
});

You’ll also need to add styles to the images but this can be found on The Nivo Slider documentation website.

There you have it! Nivo Slider is now integrated and ready to be utilized! We recommend adding slideshows to your product pages to up the interactivity and uniqueness of your pages. A special thanks to one of The Web Development Group’s lead developers, Grant Skalak, for showing his code and helping to provide a brief tutorial!

Have any questions? Reach out to us on Twitter and we’ll help you out. Looking to start a Drupal project? Learn about our Virginia-based Drupal developers or get in touch.