Colors filter in Hikashop

  • Posts: 865
  • Thank you received: 9
  • Hikamarket Multivendor Hikashop Business
8 years 7 months ago #132937

Hello,

Will Hikashop have the ability to display filters such as these on the following link?

www.tokotoukan.com/el/t-shirts/LeDuc/con...ood#gender-1,color-1

Some of theme are very useful and necessary for every e-shop. Will any of these be available on future versions?

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

  • Posts: 12953
  • Thank you received: 1774
8 years 7 months ago #132991

Hi,

I don't think that this can be done without some code customization which will require some development skills. For the moment, you can only chose characteristic through a drop-down, or a list.

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

  • Posts: 75835
  • Thank you received: 11829
  • MODERATOR
7 years 8 months ago #174343

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.

The following user(s) said Thank You: verzevoul

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181140

Hi,
I have a few filters connected to the carousel, all is working fine...
Only I would like the colors in one of the filter fields appear as colors, not as text. (see screenshot)
After reading your post I tried to enter the html code (which one exactly? simple #fff tags and the like?),
but I couldn't get it working...
A push in the right direction would be appreciated.

Attachments:

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

  • Posts: 75835
  • Thank you received: 11829
  • MODERATOR
7 years 7 months ago #181223

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

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181274

Thanks Nicolas,

but we have 14 (yet) colours to choose from, so we need to hide them in a clickable field, otherwise it would look horrible.
See the example screenshot of our old website, which was realised with VM: The colour palette is hidden until clicked.
Basically this should be very similar to the simple date picker.
Any ideas?

Attachments:

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181281

Nicolas,
I have eventually found the color-picker that was used in the old website shop:
github.com/tkrotoff/jquery-simplecolorpicker

Can you give me any advice on how to integrate that into the Hikashop system?

Thanks

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

  • Posts: 75835
  • Thank you received: 11829
  • MODERATOR
7 years 7 months ago #181289

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.

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181397

Nicolas,

First, you'll want to change the custom product field to have the color color in the value field of each choice


Would that just be the hex codes? Like #acacac and so on?

Thanks a lot for your help.
Frank

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181427

Okay, forget that last question. It's been a long day yesterday...

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

  • Posts: 17
  • Thank you received: 0
7 years 7 months ago #181461

javascript initialisation of the filter dropdown (with the correct id as explained on your link)


I've added the script, the script and css files (using a plugin called EasyScript).
Which exactly would be the ID to address? I thought it would be the name of the custom field (which the filter refers to).
Thanks again, Nicolas!
Frank

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

  • Posts: 75835
  • Thank you received: 11829
  • MODERATOR
7 years 6 months ago #181506

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();
So I guess it might work with this code:
$('select[name="data[item][field_column_name]"]').simplecolorpicker();
where field_column_name is the column name of the field. But I would rather recommend to use the select id instead of the name.

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

  • Posts: 17
  • Thank you received: 0
7 years 6 months ago #181571

Thanks Nicolas.
I've tried both versions before, but I somehow don't seem to get the colorpicker part to run at all.
What I see in firebug is the hikashop code:

<select id="filter_testfarbe_hikashop_category_information_module_698" name="filter_testfarbe" size="1" onchange="document.forms['hikashop_filter_form_hikashop_category_information_module_698'].submit();">

So I wonder if it's a certain view in Hikashop that I would have to insert my code to. The module that displays the page
with the accordeon and the filters certainly can't be modified...
Or am I totally on the wrong path?

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

  • Posts: 75835
  • Thank you received: 11829
  • MODERATOR
7 years 6 months ago #181642

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.

The following user(s) said Thank You: macallan

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

  • Posts: 17
  • Thank you received: 0
7 years 6 months ago #181893

Thanks Nicolas,
I eventually got the thingy to work.
I took a slightly different approach, though. Instead of inserting code in the view, I went with the aforementioned plugin.
Where the code was something like this:

<select id="filter_Bitte_wahlen_Sie_eine_Farbe_br_hikashop_category_information_module_698" name="[b]filter_Bitte_wahlen_Sie_eine_Farbe_br[/b]" size="1" onchange="document.forms['hikashop_filter_form_hikashop_category_information_module_698'].submit();">

I took the name part and addressed it with the colorpicker,
$(document).ready(function(){
$('select[name="filter_Bitte_wahlen_Sie_eine_Farbe_br"]').simplecolorpicker({
  picker: true
});
});
and that was that.
I wouldn't have gotten that far so quickly without your help.
Thanks again.
Frank

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

  • Posts: 25322
  • Thank you received: 3917
  • MODERATOR
7 years 6 months ago #181918

Hi,

Thanks for the share !

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 865
  • Thank you received: 9
  • Hikamarket Multivendor Hikashop Business
7 years 5 months ago #187044

Hi! Im back again with something very important for this post.
My website has 3500colors.
So my characteristic color has now 3500 entries.
When I add a new product and i add also a color characteristic, hikashop automatically adds 3500 new products.
How can we avoid that.
Any suggestion would be appricieted, since the account is getting very slow and lacks of recourses.
Imagine with 20 products I ll get in my table 20X3500 new rows.
Also I can t tell to my client to add this rows by hand. Its imposible since he ll have to add extra lines also in the css.
URGGG

----
as i can see custom field isn t an option because the color must be selected from the customer and added in the shopcart.

Last edit: 7 years 5 months ago by verzevoul. Reason: add something

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

  • Posts: 865
  • Thank you received: 9
  • Hikamarket Multivendor Hikashop Business
7 years 5 months ago #187046

a quick solution if its possible Nikolas.
Can I leave my characteristic color with my 3500 colors but when I add it in products, hikashop wont do anything. but
when we click manage variants, a new window will give me the ability to choose which colors I like. this way I wont overload my db

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

  • Posts: 193
  • Thank you received: 76
7 years 5 months ago #187076

You can disable automatic variant creation in Hikashop configuration and then create variants by hand in "Manage variants".
With high number of characteristics it will be time consuming work. Maybe you should try create variants in Excel and import them using csv.

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

  • Posts: 25322
  • Thank you received: 3917
  • MODERATOR
7 years 5 months ago #187077

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.


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

Time to create page: 0.121 seconds
Powered by Kunena Forum