4 Antworten zu diesem Thema

[nickh]

Hi,

 

I'm trying to modify Views\Product\_attributes.cshtml to be able to display a color box from the color picker product attribute in a drop down list, alongside the color name (e.g like shown in the attached file), instead of just displaying each box color next to each other (which becomes a problem when you have a lot of different color choices!).

 

I can see that this works when you create a product link attribute, but not when using the color picker and a simple link.

 

I understand that it is invalid HTML to put a div element inside a <select> option element, so I'm guessing this must be done using javascript.

 

Please could you advise how this can be done?

 

ALSO...I think I've found a related bug...

 

If you configure a simple product attribute combination to associate a color picker value with an image, the main image is changed when a color is selected - This works perfectly on a desktop device, but doesn't do anything on a mobile device (the main image remains unchanged).  Is there a quick fix for this?

 

 

Many thanks,

Nick

Angehängte Bilder

•  ColourPicker.PNG   14.31K   0 Anzahl Downloads

[nickh]

Sorry - I've just tested the potential mobile bug on your demo site and I'm unable to reproduce it, so it is probably due to the other bug that I thought I had found (http://community.sma...ascript-errors/).

 

However - are you able to provide a solution for displaying the color block inside a drop down list?

[nickh]

Anyone have an idea about how to implement the drop down with a colour block (see attached picture)?

[Murat Cakir]

What you ask for is rather sophisticated client-side scripting. You should use the select2 jQuery plugin, which is already included in all frontend pages.

 

Approach:

1. Build a regular HTML select element.
2. Add any extra information as data-* attributes on option level (e.g. <option data-color="#f00">Red</option>)
3. Initialize select2 on your select element with custom formatters.

Pseudo code:

function formatOption(state) {
	var opt = $(state.element);
	var result = '';
	if (opt.data('color')) {
		result = '<span style="background-color:' + opt.data('color') + '"></span> <span>' + state.text + '</span>';
	}
	else {
		result = state.text;
	}
	return result;
}

$('#my-select-id').select2({
	formatResult: formatOption,
	formatSelection: formatOption
});

[nickh]

Perfect. Thanks a lot.