Custom Product Swatches

10 replies [Last post]

Mon, 08/11/2008 - 21:47

Offline

Joined: 08/11/2008

Juice: 23

Hey All... I am a drupaler but new to Ubercart. I have a client request that I am having a hard time figuring out how to do with this system. She sells baby blankets, and has some predefined options (easy enough), but then she wants to have a page where a customer can potentially customize a blanket with any of the fabrics that she has.

I am having a hard time figuring out logistically how to do this...any ideas out there? Thanks.

Mon, 08/11/2008 - 23:23

#1 View page

bevinlorenzo

Offline

Joined: 08/11/2008

Juice: 23

By the way...

Oh yeah, and by the way. the custom blankets can be any combination of two fabrics. I recently tried to do this with http://drupal.org/project/uc_option_image (Ubercart Option Images) but it will only display ONE image for different attribute types.

I attached what I have so far.

Attachment	Size
custom_blanket_help.png	59.66 KB

Tue, 08/12/2008 - 10:07

#2 View page

Ryan

Offline

Joined: 08/07/2007

Juice: 15422

Re: By the way...

I don't suppose you have any experience altering forms? If so, I believe CpILL posted a store a while back where he his the radio buttons and displayed images in their place that when clicked would mark the correct button. You could do something similar here and avoid uc_option_images altogether.

The bulk of this would be JS code I imagine, though you'd need some way to match up images to options. If they're standard across the site, you might be able to just hardcode it into your JS.

Tue, 09/16/2008 - 07:21

#3 View page

j0rd

Offline

Joined: 07/16/2008

Juice: 452

I am currently doing the same thing.

I'm doing the same thing. I am selling a product which has many attributes each with their own set of options. I much prefer displaying images as the options instead of text.

uc_option_images allows you to attach 1 single image to a option. This is pretty handy. The product object provides access to all these images via $node->option_images_cache and $node->option_images .

Here's the code. This is hackish and probably could be abstracted better, but this is how I'm currently doing it. I'm attaching the images to the options with uc_option_images.

<?php
// I assume field is a radio or select already
// $field is the field in your form, $node is the product node
function field_to_radio_images($field, $node) {
   $option_images = $node->option_images_cached;
   //dpm(array("OI" => $option_images, "NODE" => $node));
   $options = $field['#options'];
   $output = '';
   // I'm not sure if #id is always set, so I have a backup :D
   $class = isset($field['#id']) ? $field['#id'] : form_clean_id($field['#name']);
   $output .= '<div class="oilp-attribute '.$class.'">';
   $output .= '<h2>' . $field['#title'] . '</h2>';
   if(isset($field['#description'])) {
      $output .= '<h4>' . $field['#description'] . '</h4>';
   }
   foreach($options as $oid => $option_name) {
      $output .= '<div class="oilp-option option-'.$oid.'"><label for="option-'.$oid.'">';
      if(isset($option_images[$oid])) { 
         $option_image = $option_images[$oid];
         $output .= '<span class="oilp-option-image"><img src="'.url($option_image).'" alt="option-'.$oid.'" /></span>';
      }
      $checked = $field['#default_value'] == $oid ? ' checked="checked"' : '';
      $output .= '<span class="oilp-option-name"><input'.$checked.' id="option-'.$oid.'" type="radio" name="' . $field['#name'] .'" value="'.$oid.'"/> '.$option_name.'</span>';
      $output .= '</label></div>';
   }
   $output .= '</div>';
   return $output;
}
?>

I've also as Ryan said, changed it to use radio buttons and images. I've avoided JS all together with by using labels. You should change the mouse pointer to the "clicky finger" in CSS/JS to let the user know they can simply click the images. It's a pretty nifty solution that degrades as well.

You will have to add your own CSS to make it look nice. I have this.

.oilp-option {
float: left;
padding: .5em;
}
.oilp-option span {
display: block;
text-align: center;
}
.oilp-option .oilp-option-name {
   font-weight:bolder;
   font-size: 1.2em;
}

