Filters

filters.php

<!-- The visible part in the template: -->

<div class="filters order">
    <a class="main" href="#"><span class="glyphicon glyphicon-chevron-down"></span> Organizar por</a>
    <ul>
        <li><a class="sub" href="#order_price">Menor preço</a></li>
        <li><a class="sub" href="#order_bestseller">Mais vendidas</a></li>
        <li><a class="sub" href="#order_rating">Melhor nota</a></li>
    </ul>
</div>
<?php foreach ($properties as $property) {
    if (!empty($property['children'])) { ?>
<div id="product_filter" class="filters filter">
  <a class="main" href="#"><span class="glyphicon glyphicon-chevron-down"></span> Filtrar por <?php echo $property['category']->name ?></a>
  <ul>
    <?php 
        foreach ($property['children'] as $child) {
        echo '<li><a class="sub" href="#filter_property'.$child['category']->id.'">'.$child['category']->name.'</a></li>';
        }
    ?>
  </ul>
</div>
<?php }
} ?>

<!-- End -->

<!-- The unvisible form for submitting -->

<?php echo form_open(site_url(uri_string()), array('id'=>'filter_form', 'style'=>'display:none;', 'method'=>'get')); ?>
    <?php 
    if(count($properties)>0){
        foreach ($properties as $prop) {
            foreach ($prop['children'] as $child) {
                $cid = $child['category']->id;
                $selected = '';
                if ($selected_properties && in_array($cid, $selected_properties)) {
                    $selected = ' checked';
                }
                echo('<input type="checkbox" name="properties[]" value="'.$cid.'" id="filter_property'.$cid.'" '.$selected.'/>');
            }
        }
    }
    ?>
    <input class="order_by_hidden" type="checkbox" name="by" value="price/asc" id="order_price" <?php echo ($sort_by=='sort_price') ? 'checked' : '' ?>/>
    <input class="order_by_hidden" type="checkbox" name="by" value="bestsellers/asc" id="order_bestseller" <?php echo ($sort_by=='quantity_order') ? 'checked' : '' ?>/>
    <input class="order_by_hidden" type="checkbox" name="by" value="rating/desc" id="order_rating" <?php echo ($sort_by=='rating') ? 'checked' : '' ?>/>
</form>

<!-- End -->

<!-- The javascript part -->

<script type="text/javascript">

$(document).ready(function(){
    if ($('.filters').length>0) {
        // For IE and mobile
        $('.filters .main').click(function(e){
            e.preventDefault();
            $(this).next().show();
        });

        // Apply Filters
        $('.filters .sub').click(function(e){
            e.preventDefault();
            href = $(this).attr('href');
            if ($(href).prop('checked')==true) {
                $(href).prop('checked', false);
                $(this).removeClass('active');
                $(this).remove('.glyphicon');
            }else{
                if ($(this).parents('.order').length>0) {
                    $(this).parents('.order').find('.sub').removeClass('active');
                    $('.order_by_hidden').prop('checked', false);
                };
                $(href).prop('checked', true);
                $(this).addClass('active');
                $(this).prepend('<span class="glyphicon glyphicon-ok"></span> ');
            };
            $('#filter_form').submit();
        });
    };
    $('.filters .sub').each(function(){
        href = $(this).attr('href');
        if ($(href).prop('checked')==true) {
            $(this).addClass('active');
            $(this).prepend('<span class="glyphicon glyphicon-ok"></span> ');
        };
    })
});

</script>

<!-- For the CSS-File -->

<style type="text/css">

/* @group Filters */

.filters {
    float: right;
    margin-right: 10px;
    margin-top: 8px;
    position: relative;
}
.filters ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.filters a{
    font-weight: normal;
}
.filters a.main {
    display: block;
    line-height: 30px;
    margin: 0;
    padding: 0 13px 0 0;
    position: relative;
}
.filters ul {
    background-color: white;
    border: 1px solid lightgrey;
    box-shadow: 0 0 2px #AFAFAF;
    display: none;
    padding: 5px 0;
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 600;
}
.filters ul li {
    margin: 0;
    padding: 0;
}
.filters ul li .sub {
  display: block;
  line-height: 13px;
  padding: 6px 30px 6px 10px;
  width: 180px;
}
.filters ul li .sub:hover {
    background-color: #F7F7F7;
}
.filters ul li .active {
    background-color: #F7F7F7;
}
.filters:hover ul {
    display: block;
}
/* @end */

</style>