Contrib type: Theme/Template
Status: Complete and working
Compatibility: Ubercart Alpha 7b
Using a combination of Views, Views bonus pack, CCK, and image_field, you can change customize the display output for the uc_catalog.module from the default table view to a grid view.
---------------------------------------------------
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;
Joined: 08/07/2007