Display only color name selected

[MedTN]

Hello,

 

I used this to show name color "{$color.name}"

 

I need to show only selected color name, not all name of color

 

I used this : <div class="none" {if $group.default == $id_attribute} style="display:block!important;"{/if}>{$color.name}</div>

 

i work on loading page but when i change color, it don't work.

 

I use : PrestaShop™ 1.6.0.11

Help please.

Thx

 

[sandipchandela]

which page you want to display color name ?

Have you wrote some javascript code or what?

Mention your issue in detail..

[vekia]

hello

in this case it will be necessary to add additional actions to your color select feature.

you use colors attribute or display them as a dropdown list?

[dedric81]

Hi, i think that i solved with this solution for 1.6.0.14:

 

1) add in product.tpl this code where you want to display color label

{if $group.group_type == 'color'}<span id="selectedCmb"></span>{/if} 

2) Add js code for an additional action in yourtheme/js/product.js , only the line with comment ([HACK])

$(document).on('click', '.color_pick', function(e){
		e.preventDefault();
		colorPickerClick($(this));
		getProductAttribute();
                $("#selectedCmb").text($(this).attr('name'));// display color label [HACK]
	}); 

Work very well in my site

[Alejandrosi]

dedric81 your code works perfectly but there is a small change I would implement: when you click on the product page there is a default color already selected but with your code the color name does not appear until you click on the color grid. 

 

Would it be posible to show the color name when the product page is loaded the first time?

 

Hope I was clear! 

[defuzed]

I don't use color pciker so i didn't test this, but it would seem to me that you just have to add 

$("#selectedCmb").text($('.color_pick.selected').attr('name'));

to the $(document).ready function in product.js

Edited May 8, 2015 by defuzed (see edit history)

[Alejandrosi]

Hi defuzed and thanks for your quick response. I tried your code but it seems to show the first color in the list instead of the default one. I would like to share an image to be more clear but I can´t find the way to add an attachment in this awful forum.

[defuzed]

hm ok, probably the selected class is being changed after the text of "selectedCmb" is set. Try putting the line i posted above in 

$(window).load(function() {
  $("#selectedCmb").text($('.color_pick.selected').attr('name'));
});

[Alejandrosi]

I don´t have the $(window).load(function() part in the product.js but I guess it has something to to with the following part of the js. Please let me know and thans again!

if (original_url != window.location || first_url_check)
	{
		first_url_check = false;
		url = window.location + '';
		// if we need to load a specific combination
		if (url.indexOf('#/') != -1)
		{
			// get the params to fill from a "normal" url
			params = url.substring(url.indexOf('#') + 1, url.length);
			tabParams = params.split('/');
			tabValues = [];
			if (tabParams[0] == '')
				tabParams.shift();
			for (var i in tabParams)
				tabValues.push(tabParams[i].split(attribute_anchor_separator));
			product_id = $('#product_page_product_id').val();
			// fill html with values
			$('.color_pick').removeClass('selected');
			$('.color_pick').parent().parent().children().removeClass('selected');
			count = 0;
			for (var z in tabValues)
				for (var a in attributesCombinations)
					if (attributesCombinations[a]['group'] === decodeURIComponent(tabValues[z][0])
						&& attributesCombinations[a]['attribute'] === tabValues[z][1])
					{
						count++;
						// add class 'selected' to the selected color
						$('#color_' + attributesCombinations[a]['id_attribute']).addClass('selected');
						$('#color_' + attributesCombinations[a]['id_attribute']).parent().addClass('selected');
						$('input:radio[value=' + attributesCombinations[a]['id_attribute'] + ']').attr('checked', true);
						$('input[type=hidden][name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
						$('select[name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
					}

[defuzed]

nono, it's quite possible there is no window.load function in your product.js , just try adding the block i posted as is at the end of the product.js.

 

All the $(window).load function does is execute whatever is in it AFTER everything lese in the page has been loaded. So what this does in your case is wait until everything else on the page has been loaded (for instance adding "selected" class to the default color) and then get that color's name to place into your text element.

[Alejandrosi]

Works great now. Thank you very much for you help! It´s really appreciated

[Guest]

Nice hack dedric, thanks for posting it! And defuzed, good call on the (window).load function - thanks for your help!

[Alberto Fernández]

Hi, i think that i solved with this solution for 1.6.0.14:

 

1) add in product.tpl this code where you want to display color label

{if $group.group_type == 'color'}<span id="selectedCmb"></span>{/if} 

2) Add js code for an additional action in yourtheme/js/product.js , only the line with comment ([HACK])

$(document).on('click', '.color_pick', function(e){
		e.preventDefault();
		colorPickerClick($(this));
		getProductAttribute();
                $("#selectedCmb").text($(this).attr('name'));// display color label [HACK]
	}); 

Work very well in my site

 

Yup, like a charm!

[ajensen27]

For some reason this isn't working for me. Can you guys check my .js and .tpl files to make sure I did everything correctly? Thanks!

Product.zip

[ajensen27]

It wasn't working for me because of this module http://addons.prestashop.com/en/12352-advanced-display-combinations-attribute-in-stock.html

 

Shoot, cause I need both to work. Emailed the developer.

Edited March 13, 2016 by ajensen27 (see edit history)

[Clay7]

What about this when you have 2 color pickers available? For example color and cable color?

For me it is now displaying just one text, and not two. I guess because the JS code only works for one color picker?

[jumbojazz]

How to do the same for PS 1.7?

[Josecm]

Please, how it should be for Prestashop 1.7?

 

I've tried it but it does not work.

 

Thanks in advance.

[Josecm]

nobody knows?

[andrej981]

Hi.

Can anyone please tell me how can I have drop down menu and color picker on product page for color attribute? In BO I can select only one drop down or color picker, there is no option to show both. I need both so custumer can select color via picker or drop down menu. Or if is possible to show selected color name.

Im running prestashop 1.6.1.4.

Br Andrej

[CJV]

En 20/5/2016 a las 2:21 PM, Clay7 dijo:

What about this when you have 2 color pickers available? For example color and cable color?

For me it is now displaying just one text, and not two. I guess because the JS code only works for one color picker?

Hi Clay7.

Have you found any solution to this in PS 1.6.1.23?

I have 2 or 3 color pickers available in some of my products and I want to show the selected attribute in any color picker (see screenshot).

Any help?

[oncle]

Sorry, I can't get it to work for me. I follow all the steps and it stays the same.
First I do what dedric81 says, then what defuzed says and I don't get it.