Show a long list of attributes in a nice chosen searchable selectbox.
Include Chosen JS and CSS in head. https://cdnjs.com/libraries/chosen
2 files:
-Magento PHTML
-filter.php in mage root (or other location)
In a Magento template phtml file:
<?php
/**
* Template for selectbox with attributes -> button
versie 2 / chosen js selectbox
oweb
*/
?>
<script>
jQuery(document).ready(function() {
//Set geschiktvoorbutton as disabled by default
document.getElementById("geschiktvoorbutton").disabled = true;
//On change of select enable the geschiktvoorbutton
$j('select').change(function() {
var op =$j(this).val();
if(op !=''){
$j('input[name="geschiktvoorbutton"]').prop('disabled',false);
}else{
$j('input[name="geschiktvoorbutton"]').prop('disabled', true);
}
});
// sort list
$j(function(){
$j(".geschiktvoordd").chosen().chosenSortable();
$j(".geschiktvoordd-deselect").chosen({
allow_single_deselect: true,
search_contains: true,
enable_split_word_search: true
});
});
/* sorten a-z */
var options = $j('select.geschiktvoordd option');
var arr = options.map(function(_, o) { return { t: $j(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
o.value = arr[i].v;
$j(o).text(arr[i].t);
});
/*chosen params */
$j(".geschiktvoordd").chosen({
disable_search_threshold: 10,
no_results_text: "Oeps, niks gevonden!",
allow_single_deselect: true,
search_contains: true,
enable_split_word_search: true,
width: "95%"
});
});
</script>
<?php /** actie voor submit */
$action = $_GET['action'];
/** Value of $_POST['appropiate_for'] will be selected option value */
$appropiate_for = $_POST['appropiate_for']; ?>
<form method="POST" action="//www.mobilife.nl/filter.php">
<select class="geschiktvoordd" name="appropiate_for" id="appropiate_for_Select" data-placeholder="Klik & typ een paar letters van je toestel" >
<option> </option>
<?php
/*selecting all options and building an option list */
$attribute = Mage::getSingleton('eav/config')->getAttribute('catalog_product', 'appropiate_for');
if ($attribute->usesSource()) {
$options = $attribute->getSource()->getAllOptions(false);
foreach ($options as $option)
{ /*stripping results from || pipes*/
echo '<option value="'.$option['value'].'" style="list-style:none">'; print_r(str_replace("|| ","",$option['label'],$i)).'</option>';
}
} ?>
<input type="submit" name="geschiktvoorbutton" id="geschiktvoorbutton" class="button geschiktvoor" value="Bekijk alle accessoires voor dit toestel" disabled="disabled">
</select>
</form>
In a filter.php file
<?php
/* OutlandWebdesign Filter redirection
** Version: 1.1 date: 11.09.16 mm.dd.yy
***
*/
error_reporting(E_ALL);
ini_set('display_errors', '1');
/* Handling redirection based on selected phone. Through this PHP file in order to ensure the selected value is properly posted to the Amasty Improved Nav extension */
if((int)$_POST['appropiate_for']){
header('Location:URL TO FILTER or SEARCH PAGE HERE.domain/filter?appropiate_for=' . (int)$_POST['appropiate_for']);
exit;
}
?>
Opmerkingen