Colors filter in Hikashop

Hi,

I just stumbled on this topic while searching for something else.
Please note that this has always been possible with HikaShop.
You want to either create a "color" named characteristic with as values the html code for each square image via the menu Products>Characteristics. You'll also want to change the "characteristic display method" option of the configuration to "radio".
An alternative is to not use a variant but a custom field of the table "item" and of the type checkbox, or radio, or dropdown with, similarily to the characteristic, the html code for each square image.
After you configure the characteristic/custom field for your product(s), on the product page, you'll see a radio list with the color images, one per radio.
If you don't want to display the radios, so that it looks exactely like the link of your message, just add some CSS code to hide the characteristic/custom fields radios and that will do it.

Bonus points:
After having set that up for your products details page, you can even have such color select as a filter on your products listings.
To do that, create a filter with the display type "radio" on that characteristic/custom field via the menu Display>Filters. Similarily, you'll be able to hide the radios next to the color images with a bit of CSS if necessary.

Hi,

Dropdowns cannot have images. So you need instead to create a radio type filter.
It's what is explained in the tutorial filter section:
www.hikashop.com/support/support/documen...by-color.html#filter

Hi,

In that case, it will require that a developer customize for you the display of the dropdown to transform it into a color picker.
If you're a developer and you use that simplecolorpicker javascript library it should not be much:
First, you'll want to change the custom product field to have the color color in the value field of each choice and the name of the color in the title of each choice.
Then, resave your products with the new values.
Then, add the javascript files of the color picker library and the javascript initialisation of the filter dropdown (with the correct id as explained on your link) to your joomla template main file and it should transform it into a color picker.
If you're not a developer, you'll have to hire one to have him do it for you.

The id might change based on your version of joomla but you can easily find it with firebug by simply inspecting the dropdown HTML code on the product page on your website.
On your link they use that code:

$('select[name="colorpicker"]').simplecolorpicker();

$('select[name="data[item][field_column_name]"]').simplecolorpicker();

Hi,

You can insert your code in the file "filter" of the view "product" via the menu Display>Views.
You can try like this:
$('filter_testfarbe_hikashop_category_information_module_698').simplecolorpicker();
Note that this is javascript code so you need to output it in script tags, etc.
Also, note that you also need to have the javascript files of the color picker loaded, etc.

Hi,

Thanks for the share !

Regards,

That's right !

www.hikashop.com/support/support/documen...g.html#main_advanced

Generate variants automatically : When activated, HikaShop will generate automatically all the possible variants of a product when you add characteristics to it and save the product. When turned off, HikaShop won't generate the variants automatically and you'll have to add them yourself via the "manage variants" button of the product after adding the characteristics. It can be useful to turn off that option when you have a lot of variants possible with the characteristics but that you only need a handful of them in each product.