Custom Design: Styling Filters

Developers Dev talks
1

Hi All,

I feel like sharing a small trick to you, a styled filters like brands on sephora.com

710×1511 62.2 KB
[list]

[*]1. Increase listed varians:

[/list]

#on file /config.php:



[color=#ff0000]change:[/color]

<br />
define('PRODUCT_FEATURE_VARIANTS_THRESHOLD', 40);<br />

```<br />
<br />
[color=#006400]to:[/color]<br />
```php
<br />
define('PRODUCT_FEATURE_VARIANTS_THRESHOLD', 900);<br />

```[list]<br />
[*]2. Make all variants visible<br />
[/list]<br />
#edit the filter like image above[list]<br />
[*]3. Styles<br />
[/list]<br />
#add on file /skins/[SKIN_NAME]/customer/styles.css<br />
```php
<br />
.product-filters {<br />
	background:#FFFFFF;<br />
	border: 1px solid #DDDDDD;<br />
	font-size: 90%;<br />
	line-height: 140%;<br />
	margin: 0;<br />
	height: 130px;<br />
	overflow: auto;<br />
	padding: 0 5px 5px;<br />
}<br />
.filter-title{ border:none }<br />

```<br />
<br />
Tips: To use only to a particular filter as image bellow you need to get filter_id<br />
![](upload://4teJif3N2p5eHgCWmmMf6T5MZfT.png)<br />
<br />
```php
<br />
#content_27_8{<br />
	background:#FFFFFF;<br />
	border: 1px solid #DDDDDD;<br />
	font-size: 90%;<br />
	line-height: 140%;<br />
	margin: 0;<br />
	height: 130px;<br />
	overflow: auto;<br />
	padding: 0 5px 5px;<br />
}<br />
#sw_content_27_8 .filter-title{ border:none }<br />

```<br />
<br />
<br />
Look forward to comments.<br />
<br />
---<br />
Valentin
2

great idea Vali, thanks



For the time you have been on the forums you have made some really great contributions. This will be valuable to all us that use a lot of options



thanks

John

3

Thank you @johnbol1, sharing is great, sorry just for limited time that i have to spend on the forum

4

Neat touch Vali! How does this work with Extended filters, presumably the extended filters URL is no longer generated in the filter list? Do you have a demo site with this installed?

5

Sorry no demo available, yet. but soon will be :D with a lot of fun stuff

6

Hi,

i have try this great solution, works OK, thank you.

but now I like to display filters horizontaly above maincontent,

where and how can I change this?



Thank you

Frank

7

@majerfra

Please PM the website link where can i see the filters and i will send you the code



—

Valentin

8

Hallo Valentin,

I have another question. Is it possible to change "

('PRODUCT_FEATURE_VARIANTS_THRESHOLD', 900);

larger then 900? I have try 1200 but with no succes.

Thank you in advance



Majer

9

do you have more then 900 variants :o ?

I yes, you think the customer will scroll until the end ?

10

[quote name=‘Vali’ timestamp=‘1372325659’ post=‘164429’] do you have more then 900 variants :o ? I yes, you think the customer will scroll until the end ? [/quote]



Yes, i have try to produce a filter for printers and copiers, but i have in Canon more then 900 models.

Is it possible?

ty

Majer

11

Should work with any number, I will test myself and I come back

But showing allot of variants will increase your website speed



—

Valentin

12

[quote name='Vali' timestamp='1372401143' post='164489']

Should work with any number, I will test myself and I come back

But showing allot of variants will increase your website speed



—

Valentin

[/quote]



Ok … I have set variants to 1000 and it works. But, as you said, the speed is a question.

Any tips to speedup the site?

TY



Majer

13

I have a solution and soon i will put on sale ;)

14

[quote name=‘Vali’ timestamp=‘1372419417’ post=‘164522’]

I have a solution and soon i will put on sale ;)

[/quote]

How soon?

Any demo?



Majer

15

Max 2 weeks, no demo, will be available for cs-cart 3 & 4

16

[quote name='Vali' timestamp='1372420306' post='164525']

Max 2 weeks, no demo, will be available for cs-cart 3 & 4

[/quote]



Hi Valentin,

any news on this?



Reg.

Majer

17

[quote name='Vali' timestamp='1372420306' post='164525']

Max 2 weeks, no demo, will be available for cs-cart 3 & 4

[/quote]

Hi,

any news?



reg

Majer

18

Hi Vali!

How to implement this to 4x?

19

I love how filters are done here

http://tiptop.lt/all-in-one-kompiuteriai

20

[quote name='majerfra' timestamp='1385464448' post='172371']

Hi Vali!

How to implement this to 4x?

[/quote]



any idea. please?