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 9 hours 3 min 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 9 hours 3 min 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 9 hours 3 min 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!)

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.

Proud member of the:
Irish Internet Association

phone-number.png