Ubercart - Option Images installs!

Shane and I had a tough enough day yesterday getting the Ubercart Option Images Module (uc_option_image) to work on an eCommerce site we are developing for a client in Dublin; plenty of head scratching with some mild cursing - but we finally got it running very nicely indeed and have decided to write a few notes on the process in the hope that they might help someone else in a similar pickle.

'Option Images' is a really nice module that allows you to supply an image for each of your product attribute options. When viewing a product the image changes as the visitor chooses options - very handy for product colours, etc.

The problem is that at the time of writing, the Ubercart Option Images Module 6.x-1.4 as presented and recommended for download on its official page just doesn't work - in fact it won't even install!

So, to cut a rather long story short, we found that the update in this post (#17) does work:

http://drupal.org/node/550344#comment-2113120

So ignore the 'official' install and use this one instead, big hats-off to the all on this thread (and many others) who managed to get it whipped into shape - you're life savers lads!

To install the module download uc_option_image.zip from post #17 and extract it into your 'sites/all/modules directory'. You will need to have the ImageCache module already installed.

Once you have enabled it, go to 'Store Administration / Configuration / Attributes' (/admin/store/settings/attributes). Here you should enable Option Images for the desired products. You will also need to select an image cache preset that will be used for displaying the images on the product display page.

Now head over to one of the products for which you have enabled Option Images and hit 'Edit', go to the 'options' tab - you should see a new image field and browse button added to the end of each option. We found that this extended table didn't work with our drupal template and wouldn't display correctly at all. To get around this problem we enabled the default 'garland' theme for the administration pages. If you encounter this problem, the admin theme can be set this can be set on the 'Administer / Administration Theme' page (admin/settings/admin).

Upload an image for each option, once uploaded an image preview should be displayed alongside each option.

It is important that the product's first attribute set that is enabled for Option Images is not marked as 'required', for some strange reason if it is the option image display won't work. To check this click on the 'Attributes' tab when editing the product. The other attribute sets can be marked as 'required'.

If you are using the default ubercart product display, the option images should now be displayed when viewing the product, they should change as you select different product options (the default product image isn't replaced the option image is displayed in addition to it)

We find that it is hard to get our products displaying nicely just using the default ubercart product display stuff - we normally provide a contemplate (Content Template) to have complete control over how products are presented. In this way we can get the product display to match up with our target web design. If you are using an alternative template the attribute option images will not be automatically shown, instead you have to manually insert a bit of code to add the image. The following code should do the trick:

print $node->content['option_image']['#value'];

Place the code into your template at the position you want the option images to show up.

Hopefully after all this the attribute image should be working. Thanks again to all who put the work into patching up the module! When the module is working it is fantastic, and it is well worth the effort to get it installed and configured - do let us know if you have success or if you encounter other hitches that are not detailed here.

uc_option_image works
Stranger
Stranger's picture
:-/

HUmm,

it doesn't show the right colour in the shopping cart page. Also, it uses the filename in the {files} table to store 3 IDs. Seems like a nasty hack, but I guess it works.

I was looking for something that would replace the colour selector in on the Add-to-cart form, as this is the standard way designers think (I think).

Still some hints here on how to hook into Ubercart...

Joined: 10/10/2008
User offline. Last seen 6 days 22 hours ago.
Hi Stranger, The solution

Hi Stranger,

The colours on the shopping cart page are set by the Product Attributes. These feed through to the options tab, where you need to enable each one and then set the image to correspond to the choice.

The solution might not be perfect, (we didn't write it!), we're merely letting people know how to get the module working, as there's a fair but of confusion on the Drupal Forums as to how to get it working at all.

Hopefully a better fix will be released for the module soon!

Thanks for the feedback though!

Shane

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

Award Winning Web Design Cork : Pride Web Design Cork

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

Stranger
Stranger's picture
themeing

Hey,

I'm loving this module. Took me ages to figure it out. I'm extremely new to drupal. This is the first website I have ever done. I am wondering how to place
the product description beside the option image on the product page. Any help would be hugely appreciated

Here's my website

www.alanleecollection.com

Stranger
Stranger's picture
c_option_image and galleria intergration

Firstly let me apologise for a split post as i have posted something similar on the uc_option page reference http://drupal.org/node/550344

Ubercart 2 installed with drupal 6.15 and installed modules: - galleria, jcarousel, light box, views, etc...

I have created an attribute with several options of colour, i.e. red, black, blue, etc and want to display an image after each option has been selected from the drop down menu in the attributes tab. Currently when I select an attribute option it displays an image under the jcarousel thumbnails.

Please attached picture for more details.

There is one issue, is that I am using galleria for my images and jcarousel for thumbnails.

Is there any way to make uc_option_image and galleria work together so that the images from uc_option_image are used as the thumbnails for the galleria display?

Please let me know, thanks in advance.

Thanks.

Joined: 10/10/2008
User offline. Last seen 6 days 22 hours ago.
That's a tricky enough one

That's a tricky enough one Stranger, I haven't had a go of trying to link the two modules but i'd say the result would give a really nice effect.

Option_image was tricky enough to get working on it's own so it could be very tricky i'd say. In fact it's one of those rare Drupal modules that should actually carry a health warning for developers. When it's working it's great but there's a lot of work to be done on it and a fair bit of digging about to find the fixes for the non-working release, that's why we posted how to do it above.

I'll ask Kev if he'd have an idea how your question.

Shane

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

Award Winning Web Design Cork : Pride Web Design Cork

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

Joined: 10/10/2008
User offline. Last seen 6 days 22 hours ago.
Hi Alan, You'll need to edit

Hi Alan,

You'll need to edit the product template and float the product image to the left or right and the description should move along side the image.

very good effort for a first website!

Shane

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

Award Winning Web Design Cork : Pride Web Design Cork

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

Stranger
Stranger's picture
Float product images

Hi Shane,

Thanks for replying. I am unable to find where I could theme the product. Would it be in uc_product.. the theme css file or option images.. I am completely lost. Even with the use of firebug.

Thanks for the support

Alan

Stranger
Stranger's picture
option images

I just want to say a big thank you. This really came in handy.

Stranger
Stranger's picture
it is node-product file

You have to create a file called node-product.tpl in your theme directory.
But print $node->content['option_image']['#value']; is not working for me :( though it works fine without product theming ...

For Shane's reference the basic content of node-product.tpl is something like this

<?php

// Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>

<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

<div id="node">
<?php // default image display  ?>
<div id="image" style="float:right"><img src="<?php print $imagePath; ?>" alt="Title">?></div>
<?php print $node->content['option_image']['#value'];?>
<?php // product title  ?>
<?php // product description  ?>
<?php print $node->content['body']['#value'];  ?>


<?php  // list price and sell price display  ?>
<div id="price">
<!--<p>List Price: <?php print uc_currency_format($node->list_price); ?></p>-->
<p>Starting Price: <?php print uc_currency_format($node->sell_price); ?></p>
</div>
<div id="cartButtons">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
</div>
<!--
<pre>
<?php // this will print the $node array at the bottom of each node take it out when finished ?>
<?php var_dump($node); ?>
</pre>
-->

Stranger
Stranger's picture
also completely lost!

Hello all,

In the quest to fin where to put:

print $node->content['option_image']['#value'];

I've created a node-product.tpl.php file and also node-[product-class].tpl.php
but nothing that I put in these files seems to have any effect!
Is there something I'm missing (obviously!)

Stranger
Stranger's picture
Limit to uploadable images?

Hi all,

Very helpful thread. Managed to get it up and running using your directions however, I've hit a slight snag.

I've built a site where customers can assemble their own gift baskets (hampers I think they're called on your side of the pond.)

Anyway, one basket has 6 attributes, each with 5 options. This means I want to attach a total of 30 images to one attribute. However I when get to about 20, my images stop uploading. I select my images to upload then click save, then the images don't upload. I'm guessing it has to do with a limit the developers set on the module, but I figured I'd ask here before diving into the actual code.

Any ideas anyone has would be greatly appreciated.

Again, great article and many thanks!

Stranger
Stranger's picture
Image upload limits

Is there any reason why the module would limit the number of images you can upload to a single attribute?

They seem to stop uploading once I reach 20.

Any idea why?

Great article and many thanks!

Joined: 08/01/2009
User offline. Last seen 3 weeks 1 day ago.
Hi, I cant't think of any

Hi, I cant't think of any reason and had a quick look at the code an can't find any obvious mention to a limit of 20..... I have never had to use so many images myself so have not hit the problem. Are there any errors being reported to the drupal logs (admin/reports/dblog)?

Stranger
Stranger's picture
Image upload limits

There weren't any errors in the error log. What I ended up doing was adding them to the database manually through the files table as someone did in post 44 of this thread: http://drupal.org/node/550344.

It took me a while is not the ideal solution but luckily I don't need to add these kinds of products very often.

Thanks again!!

Stranger
Stranger's picture
Hazaah!

I found a way around manually adding your option images to your database: Upload your images one attribute at a time.

Example: I have a product with 4 attributes, each with 10 options. So we're talking about 40 different option images. Rather than add all the attributes through the add attributes form then try to upload all of my option images, I do this: I add the first attribute, upload my option images, then remove the attribute from the product. Then I repeat this step until I've added all of my images. Then I go back to my add attributes form and add all four of my attributes at once and voila... All the images are still in tact.

I hope this saves someone alot of time and fumbling with SQL cause it sure did for me!!

Stranger
Stranger's picture
Option Images not displaying in /admin/store/settings/attributes

Great article - we got this working thanks to you.

Just wanted to point out (cause this messes me up too often), but if you're not seeing any uc_option_image stuff on the page:
/admin/store/settings/attributes)

then it's because you need to set the proper user permissions (/admin/user/permissions) to allow yourself to see it.

Thanks again!

Stranger
Stranger's picture
Is there any way to show the correct image in the checkout cart

Sir,

I am using the post number #17 modified version of the option image module as depicted in your blog.After setting up the module following your instructions it is working really good on the product (node-product.tpl.php) page. However when I go to the cart page / checkout page by hitting the "add to cart" button,
the correct color of the image is not showing up. I guess this has got nothing to do with the option image module because the ubercart uc_cart module is using the first image of the images that is uploaded to the image_field cck field that comes with the default ubercart installation.

Is there any way to override the default uc_cart behavior in the template.php file so that it picks the correct image from the option image module and display it in the cart. I have a hunch that this should be one of the functions in the uc_cart.module. But I can't figure it out since I am a new comer to drupal,ubercart and php. I was also thinking about if the devel module and the dsm() function would help but could not contemplate how or where to start. If you could point me how to find or detect such things I will be highly obliged to you.

Thanks and regards,

Subhasis

Stranger
Stranger's picture
Still having problems with image changing

Hi,
Im sorry to take up your time but, I have follow your description and can see the image field and have added images, but when I select them from the drop down box they dont change? this is my first website and this is now driving me nuts as im not sure if it's me order something I have not got right in the setup?

thanks in advance
Andy

Joined: 08/01/2009
User offline. Last seen 3 weeks 1 day ago.
Hi Andy, This is a nasty type

Hi Andy, This is a nasty type of problem to have on your first website! I am just trying to think what would stop the images from changing, one thing might a javascript problem.

If you are using Fire Fox, try using Fire Bug (http://getfirebug.com/) to see if there are any javascript errors being reported on the page either before or when an item is chosen from the dropdown.

If there is an error it might point a way forward...

Kevin.

Stranger
Stranger's picture
Re: $node->content['option_image']['#value']; is not working

This might help others having similar problems.
The selector used to grab the image element is found in uc_option_image.js.

The function begin like this:

UCOI.switchImage = function(aid, input, size) {
  var pid = $(input).parents('.node').attr('id');
  var nid = pid.replace('node-', '');
  var oid = $(input).val();
  var image = $(input).parents('.content').children('img.uc-option-image');

pid is the product id, nid is the node id and oid is the option id.
The image element used to switch is looked for in the immediate children of a parent of the input element (e.g. select color, size) with class 'content'.

So when you build the node-product.tpl.php make sure that you output $node->content['add_to_cart']["#value"] one level inside an element with class 'content', and that this element has the option selection inputs as one of its children.
Here is an example:

<div class='content'>
<?php print $node->content['option_image']['#value']; ?> <!-- immediate child of this div.content -->
<div class="prod_cart">
  <!--show add to cart button-->
  <?php print $node->content['sell_price']['#value'];  ?>
  <?php print $node->content['add_to_cart']["#value"]; ?> <!-- input select in this output is one of the children of this div.content-->
  <!--/show add to cart button-->
</div>
</div>

Or else just modify the selection query in uc_option_image.js.
e.g. : var

image = $('img.uc-option-image'); /*if there is always a single product on the page*/

Fabrice @ KF Web Development

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can use BBCode tags in the text.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.

Pride on FacebookPride on TwitterPride on TwitterPride on Twitter

Join Our Newsletter

* indicates required

Irish Internet Association

finalist.png
phone-number.png