Home » Forums » Ubercart » Support

Tshirts question

Submitted by tallryn on Wed, 10/01/2008 - 15:28
tallryn
Posts: 2
 Joined: 04/24/2008

This is my problem:

So, I'm developing a site for a t-shirt company. They sell each design on 6-8 different color t-shirts. What is the best way of presenting different colors on the same page? I'm looking for a sollution that will look good and work with all browsers/devices (iPhone, etc). Any ideas?

And sorry for my English ;]
Mike
permalink #1 Wed, 10/01/2008 - 16:22
cYu

Posts: 301
 Joined: 11/19/2007
Bug FinderGetting busy with the Ubercode.

You can make color an attribute for your product, add each color as an option and then if you want a different image to show up whenever the colors are chosen you can try using http://drupal.org/project/uc_option_image

permalink #2 Wed, 10/01/2008 - 16:58
tallryn
Posts: 2
 Joined: 04/24/2008

This was my first choice ;] But, first of all this module isn't supported anymore, and secondly it doesn't work very well. I was thinking about making a slide show or something like that (http://drupal.org/project/cck_multimage) but it doesn't work with imagecache 2.0. Any other ideas?

permalink #3 Thu, 10/02/2008 - 05:38
j0rd

Posts: 33
 Joined: 07/16/2008
Getting busy with the Ubercode.

Option Images would honestly be your best choice and while it provides the frame work, you will need to code some stuff around it to make it work how you want. I've used to quite succesfully on a project to allow images to be attached to options. Take a peek here: http://oilpaintingexpress.com/build . That amount of customization required me to overwrite the themes for the attribute fields though. All the option images you see there are taken inputted with the Option Images module.

cck imagefield will be your second option. Imagecache 2.0. Again, you're going to have to code it to get it to do what you want. Below is a site which could do what you want. Feel free to steal the JS.

Site in Question:
http://civilcitizen.gocubeco.com/tshirt/works-for-jerks

You could just as easily upload 1 image for each colour and allow the user to view them all...and then choose the attribute they want.

JS in question:

$(document).ready(function() {
   var img_cache  = {};
   // Pre-cache the image
   $('.product_image .imagecache-uc_thumbnail').each(function() {
     img_cache[$(this).attr('src')] = jQuery('<img />').attr('src',
        $(this).attr('src').replace(/uc_thumbnail/, 'product')
     );
   });

   // When you hover over imagecache (IC) uc_thumbnail...
   // ... this code puts IC product in the main product image.
   // When you hover out, it replaces it with the original image.
   // This will not work if you have multiple products on the same page,
   // you'll see the bug. Too lazy to fix, nor did I need to.

   var main_image;

   $('.product_image .imagecache-uc_thumbnail').bind('mouseenter', function() {
      var this_full = $(this).attr('src').replace(/uc_thumbnail/, 'product');
      if(this_full != main_image) {
         main_image = $('.product_image .imagecache-product').attr('src');
      }
      $('.product_image .imagecache-product').attr('src', this_full);
   });
   $('.product_image .imagecache-uc_thumbnail').bind('mouseleave', function() {
      $('.product_image .imagecache-product').attr('src', main_image);
   });

});

--

Freelance Web Design

permalink #4 Sat, 10/04/2008 - 05:47
albies
Posts: 19
 Joined: 01/02/2008

jord in your site
http://civilcitizen.gocubeco.com/tshirt/works-for-jerks
wich module use for images?

is possible also to change images not on mouse over the thumbs but at click,
and also is possible if one click on big image, open the original size image (or thickbox/lightbox) ?

permalink #5 Fri, 10/31/2008 - 02:42
j0rd

Posts: 33
 Joined: 07/16/2008
Getting busy with the Ubercode.

PS: site is live now. http://civilcitizen.com and I don't think your old link works anymore =(

I use imagefield and attach the field to my product...actually I think ubercart gives you an imagefield by default, can't remember. Either way...you want cck imagefield.

Also install the thickbox module and imagecache. Make sure you configure imagecache properly (sane resize values for product/catalog related entries) and setup thickbox to open "per node" instead of "per page" and you'll pretty much receive the functionality you asked for when you visit your "product pages".

After that to edit the format of your product node will will have to play around with CSS / theme overrides or creating your own node.tpl.php template. Probably a combination of all 3 Laughing out loud

If you want different functionality out of the box, you're going to have to teach yourself some jQuery and apply it to your project yourself. Strongly recommended though, as jQuery is a wonderful library and a lot of fun to program in.

Hope the info helps,
Jordan

--

Freelance Web Design