How to setup a block that displays your Ubercart Products, using Views

Note: This tutorial assumes you have already completed the following: 

a) Installed Drupal + Ubercart modules, and any module dependencies as shown on http://www.drupal.org/project/ubercart 

b) Created the products you want to display. You can create ubercart products using (yoursite.com node add)

_____________________________________________________________________________________________________ 

Our goal today is to create a block display that shows a random list of Ubercart products. We will then place that newly created block into a region so that it can be shown on our webpage. 

Optional: Have you already created the region for where your block will be placed? If not, make sure you have declared that region in your theme's .info file, and properly setup the positioning for that region using CSS.
However, this is completely optional. If you have downloaded a theme that already provides a region where you want to put this block, this tutorial will teach you how to do that.


_____________________________________________________________________________________________________


1) You'll want to create a new "View" and choose the option to display it as a "block". Name it something you'll recognize when you go to add it to a region.


2) Now edit the block details to start adding in the criterion your specific view requires. In our case, we will be editing FORMAT, FIELDS, SORT CRITERIA, and FILTER CRITERIA


3) FORMAT

-Let's use the format set to Grid. We don't want the products to take up too much space, so let's uncheck "Fill up single line" and keep alignment set on Horizontal. You can adjust how many products are shown in a row by adjusting the number of columns. In the preview, I have mine set to 4. 

note: If you want to only show a maximum of 4 products total, make sure you adjust the PAGER to 4. Failing to do so will cause your view to be much larger than you want it to be-- displaying far too many products.


4) FIELDS

In the case of our tutorial, we want to be displaying the image, display price, and perhaps a catalog the item is linked to. This step can be customized to whatever fields you want to display for your specific project.

Under the fields tab in your view, add in the following: 

-Content: Image: with a formatter select box set to "Ubercart product" to properly select the products you already have created. This displays each image of the product.

-Product: Display price: displays the price associated with each product

-Content:Catalog: adds in the catalog associated with each product.
 

5) SORT CRITERIA  

We don't want the same products to show up every time in this block. That gets old! Let's randomize which products our block view displays

-add in the "Global: Random" method.


6) FILTER CRITERIA 

-Set with the Content:Published(yes) method so you are only displaying products the public can already see.


Here is a preview of our view's display settings:

7) After implementing these methods into your view's display, go into  (yoursite.com / admin / structure block) and add the newly created block into the region of your choice. Your done! You should end up with something like this: 

That's it! You can test to make sure that it's randomly generating the products each time by refreshing the page. If each time you refresh there is a different list of products, SUCCESS!!

Hope this helps!

make-online-shop's picture
Offline
Joined: 01/01/2011
Juice: 504
Catalogue in a block

Thank you, I will try it now !

make-online-shop's picture
Offline
Joined: 01/01/2011
Juice: 504
Re: How to setup a block that displays your Ubercart Products, u

Great it works but 3 photos are shown for every product

Do you know how to show only 1 of the photos of each product ?

Thanks.