Project D

Are you sick and tired of the old boring ubercart 2 order review page? If you do want to change it, its pretty simple to modified the looks of the table by changing its css.

Or.. it’s even better, change them all to div, so you can float the submit button to top of the page content. This way your potential customer doesn’t have to scroll down to submit the order from the review page and if you are creative enough, you can make the button flashy so the customer just concentrate in clicking those button rather than got distracted and cancel the order.

Here is the code snipplets :

/**
 * Theme the checkout review order page.
 *
 * @param $panes
 *   An associative array for each checkout pane that has information to add to
 *   the review page.  The key is the pane's title and the value is either the
 *   data returned for that pane or an array of returned data.
 * @param $form
 *   The HTML version of the form that by default includes the 'Back' and
 *   'Submit order' buttons at the bottom of the review page.
 * @return
 *   A string of HTML for the page contents.
 * @ingroup themeable
 */
function theme_uc_cart_checkout_review($panes, $form) {
  drupal_add_css(drupal_get_path('module', 'uc_cart') .'/uc_cart.css');
  $output ='<div id="checkout_review_wrapper">'; // base wrapper for all

  $output .='<div id="checkout_review_wrapper_instructions">'; // second layer wrapper for left quick checkout box
  $output .= '<div class="checkout_review_instructions">'. check_markup(variable_get('uc_checkout_review_instructions', uc_get_message('review_instructions')), variable_get('uc_checkout_review_instructions_format', FILTER_FORMAT_DEFAULT), FALSE)
           .'</div>';
$output .= '<div class="checkout_reviews_button">'. $form .'</div>';
$output .= '</div>'; // end second layer box

$output .= '<div id="checkout_review_wrapper_datainfo">'; // second layer wrapper for right quick checkout box

  foreach ($panes as $title => $data) { // main looping
    $output .= '<div class="checkout_review_title">' .$title .'</div>'; // section layer
    if (is_array($data)) {
      foreach ($data as $row) {
        if (is_array($row)) {
          $output .= '<div class="checkout_review_content_wrapper">'; // third layer wrapper for row-title, double dot and row data
		  $output .= '<div class="checkout_review_content">'. $row['title'] .'</div>';
		  $output .= '<div class="checkout_reviews_doubledots">:</div>';
		  $output .= '<div class="checkout_reviews_content_data">'. $row['data'] .'</div>';
		  $output .= '</div>'; // end third layer wrapper
        }
        else {
		  $output .= '<div class="checkout_review_content_wrapper">'; // third layer wrapper for row-title, double dot and row
          $output .= '<div class="checkout_reviews_content_data_product">'. $row .'</div>'; // third layer for product
		  $output .= '</div>'; // end third layer
        }
      }
    }
    else {
	  $output .= '<div class="checkout_review_content_wrapper">'; // third layer wrapper for row-title, double dot and row
      $output .= '<div class="checkout_reviews_content_data_product_data">'. $data .'</div>'; // third layer
	  $output .= '</div>'; // end third layer
    }
  }
  $output .= '</div>'; // end second layer right box

  $output .= '</div>'; //end first layer wrapper

  return $output;
}

Note: sometimes my wordpress site screw up the php code display, if you found the code screw up then visit my joomla site which supposedly will view the php code in the right format.

You can use the code in drupal template.php by replacing the theme_ to your_theme_name_ or you can directly change the code in uc_cart_pages.inc (not recommended, updating ubercart will wipe out your custom theme).

and you will need this css to skin the theme :

/** Cart Review Page **/

#checkout_review_wrapper {
width: 95%;
float: none;
margin: 0 auto;
position: relative
}

#checkout_review_wrapper #checkout_review_wrapper_instructions {
float: left;
width: 25%;
padding: 1%;
margin: 1%;
border: double 1px #ddd;
  -moz-border-radius: 6px;
  -moz-outline-radius: 6px;
  -webkit-border-radius: 6px;
  position: relative;
}

#checkout_review_wrapper_instructions .checkout_review_instructions {
width: 95%;
padding: 2%;
background: #E3ECC0;
color: #333;
font-size: 14px;
  -moz-border-radius: 6px;
  -moz-outline-radius: 6px;
  -webkit-border-radius: 6px;
  border: 1px solid #ccc;
  float: left;
  margin-bottom: 20px;
  }
#checkout_review_wrapper_instructions .checkout_reviews_button {
	width: 100%;
	margin-top: 20px;
	}
#checkout_review_wrapper #checkout_review_wrapper_datainfo {
float: left;
width: 65%;
padding: 1%;
padding-top: 0px;
margin: 1%;
border: double 1px #ddd;
  -moz-border-radius: 6px;
  -moz-outline-radius: 6px;
  -webkit-border-radius: 6px;
  position: relative;
 }

#checkout_review_wrapper_datainfo .checkout_review_title {
width: 95%;
padding-left: 2%;
padding-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
background: #E3ECC0;
color: #333;
font-size: 14px;
	 -moz-border-radius-topleft: 6px;
  -webkit-border-topleft-radius: 6px;
  		 -moz-border-radius-topright: 6px;
  -webkit-border-topright-radius: 6px;
  border: 1px solid #ccc;
  float: left;
  margin-top: 20px;
 }
#checkout_review_wrapper_datainfo .checkout_review_content_wrapper {
 width: 95%;
padding-left: 2%;
padding-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
  border: 1px solid #ccc;
  float: left;
  position: relative;
  }

.checkout_review_content_wrapper .checkout_review_content {
  width: 24%;
float: left;
vertical-align: top;
height: auto;
padding: 0;
}

.checkout_review_content_wrapper .checkout_reviews_doubledots {
  width: 2%;
  float: left;
  vertical-align: top;
height: auto;
padding: 0;
}

.checkout_review_content_wrapper .checkout_reviews_content_data {
  width: 67%;
float: left;
vertical-align: top;
height: auto;
padding: 0;
}

.checkout_review_content_wrapper .checkout_reviews_content_data p {
vertical-align: top;
margin: 0;
padding: 0;
}
.checkout_review_content_wrapper .checkout_reviews_content_data_product {
width: 94%;
float: none;
margin: 0 auto;
vertical-align: top;
height: auto;
padding: 0;
}

.checkout_review_content_wrapper .checkout_reviews_content_data_product table {
width: 98%;
}
.checkout_review_content_wrapper .checkout_reviews_content_data_product_data {
width: 94%;
float: none;
margin: 0 auto;
vertical-align: top;
height: auto;
padding: 0;
}

One thing that I hope to gain from this…. if you by any chances got a better taste in art and using the code above to create a cool order review page, Do you mind dropping the code for me to use?.

Anyway, Enjoy!

-= end transmission =-