Home

There's a few ways

#1 Submitted on Mon, 09/08/2008 - 12:05 Top
vince.rowe
vince.rowe's picture
Joined: 06/23/2008
Juice: 51

Hi Adam,

There's a few ways to do what your after.

Some people would argue that styling the purchase button is a pure visual element so CSS should be used.
I can see where they would be coming from but that by default has some problems:

You don't get a pure image like your talking about, you just get to use CSS for a background, border, colour etc.

In previous sites I have used a module level override, using code similar to that posted earlier. A quick copy paste shows me something like this:

Sitehelper module file extract (search sitehelper module on Drupal.org)

if($form['#base'] == 'uc_product_add_to_cart_form'){

    $form['submit']['#type'] = 'hidden';

    if (isset($_POST['submit_x'])) {

      $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'submit',
      );
    }

$form['submit_image'] = array(
      '#value' => '<input name="submit" type="image" class="add_to_basket" title="'. t('Add to basket') .'" src="'.base_path() . path_to_theme() . '/images/add_to_basket.jpg'.'">',
    );
}

But to be honest while I believe this method works well, I would (for ease of use and the visual argument mentioned earlier) use a third option which is to use a very nice and easy jquery effect to use your required image.

I'm happy to supply more details on these if it helps, but this should do what your after the JavaScript way:

Taken from template.php

function phptemplate_button(&$element) {

drupal_add_js('themes/main/js/javascript.js');

  $text = str_replace(' ', '_', $element['#value']);

  // Naming convention: images are stored in this theme's i/ directory.
  $filename = '' . strtolower($text) . '.gif';
  $filepath = drupal_get_path('theme', 'main') . '/images/forms/'.$filename;

  // Suppress this behavior on node forms because we dont have images
  // for all buttons

  if (file_exists($filepath)) {

    // Use the original button
    $button = theme_button($element);
    $image = '<input style="display: none;" class="form-image" type="image" src="'.
      base_path() . $filepath .'" name="'.$element['#name'] .'" id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'-image" '. drupal_attributes($element['#attributes']) ." />\n";
    // Render the image next to its button equivalent.  Hide the
    // image, it will be shown later only if javascript is enabled.
    $output = '<span class="buttonreplace">'. $button . $image . '</span>';
  }
  else {
    $output = theme_button($element);
  }
  return $output;
}

Taken from the JS file referenced:

$(function() {
// used to show and activate form images
$('span.buttonreplace input[@type=image]').show().
  click(function (e) {
  // Pass the click on to our button sibing.
    $(this).siblings().click();
    return false;
    });
  $('span.buttonreplace input[@type=submit]').hide().
  click(function (e) {
    // The second click() function was sending a second click event
    //  which broke some forms, so I disabled it, and voila!
    // $(this).click();  
    return true;
    });
});

All the above code items were from previous discussions on this on the Drupal site (search for form image, and remember to check IE with what ever option you go for as that has the most ..."features" to deal with)

(I do think design should be 100% achievable without JavaScript effects, but I also see this as a good place to use simple items to speed development and if it can't run? well its the standard submit button so all's good).

Vince

www.Londondesignworks.com

Image buttons instead of submits for 'Add to Cart' on product pages By: bwv (6 replies) Wed, 08/08/2007 - 17:42