Adding classes for active progress on one page checkout

Question

I would like to have an active class for the current step I am in in the progress.phtml file but there seems to be no way of knowing which step I'm in inside that file. How can I achieve this?

Answer 1

I had an idea for this but I don't know prototype so I'm stuck. I go to accordion.js where the steps are actually changed and opened on the main accordion and go to this section:

openSection: function(section) {
    var section = $(section);

    // Check allow
    if (this.checkAllow && !Element.hasClassName(section, 'allow')){
        return;
    }

    if(section.id != this.currentSection) {
        this.closeExistingSection();
        this.currentSection = section.id;
        $(this.currentSection).addClassName('active');

        //This is my line, it doesn't work:
        $$('#step-'+this.currentSection).addClassName('active');
        var contents = Element.select(section, '.a-item');
        contents[0].show();

        if (this.disallowAccessToNextSections) {
            var pastCurrentSection = false;
            for (var i=0; i<this.sections.length; i++) {
                if (pastCurrentSection) {
                    Element.removeClassName(this.sections[i], 'allow')
                }
                if (this.sections[i].id==section.id) {
                    pastCurrentSection = true;
                }
            }
        }
    }
},

See my line there?:

 $$('#step-'+this.currentSection).addClassName('active');

I added ids to the progress.phtml items to match that but I keep getting

TypeError: $$(...).addClassName is not a function

It seems I was out of the scope there. I added an event trigger there and then a listener to change the classes and it worked for me.

Answer 2

In the default Onepage Checkout theme, progress.phtml gets loaded on every AJAX call, and has a number of checks if it is complete, if so it adds a class:

    <?php if ($this->getCheckout()->getStepData('billing', 'is_show')): ?>
    <?php if($this->getCheckout()->getStepData('billing', 'complete')): ?>
        <dt class="complete">
            <?php echo $this->__('Billing Address') ?> <span class="separator">|</span> <a href="#billing" onclick="checkout.accordion.openSection('opc-billing'); return false;"><?php echo $this->__('Change') ?></a>
        </dt>
        <dd class="complete">
            <address><?php echo $this->getBilling()->format('html') ?></address>
        </dd>
    <?php else: ?>
        <dt>
            <?php echo $this->__('Billing Address') ?>
        </dt>
    <?php endif; ?>
    <?php endif; ?>

What you're then asking is to style the last item in progress.phtml that has the class complete. For that we'll use jQuery or Prototype to add the appropriate class:

Prototype:

$$(".complete").each(function(x) { $(x.lastChild).addClassName("active"); });

jQuery:

$(".complete:last-child").addClass("active");

Answer 3

I would do something like that

  <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.button, .section').click(function(){

            if(jQuery('#opc-billing').hasClass('active')){
                jQuery('#billing-progress-opcheckout dt').addClass('orange');
                jQuery('#shipping-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping_method-progress-opcheckout dt').removeClass('orange');
                jQuery('#payment-progress-opcheckout dt').removeClass('orange');
            }else if(jQuery('#opc-shipping').hasClass('active')){
                jQuery('#billing-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping-progress-opcheckout dt').addClass('orange');
                jQuery('#shipping_method-progress-opcheckout dt').removeClass('orange');
                jQuery('#payment-progress-opcheckout dt').removeClass('orange');
            }else if(jQuery('#opc-shipping_method').hasClass('active')){
                jQuery('#billing-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping_method-progress-opcheckout dt').addClass('orange');
                jQuery('#payment-progress-opcheckout dt').removeClass('orange');


            }else if(jQuery('#opc-payment').hasClass('active')){
                jQuery('#billing-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping-progress-opcheckout dt').removeClass('orange');
                jQuery('#shipping_method-progress-opcheckout dt').removeClass('orange');
                jQuery('#payment-progress-opcheckout dt').addClass('orange');

            }



        })

    })
</script>

Answer 4

Replace last <dt> tag with

File : template\checkout\onepage\progress\billing.phtml

Add below code just after to "this.currentStep = section;" line (line number 35)

file : skin\frontend\jumex\default\js\opcheckout_rwd.js

$j('div dt').removeClass('current');

if( $j('#'+section+'-progress-opcheckout').length >0){
$j('#'+section+'-progress-opcheckout dt').addClass('current');
}

Now you can see every active step have apply current class to <dt> tag so you can set it as active.