Product Attribute Radio Box Contribution

[broadstreetbully]

I've been trying to find a contribution that lets you make your attributes be shown on the product description page(s) as an image instead of the word or text....like a red color swatch instead of the word 'red' would be next to the radio box/checkbox. I've found this contribution and it allows only the text....the code is posted below....from looking at the code is there a way to make the attributes an image instead of a word?

open and edit catalog/product_info.php

find:


<td class="main" colspan="2"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>


replace with:

<td class="main" colspan="2"><?php echo tep_draw_radio_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>

=======================================================================

edit catalog/includes/functions/html_output.php 
add this new function tep_draw_radio_menu

add this in somewhere before the final ?>

////
// Output a form radio menu for product info page maniac101
function tep_draw_radio_menu($name, $values, $default = '', $parameters = '', $required = false) {
$field ='<table border="0" cellspacing="0" cellpadding="0"><tr><td class="main">'; 
if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);

for ($i=0, $n=sizeof($values); $i<$n; $i++) {
$value = tep_output_string($values[$i]['id']);
	$field .= '<input type="radio" name="' . $name . '" value="' . $value . '"';
	if ($i == 0) $field .= ' checked';

	$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '<br />';
}
$field .= '</td></tr></table>';

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

return $field;
}

////

 

Here is what the products listing page looks like. I want to change the text (32mb, etc) to an image....

[npn2531]

The hard way to do it would be to rewrite the definition in $value to be an image and change the database to hold that image cooresponding to $value. However, you might also try doing this:

 

$field .= '<span class=" ' . $value.' "><input type="radio" name="' . $name . '" value="' . $value . '"';
       if ($i == 0) $field .= ' checked';

       $field .= '></span>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '<br />';
       }

 

Note I have simply enclosed the < input type="radio> in a span tag with the class value coded to equal the variable $value.

 

Say you have a $value of 'red', set up as normal as a product option in OSC admin. That span tag will have a class value of 'red'.

 

Then add this to your stylesheet:

 

.red{
background-repeat: no-repeat;
background-position: 10px 1px;
background-image: url(images/red.gif)
width:20px
height:10px
}

 

This will place the image 'red', (assuming you have uploaded an image 'red' to the images folder), a few pixels to the right of the radio button and 1px from the top. (You will have to experiment with the placement. Adjust width and height to fit the image 'red' ). This way you still get to have the word 'red' next to the radio button as normal, but on top of or adjacent to the image called 'red'.

 

 

(do check my syntax in the php above, but I think I have it right)

[roneada]

for change the color of price? i testing some options by the result its bad, thanks for the reply

product info

<td  align="left"><table border="0" cellspacing="4" cellpadding="2" style="border: 1px dotted #CCC;">
  <tr> <td class="radio_text"><strong class="strong"><?php echo $products_options_name['products_options_name'] . ':'; ?></strong>

  <?php echo tep_draw_radio_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array,$selected_attribute); ?></td></tr></table>

html_output

function tep_draw_radio_menu($name, $values, $default = '', $parameters = '', $required = false) {
$field ='<table border="0" cellspacing="0" cellpadding="0"><tr><td class="main">';  
if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);
   for ($i=0, $n=sizeof($values); $i<$n; $i++) {
  $value = tep_output_string($values[$i]['id']);
  $field .= '<input  type="radio" name="' . $name . '" value="' . $value . '"';
    if ($i == 0) $field .= ' checked';
  $field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) .'<br />';
   }
   $field .= '</td></tr></table>';
   if ($required == true) $field .= TEXT_FIELD_REQUIRED;
   return $field;
 }