1

By default there are five steps to the Magento checkout process. This can be quite overwhelming for customers. I would like to reduce these steps or atleast give that perception.

My idea is to initially hide all the steps apart from the first one. Customers can then choose from the three options - login, register or checkout as guest.

login step

Once customers have made a choice the rest of the steps should appear and the login step above dissapear.

rest of the steps

markbarabus
  • 119
  • 1
  • 9
  • Magento's RWD theme does exactly this by default by playing with the visibility (and opacity) of the following steps initiated on click by checkout.setMethod();. So this can be a reference, else I don't really have an idea how to help you with your unknown custom theme. – Christoph Farnleitner Feb 08 '18 at 01:27
  • This is correct. However, once you click continue RWD moves to step 2 (Billing Information) and step 1 (Checkout method) can still be seen above. My goal is to give the perception that step 1 (Checkout method) is not a step and to achieve this i need it to dissapear once a customer has selected the Checkout method. – markbarabus Feb 08 '18 at 14:39
  • FYI i'm using a customised RWD theme. – markbarabus Feb 08 '18 at 14:39
  • 1
    Thanks Christoph after looking into how RWD works i was able to solve this on my own. Answer below. – markbarabus Feb 08 '18 at 15:56

1 Answers1

0

Following Christophs response above i was able to solve this on my own and it turned out to be quite simple.

Step 1:

If using a custom theme pull in opcheckout_rwd.js and reference it in \app\design\frontend\rwd\default\template\checkout\onepage.phtml

Find <script type="text/javascript" src="<?php echo $this->getSkinUrl('js/opcheckout.js') ?>"></script> and just below this add:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/opcheckout_rwd.js') ?>"></script>

Remember to copy the above file first into your skins js folder e.g. \skin\frontend\rwd\default\js\

In this same file onepage.phtml add a class to track which checkout step is first. We will use CSS to hide this later on.

Find: <ol class="opc" id="checkoutSteps">

Replace with: <ol class="opc opc-firststep-<?php echo $this->getActiveStep() ?>" id="checkoutSteps">

Step 2:

If not already present in your theme load the jquery and noconflict in your page.xml /app/design/frontend/rwd/default/layout/page.xml

Find: <action method="addJs"><script>prototype/prototype.js</script></action> and just below this add:

        <action method="addJs"><script>lib/jquery/jquery-1.12.0.min.js</script></action>
        <action method="addJs"><script>lib/jquery/noconflict.js</script></action>

Step 4:

In your themes custom.css file add the following:

/* -------------------------------------------- *
 * This section hides everything but the "Checkout Method" step of the checkout process and fades in the content
 * once the customer progresses to the next step. The purpose of this is to simplify what the customer has to focus on.
 * It is limited to larger viewports since smaller devices are inherently going to be focused solely on the
 * "Checkout Method" step.
 */
.opc.opc-firststep-login .section:not(#opc-login) .step-title,
.opc-block-progress-step-login {
  -webkit-transition: opacity 300ms linear;
  -webkit-transition-delay: 0;
  -moz-transition: opacity 300ms linear 0;
  -o-transition: opacity 300ms linear 0;
  transition: opacity 300ms linear 0;
}

.opc.opc-firststep-login .section#opc-login .step-title .number {
  -webkit-transition: width 80ms linear;
  -webkit-transition-delay: 0;
  -moz-transition: width 80ms linear 0;
  -o-transition: width 80ms linear 0;
  transition: width 80ms linear 0;
}

.opc.opc-firststep-login .section#opc-login .step-title h2 {
  -webkit-transition: margin-left 80ms linear;
  -webkit-transition-delay: 0;
  -moz-transition: margin-left 80ms linear 0;
  -o-transition: margin-left 80ms linear 0;
  transition: margin-left 80ms linear 0;
}

/* When a user progresses from the "Checkout Method" to "Billing Information" for the first time, the              */
/* "opc-has-progressed-from-login" class gets added to the body. Also, the .opc element will only have the         */
/* "opc-firststep-login" class if the first step of the checkout is the "Checkout Method" (eg, not when logged in) */
body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section:not(#opc-login) .step-title,
body:not(.opc-has-progressed-from-login) .opc-block-progress-step-login {
  opacity: 0;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title .number {
  width: 0px;
  overflow: hidden;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title h2 {
  margin-left: 0px;
}

/* When a user progresses from the "Checkout Method" to "Billing Information" hide login info             */
body.opc-has-progressed-from-login .opc .section#opc-login {
    display: none;
}
markbarabus
  • 119
  • 1
  • 9