You are here:  » Dynamic Filter with Additional Option


Dynamic Filter with Additional Option

Submitted by ChrisNBC on Thu, 2017-05-25 12:34 in

Hi David,

The products page on my site currently includes a ‘size’ filter allowing a user to filter products in the price table by size. The code I’m using is:

<?php
  $sizeFilter = (isset($_GET["sizeFilter"])?$_GET["sizeFilter"]:"");
  $sql1 = "SELECT DISTINCT(size) FROM `".$config_databaseTablePrefix."products` WHERE normalised_name = '".database_safe($q)."' AND size <> '' ORDER BY size";
  if (database_querySelect($sql1,$rows1))
  {
    $newRows1 = array();
    foreach($rows1 as $row)
    {
      $sizes = explode(",",$row["size"]);
      foreach($sizes as $size)
      {
        $size = trim($size);
        if ($size)
        {
          $newRows1[$size]["size"] = $size;
        }
      }
    }
    ksort($newRows1);
    $rows1 = $newRows1;
    print "<form method='GET' action=''>";
    print "<label>Confirm size required<br />";
    print "<select name='sizeFilter' id='sizeFilter' onchange='JavaScript:sizeFilter_onChange();'>";
    print "<option value=''>All</option>";
    foreach($rows1 as $row)
    {
      $selected = ($sizeFilter==$row["size"]?"selected='selected'":"");
      print "<option value='".htmlspecialchars($row["size"],ENT_QUOTES,$config_charset)."' ".$selected.">".$row["size"]."</option>";
    }
print "<option value='data-target=#subscribeModal'>Other Size...</option>";
    print "</select>";
    print "</label>";
    print "<noscript><input type='submit' value='Apply' /></noscript>";
    print "</form>";
  }
?>
<script type='text/JavaScript'>
function sizeFilter_onChange()
{
  $("#prices_tbody").load("<?php print tapestry_productHREF($mainProduct); ?>?sizeFilter="+$("#sizeFilter").val()+"&ajax=1");
}
</script>

In some instances the size a user wants will be out of stock so I have added a ‘Other Size…’ option to the bottom of the select box options. The additional option displays fine but I would like to link it to a modal box that I already have which gives the user further options. I have been trying to link the ‘other size’ option to the modal but without success…the modal is #subscribeModal. I wondered if you might be able to suggest a possible solution to get the ‘other size…’ option working correctly?

Thanks in advance.

Best regards
Chris

Submitted by support on Fri, 2017-05-26 10:16

Hello Chris,

Use an notional value for the Other Size option e.g.

  print "<option value='@OTHER'>Other Size...</option>";

And then the following as your sizeFilter onChange event handler:

function sizeFilter_onChange()
{
  if ($("#sizeFilter").val()=="@OTHER")
  {
    $("#subscribeModal").foundation("reveal","open");
  }
  else
  {
    $("#prices_tbody").load("<?php print tapestry_productHREF($mainProduct); ?>?sizeFilter="+$("#sizeFilter").val()+"&ajax=1");
  }
}

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by ChrisNBC on Mon, 2017-06-05 14:51

Hi David,

Thanks for the solution above. Apologies for the delay in responding. I've implemented the code but there seems to be an issue somewhere because when I select the ‘other’ option from the drop down nothing happens. I wondered if you might be able to suggest what might be going wrong. The code I have for the event handler is:

<script type='text/JavaScript'>
function sizeFilter_onChange()
{
  if ($("#sizeFilter").val()=="@OTHER")
  {
    $("#subscribeModal").foundation("reveal","open");
  }
  else
  {
    $("#prices_tbody").load("<?php print tapestry_productHREF($mainProduct); ?>?sizeFilter="+$("#sizeFilter").val()+"&ajax=1");
  }
}
{
  $("#prices_tbody").load("<?php print tapestry_productHREF($mainProduct); ?>?sizeFilter="+$("#sizeFilter").val()+"&ajax=1");
}
</script>

Thanks in advance.

Best regards
Chris

Submitted by support on Tue, 2017-06-06 08:52

Hi Chris,

Please could you email me the files containing the above relevant code (filter drop-down, event handler and also where the modal is defined) and I'll check it out further with you...

Cheers,
David.
--
PriceTapestry.com