Ubercart cart slide down jquery effect elegant look
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:
- Open file uc_cart_block.js located in modules/ubercart/uc_cart
- Go to line 43 and replace
- $(’#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.
Thanks for sharing, it works!!!!
anyway, you’re missin a ” in [colde]$output = ”;[/code]
Thanks for pointing that out