Ubercart Color Attribute

Contrib type: 
Module
Status: 
Uploaded for testing
Moderation: 
Awaiting moderation

Downloads

Compatibility: 
Ubercart 2.x
Compatibility: 
Ubercart 3.x

This module creates an attribute for a product called "Color choice", it allows a user to choose certain colors as options and store the hex value of the color along with the color name to be shown on the product page. So for example if you are selling an item with multiple color options you could use this module to display the color choices in boxes on the product page. Now with added jquery to allow clicking of the color box.

The Drupal 7 version of this module has been adapted by the port by chertzog below and sponsored by David O'Brien. There are a couple of improvements over the Drupal 6 module including; The colour swatches now also show on listing pages, using jQuery color picker (thanks to chertzog), permissions and an admin page to enable choosing the relevant colour attribute to use.


PreviewAttachmentSize
UC Color Attribute UC 2.x (zip)3.53 KB
UC Color Attribute UC 3.x (zip)3.6 KB
davery's picture
Offline
Joined: 02/25/2011
Juice: 12
extend to work on all add to cart forms

Hi,

I modified your color attribute module to provide the color picker on any page with the add to cart from, including views, instead of only the product's node page. The relevant bits of code are here, GPL 2 or later, if you're interested in putting them in your official release. I tried posting this to your page but the captcha did not work no matter how many times i entered it correctly.

The php:
foreach($node->attributes as $value)
{
if($value->name == "colorChoice")
{
/* We have a colour attribute choice */

$attId = $value->aid;
$html = "";

foreach($form['attributes'][$attId]['#options'] as $key => $value)
{
$kexValue = db_result(db_query("select hexValue from {uc_color_attribute} where oid = %d limit 1;",check_plain($key)));
if(!empty($kexValue))
{
$html .= "";
}
}

$html .= "";
$form['attributes'][$attId]['#prefix'] = $html;
}
}

The js:

$(document).ready(function(){
$('div.colors-color').click(function() {
var attrId = $(this).attr('attrid');
var oId = $(this).attr('oid');
var exists = $('div.txtmsg', $(this).parent().parent()).html();
var title = $(this).attr('title');

$('select[id^="edit-attributes-"]', $(this).parent().parent()).val(oId).trigger('change');

if(exists){
$('div.txtmsg', $(this).parent().parent()).html('Selected Colour: '+title);
}else{
$(this).parent().before('Selected Colour: '+title+'');
}
});
});

The css:

div#colors-background{
margin:5px;
background-color:#fff;
min-height:30px;
}

div.colors-color{
/*cursor:pointer;*/
cursor:hand;
height:20px;
width:20px;
float:left;
border:1px solid black;
margin:4px;
}

div#txtmsg{
clear:both;
}

Enjoy.

temp's picture
Offline
Joined: 08/02/2011
Juice: 5
Re: Ubercart Color Attribute

i manualy delete atribute called "Color choice"
how to back it again, i try reinstall module - it not help.

i have trouble with this module, when i choice color by clicking on one of color squares, desired color dosent chooze in select box above.

Buro Friesen's picture
Offline
Joined: 10/10/2011
Juice: 13
Not showing colors

I have the UC Color Attribute module installed, have made a set of colors and attached them to a product. But there are no colors showing up when i select a color.

krista's picture
Offline
Joined: 03/22/2012
Juice: 3
Re: Not showing colors

Did you ever resolve this issue? I am having the same problem. The colors appear for a second then they disappear. I have disabled modules that may interfere and changed themes to no avail.

Buro Friesen's picture
Offline
Joined: 10/10/2011
Juice: 13
nope

I never solved the issue, went with the text instead of actual colours.

chertzog's picture
Offline
Joined: 07/18/2012
Juice: 3
Color picker for Drupal 7.

I needed color picker for Drupal 7, so i ported it. I changed the color picker to use jQuery Colorpicker.

AttachmentSize
uc_color_attribute 2.zip 9.44 KB
luketarplin's picture
Offline
Joined: 04/26/2010
Juice: 203
Re: Ubercart Color Attribute

Drupal 7 version for UC 3 now available to download.

andrejro's picture
Offline
Joined: 10/22/2012
Juice: 3
Re: Re: Not showing colors

Confilct with Ubercart Ajax Attribute Calculations. Remove this module and it works

leonblueeyes's picture
Offline
Joined: 01/25/2012
Juice: 23
Can't create an attribute for a product called "Color choice"

First of all, I really appreciate you for distributing this module.
This module will help me greatly to build my e-commerce site. I have been struggling with this module for two days, but I don't know how to configure this module.
I've installed both uc_color_attribute and jquery colorpicker modules. I went to Administration → Store, but I couldn't find any category called "Color choice." Or attribute called "Color choice." Please check the screenshot I attached with this post and educate me what did I do wrong?
Is there any manual for this module?
Thank you very much!!!

