The gench site I’m building has an inventory of a few dozen albums for sale (mostly CDs).

Once I created all the products and styled the product display, I was pretty happy with my online store except that it lacked functionality for flipping through the products. I want the gench store to feel a bit like flipping through the LP bin at a used record store.

I briefly considered creating a paginated (or paged) view, with just one product per page. In some situations, this may have worked fine, but it would have broken my lovely content-aware view blocks which display songs, reviews and artists for the currently displayed album. Maybe there is a way to do this, but I couldn’t figure it out (at least not quickly).

Plus, it seemed like this wouldn’t be that difficult to accomplish with some PHP and jQuery.

This is what I created…

Here’s how I did it…

First, I added the following function to my theme’s template.php file (full disclosure: I didn’t write this function, but found it on the CommerceGuy’s support site)…

/*Previous-next function for products*/
function genchstyle_prev_next($current_node = NULL, $op = 'p') {
  if (
$op == 'p') {
    $sql_op = '<';
    $order = 'DESC';
  }
  elseif ($op == 'n') {
    $sql_op = '>';
    $order = 'ASC';
  }
  else {
    return NULL;
  }
$output = NULL;
$sql = "SELECT n.nid, n.title
FROM {node} n
WHERE n.nid $sql_op :nid
AND type IN ('product_display')
AND status = 1
ORDER BY nid $order
LIMIT 1";
  $result = db_query($sql, array(':nid' => $current_node->nid));   
  foreach ($result as $data) {
  }
  if (isset($data)) {
      if ($op == 'n')
          return l("Next", "node/$data->nid", array('html' => TRUE));
      else if ($op == 'p')
          return l("Previous", "node/$data->nid", array('html' => TRUE));
    }
}

I created a file in my sites/all/themes/[theme] folder named…

 node--product--type.tpl.php

Tip: the Theme Devel module provided this file suggestion

…and inserted the following code just above the rendering of the product image (but you could place the buttons anywhere on the page)…

<div>
<?php print '<span><i></i>' . genchstyle_prev_next($node,'p') . '</span><span>' . genchstyle_prev_next($node,'n') . '<i></i></span>'; ?>
</div>

This gives me functioning “Previous” and “Next” hyperlinks, but no nifty arrow-shaped buttons.

So I wrote this javascript/jQuery script (nextprev.js) which adds nice previous and next font-awesome icons (and hides them when appropriate)…

// next and previous buttons on product pages
//Ensure $ works in all environments
(function($){
    // ensure doc loads before script fires
    $(document).ready(function(){    
    // check if there is anything to link to
    if ($('span.backward').find('a').length != 0) {
    // enable prev arrow button
    $('span.backward').css('cursor', 'pointer').click(function(event) {
    var a_href = ($(this).find('a').attr('href'));
    window.location.href = a_href;
    });
    }
    // hide prev arrow button if there are no previous nodes
    else {
    $('span.backward').hide();
    };
    // check if there is anything to link to
    if ($('span.forward').find('a').length != 0) {
    // enable next arrow button
    $('span.forward').css('cursor', 'pointer').click(function(event) {
    var a_href = ($(this).find('a').attr('href'));
    window.location.href = a_href;
    });
    }
    // hide next arrow button if there are no next nodes
    else {
    $('span.forward').hide();
    };

    });
})(jQuery);

I refer to this js file from within the hook_preprocess_page function within my theme’s template.php file…

    drupal_add_js(path_to_theme().'/js/nextprev.js');
    $variables['scripts'] = drupal_get_js();
    $scripts = drupal_get_js();

If you decide to use font-awesome icons like I’m doing here, you’ve got to refer to the font-awesome library. I do this from within my theme’s template.php because I use the font-awesome shopping cart icon on every page of the site…

 /*font awesome library is needed for shopping cart icon so we need it in every header*/
function genchstyle_preprocess_html(&$variables) {
drupal_add_css(
'http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css',
array('type' => 'external')
);
}

The finished results can be seen here: http://www.gench.com/productdisplay/monopoly