Hi,
I'm using the 6.x Dev Version of Ubercart and wanted to make a Progress Bar viewable from Checkout to Order Confirmation please?
Thank you,
Giarnz
Sun, 10/26/2008 - 08:40
Re: 6.x Dev - Order Progress Bar
To do that, I just created a block that show the progress bar on a "content top" area.
Block module allow to set up their visibility, so you can activate the block only for cart, cart/checkout, cart/review, cart/complete page...
Progress bar
What a great tip zmove, Thanks a lot! ...simple solutions are often the greatest ones! Thanks again.
Re: Progress bar
That might be a cool contrib, or possibly a patch. It'd simply need to be another block that Ubercart provides which can be enabled/disabled.
How about posting it, zmove? 
Re: Re: Progress bar
I added the cart progress bar (blocks) right after reading this thread... it looks great and it's great for the customers!
Thanks for the idea!
Re: Re: Re: Progress bar
For a record & brainstorming, I found some links to Progress Bar design tips and some examples (scroll down the page for the examples)
Note: I'm no way affiliated with the web site in question, nor know them at all, just linking because the great examples they're providing.
Re: Re: 6.x Dev - Order Progress Bar
zmove (post#2) wrote
To do that, I just created a block that show the progress bar on a "content top" area.
Block module allow to set up their visibility, so you can activate the block only for cart, cart/checkout, cart/review, cart/complete page...
I am looking at doing the same thing, and I'm wondering if you created one block for each of the pages in the process with a specific image indicating the current step in the process. I believe i know how to do this, but if you had another way i would appreciate any input or suggestions.
Thanks so much for putting me in the right direction anyways.
Re: Re: Re: 6.x Dev - Order Progress Bar
great idea, this has been a part of my complaints about ubercart. well not complaint, but ways to improve.
Progress Bar
Thanks. Is there any out of box module for progress bar or we just have to make it? I am sure many would have already done that but somehow I am not able to find it. Am I missing something.
Cheers!!
Re: Progress Bar
For those that don't want to code anything (PHP) just create THREE blocks:
1) Step 1 Checkout - only show on page: cart
2) Step 2 Checkout - only show on page: cart/checkout
3) Step 3 Checkout - only show on page: cart/checkout/review
Enter this HTML in each box (input format = full html)
<div class="checkout-progress">
<div class="step on">
<span class="number">1</span>Shopping Cart
</div>
<div class="step">
<span class="number">2</span>Billing & Shipping
</div>
<div class="step">
<span class="number">3</span>Review and Pay
</div>
</div>change class="step on" to control the steps display - some people like to just highlight the current step, others like to highlight all complete steps. you can make either happen. So in block one, use the html as shown. in block 2 change the html with step 2 highlighted.
Then style the html:
/* CHECKOUT PROGRESS BAR */
.checkout-progress{
width:498px;
overflow:auto;
border:1px solid #999;
background:#e5e5e5;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.checkout-progress .step{
width:166px;
height:30px;
float:left;
padding-top:10px;
color:#666;
}
.checkout-progress .step.on{
background:#339933;
color:#fff;
}
.checkout-progress .step .number{
display:block;
font-size:200%;
width:30px;
margin-right:8px;
text-align:center;
float:left;
}
If you want to use some PHP, make one block, a couple of if's that check the url and set the on css class automatically.
Of course, a module with some options would be cool, but it's such a simple block to just make on your own.
Sweet!
Created one for my cart...here's the PHP that builds the block, and I've attached an image of what it looks like after some stylin. I won't make any claims as to the quality of this PHP code, but it works. Can be seen at http://www.sportsciencelab.com.
<?php
function custom_module_checkout_progress(){
//add css file
$path = drupal_get_path('module', 'custom_module');
drupal_add_css($path.'/css/checkout.css');
//check for a specific item in the user's cart that I want to treat differently
$elite = FALSE;
$products = uc_cart_get_contents();
foreach ($products as $product){
if ($product->cart_item_id == 1442) $elite = TRUE;
}
$step3text = "You're just one step away from completing your order!";
if ($elite) $step3text = "You're just one step away from unlocking our exclusive methodology!";
$output = '';
$step = Array('','','','');
//determines which step we're on, sets that step to "on" in the array, and the one before it to "off"--the latter for style.
if ( arg(0)=='cart' && !arg(1) ) $step[0]='on';
else if ( arg(1)=='checkout' && !arg(2)){ $step[1]='on'; $step[0]='off';}
else if ( arg(1)=='checkout' && arg(2)=='review'){ $step[2]='on'; $step[1]='off';}
else if ( arg(1)=='checkout' && arg(2)=='complete'){ $step[3]='on'; $step[2]='off';}
$output .= '<table class="checkout-progress"><tr>';
$output .= '<td class="'.$step[0].'"><h4>Step 1: Review Cart</h4>';
if ($step[0]=='on') $output .= '<p><a href="/cart/checkout">Proceed to Checkout</a> to get started!</p>';
$output .= '</td><td class="'.$step[1].'"><h4>Step 2: Payment</h4>';
if ($step[1]=='on') $output .= '<p>'.$step3text.'</p></td>';
$output .= '</td><td class="'.$step[2].'"><h4>Step 3: Review Order</h4>';
if ($step[2]=='on') $output .= '<p>Just Press "Complete" and You\'re Done!</p>';
$output .= '</td><td class="complete '.$step[3].'"><h4>Success!</h4>';
if ($step[3]=='on') $output .= '<p>Congratulations on your purchase!</p>';
$output .= '</td></tr></table>';
return $output;
}
?>| Attachment | Size |
|---|---|
| screenshot | 11.76 KB |
Re: Sweet!
cool. I'll probably switch to your code after checking it out.
vood002 wrote: Created one
Created one for my cart...here's the PHP that builds the block, and I've attached an image of what it looks like after some stylin...
Thanks imstillatwork and vood002 for sharing, appreciated!
Hi,
Can I also not show the
Hi,
Can I also not show the progress bar, it takes for ages on my site...
greetings, Martijn
Progress Tracker module in Drupal
Progress Tracker module can resolve your issue
This module can be downloaded from http://drupal.org/project/progress_tracker Progress Tracker