Images attached to a product atribute

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

I don't know of this has been discussed yet but I need some way to attach an image to an attribute i.e. colour. I've done this before on other carts so I guess its a pretty common thing to do. Whats needed is

- Some JS for changing the image when the attribute is changed
- Show the appropriate image in the cart
- the default would go off the default for that attribute

I guess I'll have to write something if the facility isn't there, but any ideas as to a good approach?

I guess whats needed is a way to map attribute values to images on a per product basis. So ether store this in the DB (somewhere like product_options) or use some sort of file naming convention. (which is bit of a hack). Something easy for the JS to read as switch quickly...?

Any thoughts on this before I hack together something?
--

under Too Much Information

------------------

PREVIOUS REPLIES:

mikejoconnor:

I started thinking about this the other day. The major issue I envisioned was cascading attributes. It would be rather easy to just do a color adjustment, but if you have a desk lamp and floor lamp, each with 4 colors, it would be nice to be able to change the image. However if you offer a camera with a 512mb flash card, or the option to upgrade to a 1gb flash card, you may not want to display another image.

I thought you could add a 'separate image' to the attributes page
** The following is just my brain storming, I haven't evaluated it **

<?php
function attribute_image_hack_form_alter($form_id, &$form){
  switch(
$form_id){
    case
"uc_object_attributes_form":
      foreach(
$form['chosen_attr'] as $key => $value){
       
$form['chosen_attr'][$key]['image'] = array(
         
'#type' => 'checkbox',
         
'#default_value' => variable_get('uc_attribute_images', 0)
         );
      }
      echo
var_dump($form['chosen_attr']);
    break;
       
  }
}
?>

Then on the adjustments page you could provide an upload field for that image
<?php
   
case "uc_product_adjustments_form" :
     
$form['#submit']['uc_attribute_images'] = array();
     
$form['table']['head']['#value'] .= '<th>Image</th>';
       
//add a image upload field to each attribute
     
foreach($form['table']['body'] as $key => $value){
        if(
is_numeric($key)){
           
//add if change image is selected on attribute page
         
$form['table']['body'][$key]['image']= array(
           
'#type' => 'file',
           
'#prefix' => '<td>',
           
'#sufix' => '</td>',
          );
        }
      }
    break;
//uc_product_adjustments_form
 
}

}
?>

As far storing and changing the image goes, I was looking at the uc_product_adjustments table. The adjustment key seems to be saved as a serialized array as uc_product_adjustments.combination.

