Display by Color

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344255

-- 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

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344260

Hi,

You should be able to do it with pure CSS using + and :checked
www.hikashop.com/forum/product-category-...-buttons/254575.html
If you need a more precise answer, please provide the URL of the page so that I can check on the situation.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344264

Ok, You can check it out here:

This message contains confidential information

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344265

Hi,

You first need to remove the CSS:

.hikashop_product_characteristics_table td img{
    border: 2px groove black;
}
you added previously.
Then, add that CSS:
.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;
}
Doing this on the fly with my browser's inspector tool makes it work on your URL:
i.imgur.com/o6UKWZQ.png

Last edit: 1 year 9 months ago by nicolas.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344272

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

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344309

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

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344312

Hi,

You just need to adapt a bit the CSS. I've modified the CSS code above so that it will target the span in radio mode while not affect the span created by the chosen library on the select characteristics:
www.hikashop.com/forum/product-category-...by-color.html#344265

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344315

Hi Nicolas,

Yes, that fixed the issue.

Thanks

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344700

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?

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344701

Hi,

The behavior should be the same with dropdowns or radios. What controls whether the second characteristic's dropdown values(or radios) is the "Characteristics dynamic display" setting in the HikaShop configuration. You need to make sure it's activated if you want the characteristics to hide/display the values automatically based on the available variants and the already selected values.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344748

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.

Last edit: 1 year 9 months ago by jfischer_hika.

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344778

Hi,

I did a test on my end but it's working fine:
i.imgur.com/12avC83.png
i.imgur.com/3KW4KuM.png
Could you provide the URL of a page with the issue on your website ?

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344780

I created an example for you to see:

This message contains confidential information

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

  • Posts: 81875
  • Thank you received: 13145
  • MODERATOR
1 year 9 months ago #344789

Hi,

The issue comes from the CSS :
.hikashop_product_characteristics_table td label {display:inline !important; padding-left: 5px;}
you've added, following the "Display by color" tutorial.
This line can help in some cases with templates changing the display mode of labels to block.
However, the !important there interfers with the javascript of the characteristic system trying to hide the element with "display:none;" and it is not necessary on your website.
So remove the !important from that CSS you've added and it will work fine.

We'll look at a solution on our end to modify the javascript of the characteristic system so that it works even in that case.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 9 months ago #344810

Hi Nicolas,

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

Thank you for your awesome support.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 5 months ago #348541

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:



Joomla 4 display:

Attachments:

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

  • Posts: 4585
  • Thank you received: 616
  • MODERATOR
1 year 5 months ago #348564

Hello,

Maybe the new Joomla 4 template break the custom css ?
Or maybe while update operation you lost your custom css ?
In order to help you can you provide an Url link to the relative product page ?

This will may help us to improve our Documentation !
Thanks in advance.

Regards

Last edit: 1 year 5 months ago by Philip.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 4 months ago #348592

Ok, Here is the link to the J4 page.

This message contains confidential information

Last edit: 1 year 4 months ago by Philip.

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

  • Posts: 4585
  • Thank you received: 616
  • MODERATOR
1 year 4 months ago #348601

Hello,

Thanks for your returns ! This will able us to update our Documentation, here .
You need to add these commands in order to have the expected results :

table.hikashop_product_characteristics_table input {
    display: none;
}
table.hikashop_product_characteristics_table div {
    display: inline !important;
    padding-left: 5px; // optional
}

Regards

Last edit: 1 year 4 months ago by Philip.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 4 months ago #348657

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;
}

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

Time to create page: 0.104 seconds
Powered by Kunena Forum