4

Hi 'm working on the magento responsive theme using bootstrap.

In my onepage Checkout page, i need to customize that as horizontal listing.

I have followed some tutorial. But in those tutorial they have use fixed height for that.I don't want to use like that.

So i have tried in app\design\frontend\default\default\template\checkout\onepage.phtml as follow

<div class="row-fluid steps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <div id="opc-<?php echo $_stepId ?>1" class="span3 section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
            <b class="number"><?php echo $i ?></b>
            <?php echo $_stepInfo['label'] ?>
        </div>
    </div>
<?php endforeach ?>
</div>

<ul class="unstyled opc" id="checkoutSteps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <li id="opc-<?php echo $_stepId ?>" class="section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
        </div>
        <ul id="checkout-step-<?php echo $_stepId ?>" class="step a-item unstyled cart-list" style="display:none;">
            <li>
                <h3> <?php echo $_stepInfo['label'] ?></h3>
            </li>
            <li class="row-fluid"><?php echo $this->getChildHtml($_stepId) ?></li>
        </ul>
    </li>
<?php endforeach ?>
</ul>

This code display 'll display as i want. But the Accordion was not working.

Can some one explain to do this.

I don't want to install extension for this.

1

I've played around with a horizontal checkout a while ago and you're free to use the code. It's on Github and except for a helper class it's all templating and some CSS. If you have specific issues or questions let me know, I'll try and explain.

9
  • Thanks for your help.Its shows Error like Module "Redkiwi_Rkcheckout" requires module "Redkiwi_Rkextbase". In your app/etc/module/Redkiwi_Rkcheckout.xml <depends> <Redkiwi_Rkextbase/> </depends> what should i replace for that Feb 20 '14 at 10:34
  • Ahh sorry, It's not really necessary. I've updated the code on Git
    – Sander Mangel
    Feb 20 '14 at 10:37
  • Thanks,it does not show active steps.And one more thing could you make the Steps are at the top of the page after the page title Feb 20 '14 at 10:44
  • This was a hobby project a while back and I'm not developing on it any more so any changes I'm afraid you will have to do yourself. If you run into a specific issue I'll be glad to assist
    – Sander Mangel
    Feb 20 '14 at 10:51
  • thanks for your help.I have try that but the accrodation is not working for me. Do you have any idea about this.Please help me Feb 20 '14 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.