Add color label name to identify the atribute color

[iceguitar]

Hello, 

I'm looking how to modify the color attribute and make the label name appears at the top of the color at the product page. Somebody can help?, I can not find any solution.

Please, see the attachment, second image is the result I'm looking

Thanks a lot!

[the.rampage.rado]

The name should be possible to be pulled and displayed in the theme as it's saved now.

Another good enhancement would be the ability to 'group colors'.

Something like:

Group: Blue - sky blue, royal, brand1_blue, brand2_blue, some_other_blue., Yellow - sun_yellow, very_hot_lava_yellow, neon_yellow, solar_shine, White - cream, very_white, Green - light green, leaf green, dark green, etc.

And then have those groups displayed in the layered navigation module for selection.
That way the customer can search for all 'blue', 'red' or 'yellow' products despite that the majority of them use 'brand colors'.

The two current workarounds are to have every product in generic color name and # or the layered filter to have hundreds of options showing only 2-3 products each.

Of course this means a general rework of core, modules and theme.

[datakick]

17 hours ago, iceguitar said:

Hello, 

I'm looking how to modify the color attribute and make the label name appears at the top of the color at the product page. Somebody can help?, I can not find any solution.

Please, see the attachment, second image is the result I'm looking

Thanks a lot!

On product page you can  function getCurrentCombinationAttributes and use it to find color name in javascript variable attributesCombinations

Something like this:

const selectedColorName = getCurrentCombinationAttributes()
	.map(id => attributesCombinations.find(obj => obj.id_attribute == id))
	.filter(obj => obj.group === 'color')
	.map(obj => obj.attribute)
	.join(',');

console.log(selectedColorName);

 

[iceguitar]

Thanks, but where do I need to change this ? Should I add a new code?

I attached the js file located in theme folder.

[iceguitar]

On 5/3/2024 at 3:20 AM, the.rampage.rado said:

The name should be possible to be pulled and displayed in the theme as it's saved now.

Another good enhancement would be the ability to 'group colors'.

Something like:

Group: Blue - sky blue, royal, brand1_blue, brand2_blue, some_other_blue., Yellow - sun_yellow, very_hot_lava_yellow, neon_yellow, solar_shine, White - cream, very_white, Green - light green, leaf green, dark green, etc.

And then have those groups displayed in the layered navigation module for selection.
That way the customer can search for all 'blue', 'red' or 'yellow' products despite that the majority of them use 'brand colors'.

The two current workarounds are to have every product in generic color name and # or the layered filter to have hundreds of options showing only 2-3 products each.

Of course this means a general rework of core, modules and theme.

Thanks, for the reply

[datakick]

2 hours ago, iceguitar said:

Thanks, but where do I need to change this ? Should I add a new code?

This is not a simple customization where you can change one line and it will work.

You need to look into your theme, find out relevant elements and attach onchange event listener to them. In event callback function you need to perform dom manipulation = figure out what colour is currently selected (see code above), and change the label of input group accordingly. 

If you are unsure how to do that, then you need to either study on the topic, or hire somebody to do that for you.

[iceguitar]

10 hours ago, datakick said:

This is not a simple customization where you can change one line and it will work.

You need to look into your theme, find out relevant elements and attach onchange event listener to them. In event callback function you need to perform dom manipulation = figure out what colour is currently selected (see code above), and change the label of input group accordingly. 

If you are unsure how to do that, then you need to either study on the topic, or hire somebody to do that for you.

Thanks for your help