--
Freelance Drupal & Ubercart Themes

Fri, 01/02/2009 - 17:46

#4 View page

fehin

Offline

Joined: 12/17/2008

Juice: 151

Re: I am currently doing the same thing.

I got the message below when I added your code to my template.php file, also the product page didn't show any change. I changed my color attribute to radio select too. Is there something I'm leaving out? Thanks.

"warning: Cannot modify header information - headers already sent by (output started at C:\apache2triad\htdocs\drupal\sites\all\themes\customfourseasons\template.php:268) in C:\apache2triad\htdocs\drupal\sites\all\modules\imagecache\imagecache.module on line 122."

Fri, 01/02/2009 - 19:05

#5 View page

Online

Joined: 11/05/2007

Juice: 3369

Re: Re: I am currently doing the same thing.

That's a common Drupal error that usually happens if you have blank lines at the beginning or end of your template.php. If you're putting j0rd's code into your template.php, be sure to remove the <?php and ?> tags that appear in the post. Also, template.php should not end in a ?> tag.

<tr>.

Sat, 01/03/2009 - 16:55

#6 View page

fehin

Offline

Joined: 12/17/2008

Juice: 151

Re: Re: Re: I am currently doing the same thing.

Thank you. That god rid of the errors but didn't see any change on my product page. Oh well.

Fri, 01/16/2009 - 07:51

#7 View page

j0rd

Offline

Joined: 07/16/2008

Juice: 452

Should put you on the right track....

The function i provided isn't a hook and thus won't override anything if you just put it in your template.php. You'll actually need to use it to get the desired effect.

in a hook like "form_alter" modify your form.

<?php
/* You'll have to pull $node from somewhere ahead of time to make this work 
 * ($form ?) 
 */
$form['myfield']['#mynode'] = $node; 
$form['myfield']['#theme'] = 'field_to_radio_images';
?>

create a function called theme_field_to_radio_images:

<?php
function theme_field_to_radio_images($field) {
   $node = $field['#mynode'];
   return field_to_radio_images($field, $node);
}
?>

This should call my previous function and give you the desired output.

Not sure if this will work for you, I modified my own code when I posted it on here...so providing I didn't mess anything up, it should work. Otherwise it's a start and if you trace the code, you should be able to make something for yourself.

--
Freelance Drupal & Ubercart Themes

Wed, 07/29/2009 - 03:36

#8 View page

jazzdrive3

Offline

Joined: 03/29/2009

Juice: 221

Re: Should put you on the right track....

So can you place the following just in your .module file?

<?php
function theme_field_to_radio_images($field) {
   $node = $field['#mynode'];
   return field_to_radio_images($field, $node);
}
?>

Tue, 03/09/2010 - 16:18

#9 View page

Suzi

Offline

Joined: 03/08/2010

Juice: 10

Re: Should put you on the right track....

Does this work with Ubercart 2? I'm not sure where to put these.

I am looking for a way to change the product picture by clicking on a swatch image. I have the Product picture mapped to the attribute option. How can I have 2 pictures? One for the product and one for the swatch.

Tue, 09/16/2008 - 07:25

#10 View page

j0rd

Offline

Joined: 07/16/2008

Juice: 452

I much prefer the idea of attributes being nodes.

I like the idea of attributes being nodes. Or at least providing a module where you can map nodes to attributes.

For the project i'm working on I'm doing this. When the user creates a node of a certain type, I create the attribute fields. When they go to edit the attribute, I go back send them over to the node edit page.

I've needed to do this to provide extra information such as pictures and descriptions for one of my attributes.

Perhaps something like this is better done with a product kit (i haven't looked at those yet)?

I'm sure this has come up before.

--
Freelance Drupal & Ubercart Themes

	Shopping cart
	View your shopping cart.

	User login
	Log in using OpenID: What is OpenID? Username or e-mail: * Password: * Remember me Log in using OpenID Cancel OpenID login Create new account Request new password

Ubercart

Navigation

Shopping cart

User login