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
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
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