When a new option is selected, we could have jquery could submit the form(there's a nice jquery plugin for this) to a function that would return the new image url.

CpILL:

Yes but,

As is the case in the rag trade, you usually have size + colour attributes, for which the adjustments page (quite rightly) generates an entity for every combination. So if you have 5 sizes and 3 colours you need top upload 3 images 5 times each, which is really boring. This gets more complicated when you have to import via CVS Sad

The adjustments table is a mess at present. The serilaised "combination" column is an array of the attribute combination for that row in the adjustments table, which means you can't use it on any SQL cross referencing, which you might do in this case with an many-to-many table between image nodes (via imagecache), which would be one solution. After a big DB design discussion, Lyle knows the path but as we all know "there is a difference between knowing the path and walking the path [Neo]"

Also in that discussion it was brought out that each time an attribute is associated with a product instance a copy of the 'uc_attribute' table is copied to the 'uc_product_options' table (see: even more figures), so each product node has its own copy of the attributes to play with (but sadly the table doesn't have its own primary key to make it easy to associate directly with), which is a powerful idea and makes Ubercart unique (as far as I know) in the way it models product attributes.

So thats how I was thinking of tacking the issue. I guess then if you do want a different picture for each combination of attributes you'll have to associate with the adjustments table, which as you mentioned, has an ugly primary key setup, but you can do as I did with the Inventory API and use the SKU and cross your fingers the User doesn't have duplicates.
--

under Too Much Information

--

suffering from too much information

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Good stuff, actually, i was just about to start on this today. Having thought about it a bit more my approch will involve:

1. hook_form_alter(uc-object-options-form) to add a file upload for each option (although this seems a bit messy... any Interface suggestions? Maybe a new LOCAL_TASK altogether?). GUess this would make an entry in the {files} table for the image and a table (something like {uc_product_option_images}) would associate it with the {uc_product_options} table.

2. Some jquery work would be needed to change the large image when someone changes the attribute value with the attached image

3. Some how hook into the displaying of the product in the cart so that it used the thumbnail corresponding to the attribute selected (is there a hook for this?).

have to think about CSV importing when I get there, but I imagine there would be some hook to allow the this module to affect the imported CSV data.

--

suffering from too much information

Posts: 88
Joined: 08/07/2007
Bug FinderGetting busy with the Ubercode.

hook_nodeapi() ?

This allows you to modify a node during various portions of the product load.

Also, I ran across a form ahah frameworkmodule the other day. Some of this will be integrated into drupal6, but until then, this looks promising. I believe you can set for actions, handlers, and the location the update will be applied.

Posts: 476
Joined: 08/13/2007
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.Internationalizationizer

Is the work about javascriptly change the picture, price, etc.... when an attribute is selected progress ?

I'm interested with the idea and I would like what was already done.

Posts: 59
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Has anyone continued any work on changing the image when a particular attribute is changed? I noticed there is a module that updates the price, but I haven't seen anything with updating the image. Like mentioned above, I am going to have an attribute colour, and on changing of the colour, I want to be able to show an image with the product in that colour.

I saw that one of the problems might be the fact that you would possibly have to upload the image for each set of attributes. Basically, if you have colour and size, then there will be a new match-up for each colour in each size. Maybe a solution would be to have an area where attribute photos can be loaded, then by using a dropdown for each 'match-up' you can select which image to use, if one is not chosen, then the image doesn't change.

Anyway, maybe this is in the works already?

Cheers,
Steph

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

ya, I implemented something like this for a client. You have to first import all the images into the {files} table (via the image module say) and then you can select it.

Haven't decided whether to upload this for free or charge for it (as both require support). You can see an example of it working here:
http://melissaaustralia.com.au/shoe/severine

--

suffering from too much information

Posts: 4368
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

<off topic> That's a great selection you have there, CpILL... image selection of attributes, image change, availability checking... fantastic. Laughing out loud </off topic>

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Ya, just goes to show you what blood, sweet and coffee can produce Smiling It was tricky making the ajax stock check worked after the image replace but it just forced me to be as generic as possible with each module that interfered with the product details page.

I guess if UC 1.0 comes out I'd have to test to see if anything stopped working before upgrading. Overall I'm glad I did it with UC Smiling

--

suffering from too much information

Posts: 2
Joined: 01/09/2008

CpILL, please help me! Smiling How you add images for atribute on your site? (sorry for my bad English)

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

I wrote a specisl module to do it. I havn't relised it yet as I might make it avaiblable for sale once I setup UC on my company site and offer support there for it. Next couple of weeks (after a meeting or two).

If your interested in buy lesve s comment here and if there is enough interest then I'll try snd speed things up

--

suffering from too much information

Posts: 2
Joined: 01/09/2008

Smiling how much? And let me see those module in work please

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Scroll up

--

suffering from too much information

Posts: 121
Joined: 08/07/2007

depending on the price id be interested in this as well.

Posts: 7
Joined: 11/26/2007

When does this module come available, we are building a store and we really need this also!

Posts: 59
Joined: 08/18/2007

Very cool how you've got image selection of attributes working with inventory checking!

Are you using the simple stock levels module?

Posts: 822
Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

I assume he is - he wrote it Smiling

--

<tr>.

Posts: 79
Joined: 08/09/2007
Bug Finder

We've added some code to the uc_aac module to also change the image based on the attribute that is selected. You can see an example on this test site http://otgpublishing.com/node/82 After you change the attribute the image changes. The images are uploaded the same as always. We use the alternative text field for each image and type the name of the attribute.

--

Biodiesel * (ubercart + drupal) = Sundays Energy

Posts: 46
Joined: 11/22/2007

I'm interested in this as well, what's the latest news on it?

Posts: 4368
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

webmasterkai wrote:
We've added some code to the uc_aac module to also change the image based on the attribute that is selected. You can see an example on this test site http://otgpublishing.com/node/82 After you change the attribute the image changes. The images are uploaded the same as always. We use the alternative text field for each image and type the name of the attribute.

Looks great! Laughing out loud I do see some jumping around, maybe since I don't have all the images loaded? Perhaps you can do the large image replacement before emptying the image div?

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Well, I was thinking that...

1. supporting these modules is a lot of work so...

2. I should sell them and get some money for my time...

3. but its much too much work while UC is still in Beta and its API is changing constantly (which means I'd have to change code constantly yo keep up, which would make the price too high as I'm spending man hours adjusting/rewriting code).

4. So I'm going to wait till Version 1.0 is out then make this work for that version and only upgrade to official stable versions from then on.

I'm still dubious as to whether this will still be worth my while, but I guess I can adjust the price based on how many hours of support I doing.

So thats the latest on this module and all the modules I have developed for UC thus far. Check back when UC hits 1.0

--

suffering from too much information

Posts: 23
Joined: 01/16/2008

@webmasterkai
Could you post your code?
thanks

Posts: 28
Joined: 02/28/2008

UC 1 has been released. Any updates on this? Thanks.

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Ya, I might have a go at it since I'm in desperate need of some cash right now and have free time to do it. I'll post back here when I get it going.

--

suffering from too much information

Posts: 160
Joined: 12/28/2007
Uber DonorBug Finder

CpILL wrote:
...I'll post back here when I get it going.

I like the feature, please don't forget to post your donate button as well Eye-wink

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Donate? I was thinking of selling it with Ubercart. I gotts'da pay the rent some howz man!

--

suffering from too much information

Posts: 171
Joined: 08/13/2007
Cool profile pic award.Getting busy with the Ubercode.Internationalizationizer

@cPill:

Hi, it seems like you got something we all want Eye-wink

Be specific, please tell us what it would cost to make this freely available as a contrib. We can pool up here to gather your rent! I do not want to push you, but sooner or later someone else will do this, it's on Ryans todo list for example.

I'm in, only if it will be available as a contrib.

Kees

Posts: 128
Joined: 08/12/2007
Bug FinderGetting busy with the Ubercode.

I'm in a real need for this too.

please let us know when it will become available.

thanks

Idan

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Hell, if its on Ryans todo list then its as good as done and I'll leave it be. Its not worth doing if it becomes a contribution because whos going to support it? I figure if you have a job that needs it then you have a business case and can pay for it, don't you. So you pass the cost onto the client (unless of course you are the client...)

I'm starting to work in Python now so its becoming harder and harder for me to go back to PHP, but if I find some time then I'll have a go at it. I'm sure Ryan will bang something out before then.

--

suffering from too much information

Posts: 4368
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

Whoa... don't know how it got on my to-do list. Sticking out tongue

I know sometimes I compile development lists, but I don't usually mean I'm going to do them all. For this particular need, I'm curious if you guys have already reviewed http://drupal.org/project/uc_option_image or if that's just not what you need. Puzzled

There's a screencast from the project page you can watch to see how it works.

Posts: 59
Joined: 08/18/2007

uc_option_image has some great features. It has a great interface that makes it easy to attach images to attributes.

Unfortunately, I haven't been able to use it for 2 reasons.

First, once the module is activated, a dummy image appears for all product types. But I have a product type set up that does not have images attached to attributes.

Second, it has proved quite difficult to theme. View this post: http://drupal.org/node/271708

Thanx

Posts: 6
Joined: 03/10/2008

TimK: Right. Additionally Uc_option_image use image cache 2, and Ubercart support only image cache 1.x. If you want use ubercart image system, uc_option_image not work.

I think that this feature is very important for many case. What we can do that we get one powerful module? Now are tree modules, one is not work perfectly and two are not public.

Posts: 171
Joined: 08/13/2007
Cool profile pic award.Getting busy with the Ubercode.Internationalizationizer

@cPILL
Yes, there is budget. How much do you need?

Thanks,

Kees

Posts: 6
Joined: 03/10/2008

Hi!

We modified uc_option_image module to work with image cache 1.x. Also we modified Javascript code work with our custom node-product.tpl.php. I will public this modifications and helps for node theming on next week.

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Hey,

That seems very similar to what I did. I used the imagecache module as well (imagecache rocks!) I don't make a settings page, which I guess I should so you can choose which imagecache pre-set you want where.

The main difference is that I took the images from the files table, which meant you had to have something like the image module installed, do mass import of images and then you would get a filtered list (just the original image names) to choose which image you wanted for which attribute (see attached PNG).

If there was even one image chosen for one option of an attribute then the option select would be replaced by a ratio button set (the radio button hidden) of image thumbnails. (as you can see here: http://www.melissaaustralia.com.au/shoe/donna )

As I need the work right now I'll download the latest Ubercart and see if the module works. I developed it while UC was in beta and I'm not sure if the way it handles product attributes has changed. Also it integrated with the shopping cart so you could see the right thumbnail for the selected attribute when looking at the shopping cart.

I'll look at it over the weekend and get back to you here.

AttachmentSize
attr-opts.png40.41 KB
--

suffering from too much information

Posts: 59
Joined: 08/18/2007

danke!

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

No wuckers!

I had a quick fiddle over the weekend and it seems most of the code sill works. I would just like to make it easier to upload images, perhaps with an inline file input as in the module Ryan was suggesting.

I also had a think about pricing and licensing. For the later I'd release under a CC not-for-profit licence and for commercial use (every one but government and NGOs) sell an licences like Jeroen Wijering, for the same prices so 20Euro per domain type thing.

I'll have to setup some sort of shopping cart (any ideas?) and a payment gateway (for Euros, more of a problem, any ideas?) and then we're in business. Would be nice if ubercart.org would do this for us *wink wink*.

Only hitch is I have the family coming to visit on Wednesday for 2 weeks so might not get much of a chance to get this whole thing happening until after that. SO if that overshoots your deadline, send me a private message here and we can work something out. Otherwise I'll post back here when its "fully operational".

--

suffering from too much information

Posts: 47
Joined: 09/20/2007
Uber Donor

looks very promissing.

Posts: 171
Joined: 08/13/2007
Cool profile pic award.Getting busy with the Ubercode.Internationalizationizer

@cPill
Hmm, watch out for law issues. Everything 'derived' from GPL2 related work that is distributed in any way IS GPL2 itself. It's not very clear what is 'derived work' in a particular case, but I think you will have a hard time proving it's not if you have to (that's why not many do it this way for Drupal code, and why Joomla is moving to GPL2).
I personally dislike this way of doing it the way you propose though. It so not in the open source spirit. Anyway, I can understand that you want your efforts to pay off, no offense Eye-wink

Posts: 171
Joined: 08/08/2007
Early adopter... addicted to alphas.Getting busy with the Ubercode.

Actually, I'm not basing my code on anyone else's code. I started from scratch and its all original code. Even implementing hooks does cross over because the function names are completely unique. My code does rely on anyone else to function, other code relys on it to simply be there (pulled rather then pushing).

It happens to work in conjunction with Ubercart code, not on top of it, as PHP works with Apache, which works with whatever OS its running on, all with separate incensing. Also, because its not based on anyone else's work, who is going to sue me?

If you don't like it you don't have to use it buddy Eye-wink

p.s. isn't Ubercart a shopping cart system, and there its "spirit" is about selling things? I believe this is the blurry line within the UC community. Perhaps you can start on discussion on the "spirit" of UC Laughing out loud

--

suffering from too much information