AttachmentSize
uc_color_attributes.png 48.41 KB
glynster's picture
Offline
Joined: 04/05/2013
Juice: 8
D7 Module Updated & Working

We required the same feature and could not get the D7 version to work, so our dev team went ahead and updated the module. It now works fully.

You will need the following module:
- jquery_colorpicker

1. Once installed go to: admin/store/products/attributes

2. There will be a new link there called: Manage UC Color Attribute

3. Click on the link and set the attribute you would like to use for the colors.

4. Now go into the Color Attribute Options and edit the colors. Once inside you will see a color-picker so you can set each option.

5. Go to the product and you will see the options available. Make sure you have added the attribute to the product through the node view.

AttachmentSize
uc_color_attribute_D7_April2013.zip 4.67 KB
glynster's picture
Offline
Joined: 04/05/2013
Juice: 8
New Color Attribute D7 Version

Just wanted to let you know there is a new working version for Drupal 7.

leonblueeyes's picture
Offline
Joined: 01/25/2012
Juice: 23
uc color attribute module does not work.

Again, I really appreciate your response regarding my question. However, uc color attribute module does not work as you explain above. As your instruction above, First, I installed uc_color_attribute and jquery_colorpicker modules. Second, I went to : admin/store/products/attributes. Third, I clicked the link called: "Manage UC Color Attribute." Forth, I was supposed to set the attribute I would like to use for the colors, but there was no place to set the attribute. I attach a screenshot, that is related to forth step above, to this post. If you see any mistake according to my performance above, please correct me.
Thank you very much!!!

AttachmentSize
uc_color_attribute_D7.png 12.54 KB
glynster's picture
Offline
Joined: 04/05/2013
Juice: 8
Re: uc color attribute module does not work.

OK first up, do you have the latest version of Ubercart? Did you completely uninstall the uc color and install the new version? Once installed did you run the update script and then the performance cache clear?

I have this same module running on 3 Drupal 7 sites and works like a charm.

Also for your attributes do you have more then 1 and does each one have at least 2 options attached to it.

leonblueeyes's picture
Offline
Joined: 01/25/2012
Juice: 23
Re: uc color attribute module does not work.

Hi,
Thank you for your response. I resolved the problem.
I went to uc_color_attribute.module and changed the line 37:
$options[$attr->name] = $attr->label;
to
$options[$attr->name] = $attr->name;
then now uc color attribute module works very well.

Thanks

hkvega01's picture
Offline
Joined: 09/05/2012
Juice: 82
Re: D7 Module Updated & Working

You would be great if it supports multiple attributes

scot.self's picture
Offline
Joined: 02/11/2010
Juice: 123
release on d.o!?

Any reason this isn't on d.o as a project? also, the tip about using name, not label makes more sense. I'll get back to ya on any feedback now that i'm trying to implement...looks very promising though!! thanks!

scot.self's picture
Offline
Joined: 02/11/2010
Juice: 123
assessment

initial assessment is awesome. simple enough to set up.
- i wonder why display the selectlist (or checkboxes) at the same time as you show the boxes...was there a reason for this decision? easy enough to hide, but i can also see why you'd leave it in order to show price adjustments and such.
- need to be able to add this to more than just one attribute. i'd be happy to try my hand at this if you could give me an idea of where to start in the code to allow this? for our site, we need a primary and a secondary color (2 different attributes)...
all in all, pretty slick. thanks! now get it on d.o already so others can check it out, you can use the issue queue, etc. etc...

Xiomara's picture
Offline
Joined: 12/24/2013
Juice: 6
Re: Ubercart Color Attribute

Drupal 7 version of this module has been adapted from the port down and chert sponsored by David O'Brien. There are a couple of improvements over Drupal 6 module, including: Samples of color now also appear in the list of pages

vijayan's picture
Offline
Joined: 02/26/2014
Juice: 3
Select Multi color

Hi i altered the uc color attribute code to use with multiselection
now you can select multiple attribute by control click the attribute but highlighting the color which is selected is removed by me asper my project need some one can do it having good jquery knowledge

Thanks,
Vijayan G

AttachmentSize
uc_color_attribute.zip 4.14 KB
GregoryThomasFox's picture
Offline
Joined: 02/05/2014
Juice: 39
Colors jump around on product page

Hi,

When having a large number of color options and then selecting a color option on the product page the colors jump around and change position. Does anyone know why this is happening or a possible fix?

scot.self's picture
Offline
Joined: 02/11/2010
Juice: 123
URL

Can you provide a link? It would be easier to figure out that way...it's probably just a css thing.

GregoryThomasFox's picture
Offline
Joined: 02/05/2014
Juice: 39
Fixed

This is now fixed it was due to the display settings of products.

Does anyone know if it is possible to have two colors on one choice.

e.g if a product was black and grey the colour choice would be split with one half being black the other being grey