Display by Color

-- HikaShop version -- : 4.6.1
-- Joomla version -- : 3.10.11
-- PHP version -- : 8.0.20
-- Browser(s) name and version -- : firefox

Hello,

I followed your tutorial "display by color " and everything is working as you show it.
I noticed that there is no indication of which image is currently selected.
Is there a way in css to highlight the image of the item selected?
Maybe change the border color and/or size of the selected item?

ie.
.hikashop_product_characteristics_table td img {border: 2px groove black;}
Change to:
.hikashop_product_characteristics_table td img {border: 3px solid yellow;}
When selected

or do I need to use a JS solution?

Thank You

Ok, You can check it out here:

Hi Nicolas,

Perfect, that is the effect I was looking for.
Removing that bit of css code from your tutorial was the part I overlooked.

Thank You

HI,

I noticed a new issue after implementing the above code.
Now my characteristics select boxes are all styled with the border and background color as well.

.hikashop_product_characteristics_table td span {
border: 2px groove black;
height: 36px;
background-color: black;
}

This code affects all characteristic styles not just the radio buttons.
Is there a way to target only the characteristics shown as radio buttons?

Thank You

Hi Nicolas,

Yes, that fixed the issue.

Thanks

Hello,

I have another question related to this.
If I have 2 characteristics chosen for the product and some combinations are not created, all the images show no matter the selection of the first characteristic. If I click on the image where there is no variant combination it shows "no stock"
If I where using two drop downs in the same scenario the choice in the second box would be disabled.
Is it possible to hide the image when there is no variant for the combination or the variant is unpublished?

For instance:
Say I have one characteristic in a drop down called colors with the values "RGB" and "CYMK".
I have another characteristic in a radio, with the modifications to show the images, called "red","green","blue","cyan","yellow","magenta","black".
I assign the variants "RGB&red","RGB&green","RGB&blue",CYMK&cyan","CYMK&yellow","CYMK&magenta","CYMK&black".

As it works now when I select either "RGB" or "CYMK" in the first drop down all the colors show below.
What I would like is for only the combinations that are assigned to be visible.
If I click "RGB" in the first select box the it only shows only the colors "red","green" and "blue" and the same for "CYMK" only shows the colors "cyan","yellow","magenta" and "black".

Is this possible?

Hi Nicolas,

I do Have the "Characteristics dynamic display" activated yet the unavailable variants are still showing.
They are all be hidden until the first select box is chosen but after any selection is made they all show up.
In the dropdowns the unavailable variants are grayed out and disabled.
They all show in the radio and are selectable. They just trigger the "no stock" message.

I created an example for you to see:

Hi Nicolas,

That was the issue.
Everything works now as it should.

Thank you for your awesome support.

Hello,

I am updating this site to Joomla 4 and found that the styling for the Color images has been lost.
I now get the vertical display not the horizontal display.

Joomla 3 display:

Ok, Here is the link to the J4 page.

Hello Philippe,

That does fix the layout; however, the border color does not change when checked as it did in J3.
The code was given earlier in this thread.

.hikashop_product_characteristics img {
    height: 32px;
}
.hikashop_product_characteristics_table td label > span {
    border: 2px groove black;
    height: 36px;
    background-color: black;
}
.hikashop_product_characteristics_table input[type=radio]:checked + span {
    background-color: yellow;
    border: 3px solid yellow;
    height: 38px;
}