How to add scrollbar to checkbox filter list

oxido
Topic Author
Offline

8 years 3 days ago - 5 years 3 months ago #298643 by oxido

How to add scrollbar to checkbox filter list was created by oxido

-- HikaShop version -- : 4.4.3
-- Joomla version -- : 3.9.26

Hi guys!
If you want to create a checkbox filter with your categories or something else, but you have a huge list of checkboxes, you can add scrollbar to that list.
This is how i did it in joomla 3.8.12. and hikashop v 3.5.1 .
First you need to add a new class in your css file used by your template. You can do this directly in joomla as administrator.
Go to: Template > (from left side select): Templates > Your template > css folder and look custom.css, if there is not one, you can add the new css class in any .css file used by your template.

Code:

.hs_sb_mod{
	overflow-y: scroll;
    height: 200px
}

Now, you need to customize your view in hikashop.
Go to: Views > (search for) filter file that is used in: front end, on the products page (see images in attach) and edit this file.
Around line 164 you will see this line

Code:

<?php echo '<div class="'.$activeClass.'hikashop_filter_'.$filters[$count]->filter_namekey.'">'.$html[$count].'</div>'; ?>

Replace the line with this one:

Code:

<?php
    $scrollbar = 'alt="scrollbar"';
    if (isset($filters[$count]->filter_options['attribute'])) {
        $filter_attribute = $filters[$count]->filter_options['attribute'];
        $attribute = $filter_attribute;
        $add_scrollbar = ($scrollbar == $attribute ? 'hs_sb_mod' : '');
        echo '<div class="' . $add_scrollbar . ' ' . $activeClass . ' hikashop_filter_' . $filters[$count]->filter_namekey . '">' . $html[$count] . '</div>';
    }else{
        echo '<div class="'.$activeClass.'hikashop_filter_'.$filters[$count]->filter_namekey.'">'.$html[$count].'</div>';
    }
?>

Save the file.
Now go to Hikashop> Filters > Create new filter: Type = Checkbox , and in the attribute field add : alt="scrollbar"

In my example i create 2 filters, same settings, but only one have the attribute, this is the result.

UPDATE: Customise the scrollbar, add this in your css file.

Code:

/*width*/
.hs_sb_mod::-webkit-scrollbar {
width: 10px;
}

/* Track */
.hs_sb_mod::-webkit-scrollbar-track {
background: #f1f1f1; 
}

/* Handle */
.hs_sb_mod::-webkit-scrollbar-thumb {
background: #888; 
}

/* Handle on hover */
.hs_sb_mod::-webkit-scrollbar-thumb:hover {
background: #555; 
}

Last edit: 5 years 3 months ago by oxido. Reason: I have updated the changes from Hikashop version 3 to version 4.4.3

The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.210 seconds