PHPJavascript

Web Development Guide – My Personal Library of Tutorials and Scripts

Ubercart cart slide down jquery effect elegant look

July3

I wanted to the shopping cart to look more elegant so I used the sliding effect of jquery, css opacity transparency and reduce the summary to enable a one line heading “shopping cart” and when it is clicked a curtain or sliding effect is enabled showing a see through cart.

Sliding Effect:

  1. Open file uc_cart_block.js located in modules/ubercart/uc_cart
  2. Go to line 43 and replace
  3. $(’#cart-block-contents’).toggle(’slow’);
    with
    $(’#cart-block-contents’).slideToggle(’slow’);

Transperancy

Open style.css of your theme and add the following:

#cart-block-contents  {
background:none repeat scroll 0 0 #FFFFFF;
border:3px solid black;
margin-top:-14px;
opacity:0.9;
position:absolute;

z-index:100000;
}

Reduce the cart summary

Open template.php in your theme (if the file is missing create it) and add the following function:

function myuniform_uc_cart_block_content($help_text, $items, $item_count, $item_text, $total, $summary_links) {
$output = ”;

// Add the help text if enabled.
if ($help_text) {
$output .= ‘<span>’. $help_text .’</span>’;
}

// Add a wrapper div for use when collapsing the block.
$output .= ‘<div id=”cart-block-contents”>’;

// Add a table of items in the cart or the empty message.
$output .= theme(’uc_cart_block_items’, $items);
$output .= theme(’uc_cart_block_summary’, $item_count, $item_text, $total, $summary_links);

$output .= ‘</div>’;

// Add the summary section beneath the items table.

return $output;
}

Note: myuniform is the name of my theme, so write just replace it with your theme name.

posted under Ubercart
2 Comments to

“Ubercart cart slide down jquery effect elegant look”

  1. On August 2nd, 2010 at 3:38 pm Thanks Says:

    Thanks for sharing, it works!!!!

    anyway, you’re missin a ” in [colde]$output = ”;[/code]

  2. On August 31st, 2010 at 10:58 am admin Says:

    Thanks for pointing that out

Email will not be published

Website example

Your Comment:

 

3,063 spam comments
blocked by
Akismet