You are here:  » grid/list view as drop down


grid/list view as drop down

Submitted by don_load on Tue, 2010-04-20 13:31 in

Hi David,

What I want to do is have a grid and list view. I've had a little go myself but don't know much about combining javascript and forms for this type of thing. What I need is $view to either be list or grid. Then I'll use $view as a div class.

What I've tried so far is a drop down and a href for changing between list/grid view on the searchresults. Trouble is the dropdown resets itself when I apply a filter and the href doesn't do much at all. I've applied the mod for displaying price, brand, etc filters and uses a drop down for sorting.

Here's what I tried

 $sortForm .= '<select name="view" onchange="JavaScript:this.form.submit();">';
      $sortForm .= '<option value="list" '.($view=='list'?'selected="selected" ':'').'>list</option>';
      $sortForm .= '</select>';

$sortForm .= '<a href="#" onclick="Javascript:document.getElementById(\'sr\').className = \'list\';">list</a> | ';//POST data?
$sortForm .= '<a href="#" name="view" value="grid" onclick="JavaScript:this.form.submit();">grid</a></p>';//POST data?

The ideal solution for me would be to have them change via an input img type.

Any ideas?

Jay

Submitted by support on Wed, 2010-04-21 09:18

Hi Jay,

The reason (I suspect) for the drop down not remembering the setting (and also I think for the style not being applied is because $_GET["view"] would need to be read into the $view variable. To this, near the top of search.php, add:

  $view = $_GET["view"];

I assume that 'sr' is the class name in use in your template, but bear in mind that in the distribution it is 'searchresults' so that may be the problem; however a great way to debug JavaScript HTML manipulation is with the Firefox Error Console (tools menu). You normally need to clear all existing errors first, then view your page; activate your JavaScript and check the Error Console for more information...

Cheers,
David.

Submitted by don_load on Wed, 2010-04-21 11:19

Got a bit too fixated on trying to figure this out and after a long head scratching session came up with this.

This in the head

<script type='text/javascript'>
function chView(Form, Name, Value) {
Form.elements[Name].value = Value;
Form.submit();
}
</script>

This in search.php

$view = (isset($_GET["view"])?$_GET["view"]:"list");
$sortForm .= '<input type="hidden" name="view" value="'.htmlentities($view,ENT_QUOTES,$config_charset).'" />';
if($view=='grid'){
       $sortForm .= '<a href="javascript: chView(document.sortF, \'view\', \'list\');"> to list view </a>';
}else{
$sortForm .= '<a href="javascript: chView(document.sortF, \'view\', \'grid\');"> to grid view </a>';
}

then this in my filters form

echo '<input type="hidden" name="view" value="'.htmlentities($view,ENT_QUOTES,$config_charset).'" />';
 echo '<input type="hidden" name="sort" value="'.htmlentities($sort,ENT_QUOTES,$config_charset).'" />';

All seems to work as intended. The only issue now is that when I apply a filter it resets the sort drop down.

Also, I've added a reset button to the filters that I would like to reset all the filters back to default. Can this be achieved easy enough?

  echo '<input type="reset" value="Reset" />';

regards,
Jay

Submitted by support on Wed, 2010-04-21 12:12

Hi Jay,

The last html/searchresults.php that I sent to you didn't include the current value of $sort in a hidden field. In that file, look for the following code on line 10:

  print "<form method='GET' action='".$config_baseHREF."search.php'>";

...and REPLACE with:

  print "<form method='GET' action='".$config_baseHREF."search.php'>";
  print "<input type='hidden' name='sort' value='".htmlentities($sort,ENT_QUOTES,$config_charset)."' />";

To remove filters, unfortunately the HTML form reset method will only reset the values to what they were when the page was loaded; however as each filter drop-down as an ID it should be easy to do with JavaScript; have a go with:

  echo '<input type="button" value="Reset" onclick="JavaScript:document.getElementById(\'mf\').value=\'\';document.getElementById(\'cf\').value=\'\';document.getElementById(\'bf\').value=\'\';" />';

Hope this helps!

Cheers,
David.

Submitted by don_load on Wed, 2010-04-21 12:46

I have no form in searchresults.php? Do you mean the filters form? I moved that to the sidebar. I've already added a hidden 'sort' input into the filters form as above.

regards,
Jay

Submitted by support on Wed, 2010-04-21 12:51

Hi Jay,

Yes - I was referring to the filters form (so I guess the one in your sidebar now).

If sort is there as a hidden field it should be propagated - make sure it is definitely within the <form> tags. If you're not sure could you email me your sidebar containing the form and I'll check it out for you...

Cheers,
David.

Submitted by don_load on Wed, 2010-04-21 15:12

Just found that the value is being passed as this

rating&amp;categoryFilter=Laptops+business

and sort is having values appended to it in this block of code

if (isset($pagination))
  {
    if ($minPrice || $maxPrice)
    {
      $sort .= "&amp;minPrice=".$minPrice."&amp;maxPrice=".$maxPrice;
    }
    if ($merchantFilter)
    {
      $sort .= "&amp;merchantFilter=".urlencode($merchantFilter);
    }
    if ($categoryFilter)
    {
      $sort .= "&amp;categoryFilter=".urlencode($categoryFilter);
    }
    if ($brandFilter)
    {
      $sort .= "&amp;brandFilter=".urlencode($brandFilter);
    }

regards,
Jay

Submitted by don_load on Wed, 2010-04-21 15:20

Further to my last comment, I've done this and used $sort2 in the filters hidden input which seems to be working.

$sort = (isset($_GET["sort"])?$_GET["sort"]:"relevance");
$sort2 = $sort;

Do you think this will be ok or will it affect something I haven't thought of?

regards,
Jay

Submitted by support on Wed, 2010-04-21 16:35

Hi Jay,

That's fine - I understand from your comments why it wasn't working before.

Cheers,
David.