Show attribute filter in a chosen JS searchable selectbox

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

?>

Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

Mogelijk gemaakt door Zendesk