Jump to content

Display only color name selected


MedTN
 Share

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

  • 2 months later...

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

  • Like 2

Share this post


Link to post
Share on other sites

  • 4 weeks later...

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! 

  • Like 1

Share this post


Link to post
Share on other sites

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 by defuzed (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'));
});
  • Like 1

Share this post


Link to post
Share on other sites

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']);
					}

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

  • 3 months later...
  • 6 months later...

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!

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 2 months later...

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?

Share this post


Link to post
Share on other sites

  • 1 year later...
  • 1 month later...
  • 3 weeks later...
  • 1 year later...

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

Share this post


Link to post
Share on other sites

  • 1 year later...
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?

color selected in any color picker.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More