User login

Navigation

Using Views 2 to Display Related Ubercart Products

This tutorial should be used if you want to display related products but want more styling and layout options that are not available in modules like uc_upsell, related content etc.


This tutorial assumes the following

  • You are running Drupal 6.x, Ubercart 2 & Views 2
  • Views & Views UI are enabled
  • ImageCache, ImageAPI, ImageField, FileField & CCK are enabled
  • Thickbox is enabled and working to display product thumbnails
  • You have a basic understanding of the Views 2 UI



The goal of this tutorial is to allow you to create a related products block. The block will find related products by listing product nodes in the same term(s) as the node the user is currently viewing.

Step One: Create The View and add Block Display

Navigate to Admin > Site Building > Views and click the Add tab. On the Add View form, enter a machine readable name for the view (No spaces, dashes or other symbols. Alphanumeric and underscores only). I called mine related_products.

Next we need to ensure that Node is selected under View Type. If it is not selected select it before continuing.

Finally we want to add a Block display. We will only need to add this display type as we will not be viewing the view as a page or other node, we only want block content.


Step Two: Define Arguments

In programming an argument is a reference or value that is passed to a function. In our case it will be applied to reference nodes that are members of a certain taxonomy term.

For our purpose we will only need to add one argument. The one we are going to use is Taxonomy: Term ID.

Under the arguments section click the plus (+) icon to add an argument. Then scroll down your page to where the interface has loaded. There are lots of options to choose from. Select the taxonomy group from the dropdown, select the checkbox Taxonomy: Term ID and click Add.

Once we click add we will be brought to the configuration settings for our chosen argument. To start, ensure that the title field is blank along with the breadcrumb field.

In order to 'pull' the term ID's from a node, we need to enter some custom PHP code as a validator. This will set the node's terms as a default argument. In this way we avoid the need to validate views arguments through the URL.

Under the header Action to take if argument is not present select the Provide default argument radio button. Some more options will load below the radio button. We will see a header called Default argument type. The type we want to select is PHP Code.

Once PHP code is selected, a field will appear to enter the PHP code. Enter the code shown below: NOTE* DO NOT INCLUDE <?php ?> tags.

$node = node_load(arg(1));
if ($node->taxonomy) {
    foreach($node->taxonomy as $term) {
        $terms[] = $term->tid;
    }
    return implode('+', $terms);
}
else {
    return;
}

This code will load all arguments from the node the user is on and then pass the term arguments to views. Views will then assign the term ID's as a default value to the argument, returning only product nodes in the defined terms. If the product node does not have any terms associated with it, the code returns a blank value and the block will not display.


Step Three: Display the node fields.


Now we need to display the nodes we are calling. To do this click the plus button beside the fields section.

We will add a few fields. They are listed below along with their configuration instructions.

  • Node: Title
    Ensure the label field is blank and select the box 'Link this field to its node' checkbox. Then click the update button.
  • Content: Image
    This is the image thumbnail that will display in a thickbox. We want to select the group multiple values checkbox to prevent multiple images from being shown. Under the group multiple values checkbox enter show 1 value(s) starting from 0. Next we want to select the none radio button under Labels. Finally we want to choose the format to display the image in. Choose Thickbox: product image from the dropdown menu. This will display a thumbnail and will open the full image in a thickbox when clicked. Click Update when finished.
  • Product: Sell Price and Product: Add to cart form
    These two fields require little configuration. Simply add and update default displays.



Step Four: Filter content


This step is recomended if other types of nodes will be sharing the same terms as your product nodes. This will prevent the block from displaying other nodes than products. Click the plus button to add a filter, select Node: Type and add. When configuring the filter, select Is One of for the operator and select Product under Node Type. Click update.



Step 5: Configure Basic Settings

Basic settings define how many fields to display, how to format results etc. To make your block look nice, I suggest entering 4 under items to display and using Grid to display fields. However you can choose anything you like.

Finally, Click the save button to save your view! Then navigate to the block administration page and enable it in the region of your choice!


Post Categories: