Creating a grid display for a page

Contrib type: 
Code/CSS Snippet
Status: 
Complete and working

Downloads


Compatibility: 
Ubercart 1.x

---------------------------------------------------
INSTRUCTIONS FOR CREATING A GRID DISPLAY FOR A PAGE
---------------------------------------------------
1. Upload and activate the latest Views, View Bonus pack, CCK, and image_field modules.

2. Go to /admin/build/views/add.

3. Give your view a name, determine access, and enter a description. Click on Save and Edit at the bottom of the screen.

4. Click on Page. Check the box for "provide page view." Give your view a URL (grid_display, for example). For View type select "Bonus: Grid view." Give your view a title; for nodes per page, enter a number reflecting the number of products you want to display in your grid. (You can use pager if you want to have multiple page views for your products, i.e., 10 on page 1, another 8 on page 2, etc.). Under header and/or footer, you can enter some text describing the products if you wish. Click on Save and Edit at the bottom of the screen.

5. Click on Fields. Add the "Image (field_image_cache)" field; for Handler, select "Do not group multiple values"; for Option select "Thickbox product." Now add the "Node: Title field"; for Handler select normal; for Option, select "as link"; For Sortable and Default Sort, select No and None, respectively. Click on Save and Edit at the bottom of the screen.

6. Click on Filters. Add the "Node: Published" filter and set the Operator to Published and the Value to Yes. Next add the filter entitled "Taxonomy: Terms for Product Catalog"; for Operator, select "is all of" and for Value, select one of your categories that appears in the select list. Click on Save and Edit at the bottom of the screen.

7. Click on Sort Criteria. Under Add Criteria, select an option if you wish and press the "Add criteria" button.

8. Click on the Save button at the bottom of the screen. You should then be redirected to the view you have just created. If not, navigate to the URL you designated for your new grid display view.

9. The following is the exported code from the grid display view I created at http://www.greystokefarm.com/store/all_products. Rather than create a new view from scratch as I have described in points 1 through 8 above, you are welcome to navigate on your site to /admin/build/views and simply import it. You can then customize the details itemized in para number 4 above.

$view = new stdClass();
$view->name = 'display_new';
$view->description = 'New product display';
$view->access = array (
);
$view->view_args_php = '';
$view->page = TRUE;
$view->page_title = 'All products';
$view->page_header = 'To see a larger image, click on a thumbnail. For a description and ordering options, please click on the link below.';
$view->page_header_format = '1';
$view->page_footer = '';
$view->page_footer_format = '1';
$view->page_empty = '';
$view->page_empty_format = '1';
$view->page_type = 'bonus_grid';
$view->url = 'all_products';
$view->use_pager = TRUE;
$view->nodes_per_page = '45';
$view->sort = array (
array (
'tablename' => 'node',
'field' => 'title',
'sortorder' => 'ASC',
'options' => '',
),
);
$view->argument = array (
);
$view->field = array (
array (
'tablename' => 'node_data_field_image_cache',
'field' => 'field_image_cache_fid',
'label' => '',
'handler' => 'content_views_field_handler_ungroup',
'options' => 'thickbox][product',
),
array (
'tablename' => 'node',
'field' => 'title',
'label' => '',
'handler' => 'views_handler_field_nodelink',
'options' => 'link',
),
);
$view->filter = array (
array (
'tablename' => 'node',
'field' => 'status',
'operator' => '=',
'options' => '',
'value' => '1',
),
array (
'tablename' => 'term_node_5',
'field' => 'tid',
'operator' => 'OR',
'options' => '',
'value' => array (
0 => '74',
1 => '76',
2 => '73',
3 => '78',
4 => '79',
5 => '80',
6 => '81',
7 => '84',
8 => '77',
),
),
);
$view->exposed_filter = array (
);
$view->requires = array(node, node_data_field_image_cache, term_node_5);
$views[$view->name] = $view;

-----------------------------------------
INSTRUCTIONS FOR CREATING A BLOCK DISPLAY
-----------------------------------------

To create a block that will randomly display images and titles of the products you have opted to display in the page view above, repeat steps 1, 2 and 3. Then:

(a) Click on Page. Click on Block, and select provide block.

(b) Select Bonus: Grid View, and give your block a title. Under nodes per block, enter 1.

(c) Repeat steps 5, 6 and 7, but this time, for step 7 (Sort Criteria), select Random (you can then opt for ascending or descending, it does not make that much of a difference). Now repeat step 8.

(d) Go to /admin/build/block, and activate the block you have just created. It should appear, and each time you refresh your page, a new image and description from the product category you have selected should be visible in the block.

(e) To add multiple products to the block to that a random image of more then one product type appears in the block, go to step 6 above. Look at the filter entitled "Taxonomy: Terms for Product Catalog."; For Operator, select "is one of" and for Value, select two or more of the categories that appear in the select list.

(f) The following is the exported code from the block display of horse images that you will see in the left sidebar if you visit our homepage, http://www.greystokefarm.com. Rather than create a new block view from scratch as I have described in (a) through (e) above, you are welcome to navigate on your site to /admin/build/views and simply import it. You can then customize the details as discussed previously.

$view = new stdClass();
$view->name = 'image_block';
$view->description = 'image_block';
$view->access = array (
);
$view->view_args_php = '';
$view->page = FALSE;
$view->page_title = 'Image Block';
$view->page_header = 'Applesauce is a small 6 year old chestnut crossbred mare. She has a sweet temperament, loves kids, is forward moving, and has started over small jumps.';
$view->page_header_format = '1';
$view->page_footer = '';
$view->page_footer_format = '1';
$view->page_empty = '';
$view->page_empty_format = '1';
$view->page_type = 'bonus_grid';
$view->url = 'ponies/applesauce';
$view->use_pager = FALSE;
$view->nodes_per_page = '1';
$view->block = TRUE;
$view->block_title = 'From the gallery';
$view->block_header = '';
$view->block_header_format = '1';
$view->block_footer = '';
$view->block_footer_format = '1';
$view->block_empty = '';
$view->block_empty_format = '1';
$view->block_type = 'bonus_grid';
$view->nodes_per_block = '1';
$view->block_more = FALSE;
$view->block_use_page_header = FALSE;
$view->block_use_page_footer = FALSE;
$view->block_use_page_empty = FALSE;
$view->sort = array (
array (
'tablename' => 'node',
'field' => 'random',
'sortorder' => 'ASC',
'options' => '',
),
);
$view->argument = array (
);
$view->field = array (
array (
'tablename' => 'node_data_field_image',
'field' => 'field_image_fid',
'label' => '',
'handler' => 'content_views_field_handler_ungroup',
'options' => 'thickbox][thumbnail',
),
);
$view->filter = array (
array (
'tablename' => 'node',
'field' => 'status',
'operator' => '=',
'options' => '',
'value' => '1',
),
array (
'tablename' => 'term_node',
'field' => 'tid',
'operator' => 'OR',
'options' => '',
'value' => array (
0 => '47',
1 => '18',
2 => '30',
3 => '3',
4 => '33',
5 => '5',
6 => '24',
7 => '6',
8 => '32',
9 => '7',
10 => '8',
11 => '9',
12 => '10',
13 => '11',
14 => '12',
15 => '13',
16 => '31',
17 => '1',
18 => '20',
19 => '46',
20 => '14',
21 => '16',
22 => '21',
23 => '23',
24 => '15',
25 => '22',
26 => '40',
27 => '43',
28 => '42',
29 => '41',
30 => '44',
),
),
);
$view->exposed_filter = array (
);
$view->requires = array(node, node_data_field_image, term_node);
$views[$view->name] = $view;

Insurrectus's picture
Offline
Spreading the word - Ubercart for president.
Joined: 08/22/2007
Juice: 364
Funny Results With Multiple Product Images

Most of my products have multiple product images. This view works really nice, however it shows all product images in the grid, not just the primary image. I tried using the "Group Multiple Values" option but it just stacks the pictures into a column.

Any suggestions as to how I can get the view to only show the primary product image?

diegohermes's picture
Offline
Joined: 09/12/2007
Juice: 147
Re: Funny Results With Multiple Product Images

I have the same problem here, but i'm not using thickbox, only select a thumbnail preset that i created with imagecache.

psynaptic's picture
Offline
Early adopter... addicted to alphas.Not KulvikTheminator
Joined: 08/28/2007
Juice: 731
Re: Re: Funny Results With Multiple Product Images

What you need to do is change the Handler for Image to Do not group multiple values. This will show as many multiples of your products as you have images defined for each product. To show only distinct products (i.e. only one of each) you need to add another filter of Node: Distinct type.

Here is an export of my view in case anyone wants it. I have defined an argument of taxonomy/term so you can build a menu for it easily using just this simple view. If anyone wants a full tutorial just ask and I will add one.

$view = new stdClass();
$view->name = 'products_grid';
$view->description = 'Display products in a grid.';
$view->access = array (
);
$view->view_args_php = '';
$view->page = TRUE;
$view->page_title = '';
$view->page_header = '';
$view->page_header_format = '1';
$view->page_footer = '';
$view->page_footer_format = '1';
$view->page_empty = 'There are no products in this category. Click <?php print l(\'here\', \'products-grid\')?> to go see all the products.';
$view->page_empty_format = '2';
$view->page_type = 'bonus_grid';
$view->url = 'products-grid';
$view->use_pager = TRUE;
$view->nodes_per_page = '9';
$view->sort = array (
);
$view->argument = array (
array (
'type' => 'taxletter',
'argdefault' => '2',
'title' => '',
'options' => '0',
'wildcard' => '',
'wildcard_substitution' => '',
),
);
$view->field = array (
array (
'tablename' => 'node',
'field' => 'title',
'label' => '',
'handler' => 'views_handler_field_nodelink',
'options' => 'link',
),
array (
'tablename' => 'node_data_field_image_cache',
'field' => 'field_image_cache_fid',
'label' => '',
'handler' => 'content_views_field_handler_ungroup',
'options' => 'product_list_linked',
),
array (
'tablename' => 'uc_products',
'field' => 'sell_price',
'label' => '',
),
array (
'tablename' => 'uc_products',
'field' => 'addtocartlink',
'label' => '',
),
);
$view->filter = array (
array (
'tablename' => 'node',
'field' => 'status',
'operator' => '=',
'options' => '',
'value' => '1',
),
array (
'tablename' => 'uc_products',
'field' => 'is_product',
'operator' => '=',
'options' => '',
'value' => '1',
),
array (
'tablename' => 'node',
'field' => 'distinct',
'operator' => '=',
'options' => '',
'value' => array (
0 => 'distinct',
),
),
array (
'tablename' => 'node',
'field' => 'type',
'operator' => 'OR',
'options' => '',
'value' => array (
0 => 'product',
),
),
);
$view->exposed_filter = array (
);
$view->requires = array(node, node_data_field_image_cache, uc_products);
$views[$view->name] = $view;

psynaptic's picture
Offline
Early adopter... addicted to alphas.Not KulvikTheminator
Joined: 08/28/2007
Juice: 731
Re: Re: Re: Funny Results With Multiple Product Images

I've just noticed that my view isn't displaying what I was expecting. The node distinct seems to make sure that only 1 instance of each node can appear in the list of nodes. Since there is only one item in the list this becomes nullified.

j
j's picture
Offline
Joined: 01/17/2008
Juice: 240
Great examples.

Great examples.

My only questions is how, do you integrate breadcrumbs with the views?
Let me know if you need an example, Thanks,

- Justin

itsoftwarelab's picture
Offline
Joined: 08/08/2008
Juice: 2
Problem with creating views

I created the product display view using the steps mentioned above. but the problem is that when I create a simple page using create page type, then this page is also displayed in this products view but I don't want this. I just want to display products only.

Could anyone please help me out.

psynaptic's picture
Offline
Early adopter... addicted to alphas.Not KulvikTheminator
Joined: 08/28/2007
Juice: 731
Re: Problem with creating views

You need to filter by node type.

maaak's picture
Offline
Joined: 09/08/2008
Juice: 5
grid gone

Hi Drupalers,
Have followed all instructions very carefully but am not seeing anything in the node views.
I see the grid under views but if i click on the url it just gives me a
empty page but the view is saved.
If i import any of the example scripts into views it tells me that the view cannot be formed.
Any tips?

fang27's picture
Offline
Joined: 01/30/2008
Juice: 121
Is there a way to create

Is there a way to create this grid of products without having to do a new one for each category? As in - what if I have 20 categories (I need to create 20 views)? Can there be some sort of argument passed?

psynaptic's picture
Offline
Early adopter... addicted to alphas.Not KulvikTheminator
Joined: 08/28/2007
Juice: 731
Re: Is there a way to create

Try using Taxonomy: Term ID as the argument for the view and the you can access products in category id 1 like view_url/1. You can then alias those paths to whatever you want.

weepdrag's picture
Offline
Joined: 10/06/2008
Juice: 5
Re: Creating a grid display for a page

When I try to do the views import I get the following error:

node_data_field_image_cache, term_node_5

Also, if I try to create the view manually, the items in step #5 don't exist.

Am I missing a module or something?

I'm using Drupal 5.7, Views 1.6 (latest), CCK 1.10 (latest), Views Bonus Pack 1.2-alpha2 (latest), Imagefield 2.2 (latest)

Thanks for any input