[CONTRIBUTION] Better order-steps template

[Eihwaz]

See the image attached to see the difference between original and modified versions.
The markup and css used are based on Cody Lindley's "CSS Step Menu" article, but I did my share of tweakings too
So, yeah, the advantages are:
Cross-browser compatible (I'm kind of guessing here, so don't take my word for it)
Uses sprites (one sprite, in fact, so your customer's browser will send one request versus 5.
Degrades nicely if images are disabled.

Here's what you should do to make it work:
Find your order-steps.tpl file in your shop's theme folder and completely replace it's markup with this:
order-steps.tpl:

>
{* Assign a value to 'current_step' to display current style *}
<!-- Steps -->
</pre>
<ul>


           {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}

               {l s='Summary'}

           {else}
               {l s='Summary'}
           {/if}





           {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}

               {l s='Login'}

           {else}
               {l s='Login'}
           {/if}





           {if $current_step=='payment' || $current_step=='shipping'}

               {l s='Address'}

           {else}
               {l s='Address'}
           {/if}





           {if $current_step=='payment'}

               {l s='Shipping'}

           {else}
               {l s='Shipping'}
           {/if}




{l s='Payment'}

</ul>
<br><!-- /Steps --&gt

Open your global.css file, find

/* steps (like order step) */

AND

/* Special style for block cart */

Replace css code between those two lines with the following:

/* steps (like order step) */
ul.step {
   list-style: none; 
   width: 100%; 
   background-color: #fff; 
   height: 70px; 
   padding: 10px 0;
}
ul.step li{
   position: relative;
   height: 70px;
   width: 20%;
   list-style: none;
   float: left;
   background-image: url(../img/stepsSpr.gif);
   background-repeat: repeat-x;
   background-position: left -280px;
   background-color: #0E96CC;
   vertical-align: middle;
}
ul.step li ins {
   display: block;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 26px;
   height: 70px;
   background-image: url(../img/stepsSpr.gif);
   background-repeat: no-repeat;
   background-position: right top;
}
ul.step li.step_current ins{
   background-color: #CD3C0F;
   background-position: right -70px;
}
ul.step li.step_last_done ins{
   background-color: #CCC30E;
   background-position: right -140px;
}
ul.step li.step_done ins{
   background-color: #CCC30E;
   background-position: right -210px;
}
ul.step li.step_current{
   background-position: left -350px;
   background-color: #CD3C0F;
}
ul.step li.step_last_done, ul.step li.step_done{
   background-position: left -420px;
   background-color: #CCC30E;
}
ul.step li span a {
   color: #fff;
}
ul.step li span{
   position: absolute;
   width:120px;
   display:block;
   left:5px;
   top: 30px;
   font-weight:bold;
   color: #fff;
}
/* Special style for block cart */

Finally, put the stepsSpr.gif that I've attached to this post in your theme's directory img folder.

[Guest]

Thanks Eihwaz
That is really good. Have a good time

[Eihwaz]

Tesekkuerler (I know two words in turkish: "merhaba" and "tesekkuerler")
Does it work fine?
Because everyone seems to be a bit quiet, so I'm not really sure if people can get it to work using my instructions.

[Bruno Leveque]

Great work!

Moreover the code seems to be well-designed with CSS spriting

Congrats!

[minirj01]

Hi Eihwaz,
...well done, your tip works fine and cute !!
(But your instructions concerning global.css are not so clear ; )
Thanks for your good idea.

[Eihwaz]

Thank you all for responces, I'll try to keep theese little things coming.
I've also updated the instructions, so there should be no problems making it work anymore. I'll also post PSD file for the sprite, as soon as I find reliable and free file-hosting.

[bobbob]

Thanks Eihwaz. Nicely done, cheers for sharing!

[21846657]

Wow, very nice breadcrumb-like steps with css sprite. Cheers!

[rubensicko]

Hi all! In the last step (payment) I have 2 colors, red and blue (the last step should be all red i think). Help!

Thank you.

[Degsey]

In the last step for payment it should be all yellow and a red segment at the end.

[Rogerio Lima]

In my store, the image is like that i have attached, is not look good, can you help me?

[Degsey]

It looks to me that you have downloaded the image as a thumbnail thats why it is not showing properly, it should be 26x490. It appears that you may have downloaded the image shown in the thread and not clicked on it to a new window and right click and copy it.

[Rogerio Lima]

It looks to me that you have downloaded the image as a thumbnail thats why it is not showing properly, it should be 26x490. It appears that you may have downloaded the image shown in the thread and not clicked on it to a new window and right click and copy it.

Yes that's right, now everything is ok. Tank You,
Best regards.

[Hedrad]

Thanks for this contribution.
In french : "login" is traduct by "identifiez-vous". The weight is too long ; so, in "ul.step li span", I do this : "font-size: 9px;"

Sorry for my poor english...

[snco]

Hello Eihwaz,

I like your solution and want to use it in my shop. But I want to make some changes on the image file. Is it possible to send me the .PSD file by email? ([email protected])

Thank you in advance
Alex

[snco]

I dealed with it...
http://stepcare.eu/shop/my-account.php


Thank you for your contribution !

[blk1]

snco I see you have 'Purchase without an account' on your website - is this a module you downloaded?

[Eihwaz]

2 snco:
Hi! Sorry, I don't even have the psd file for it, I just did it as an example, saved directly to gif.
But I see you did a cool sprite yourself, very nice!

[snco]

Hi Eihwaz,

I am glad you like it. As I said in my previous post your contribution is also very nice and convenient.
Thanx again for that!

[snco]

Hello blk1,

Actually I found this one step checkout on the forum. It is a modification to existing prestashop ordering process, which allows the user to purchase without registration. I am attaching the files. In order to use it, you must replace the files from the archive with those on your store.

Good luck!

One step order_PWA2.zip

[Addamz]

Thanx. Very nice mod.

[bebba]

Got it working, wery nice, but i got a darker bgr, can i change the white fields upow and below the steps images?

[Seanmcn]

Awesome contribution, thanks a million you've saved me HOURS! :coolsmile:

[bebba]

OK, i'v got it. i changed the bg-color in global.css.

[silvianna]

Спасибо Эйваз, ваш модуль прекрасно работает

[bebba]

Translation to abov = Thank Eyvaz, your module works fine

[spiderspy]

Thanks Eyvaz, great solution!

[Marexion]

this looks fantastic thank you

[Luis Alcalá]

I suppose the code he published its broken with the prestashop´s forum errors?

[Marexion]

its needs some modifications , but u can still get it working. i use it currently in a 1.4.4.1 release

[Marexion]

k, in reply to the earlier post

 

this is how my order-steps.tpl in the themes folder looks like.

 

{if !$opc}
<!-- Steps -->
<ul class="step" id="order_step">
<li class="{if $current_step=='summary'}step_current{else}{if $current_step=='address'}step_last_done{elseif $current_step=='payment' || $current_step=='shipping' || $current_step=='upload'}step_done{else}step_todo{/if}{/if}">
	<span>
		{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}
		<a href="{$link->getPageLink('order.php', true)}">
			{l s='Summary'}
		</a>
		{else}
			{l s='Summary'}
		{/if}
	</span>
	<ins></ins>
</li>
<li class="{if $current_step=='address'}step_current{else}{if $current_step=='shipping'}step_last_done{elseif $current_step=='payment' || $current_step=='upload'}step_done{else}step_todo{/if}{/if}">
	<span>
		{if $current_step=='payment' || $current_step=='shipping'}
		<a href="{$link->getPageLink('order.php', true)}?step=1">
			{l s='Address'}
		</a>
		{else}
			{l s='Address'}
		{/if}
	</span>
	<ins></ins>
</li>
<li class="{if $current_step=='shipping'}step_current{else}{if $current_step=='payment'}step_last_done{elseif $current_step=='upload'}step_done{else}step_todo{/if}{/if}">
	<span>
		{if $current_step=='payment'}
		<a href="{$link->getPageLink('order.php', true)}?step=2">
			{l s='Shipping'}
		</a>
		{else}
			{l s='Shipping'}
		{/if}
	</span>
	<ins></ins>
</li>

 

etc etc ...

 

together with that goes the global.css (in the themes/css folder) and around rule 712 in my file i blotted out the original code like this

 

/* steps (like order step) */
/*
ul.step {
background: transparent url('../img/step_start.gif') no-repeat bottom left;
list-style: none;
margin: 0.8em auto 2em;
padding-left: 40px;
height: 25px;
width: 465px
}
ul.step li {
height: 25px;
float: left;
width: 100px;
text-align: center;
background: transparent url('../img/step_standard.gif') no-repeat bottom left
}
ul.step li.step_current {
background: transparent url('../img/step_current.gif') no-repeat bottom left;
font-weight: bold
}
ul.step li.step_todo { font-style: italic }
ul.step li#step_end { width: 40px }
ul.step li#step_end { background: transparent url('../img/step_end.gif') no-repeat bottom left }
ul.step li#step_end.step_current { background: transparent url('../img/step_end_current.gif') no-repeat bottom left }
ul#order_step { background-color: white }
*/

 

and replaced it with

 

ul.step {
list-style: none;
width: 100%;
background-color: #fff;
height: 70px;
padding: 10px 0;
}
ul.step li{
position: relative;
height: 70px;
width: 20%;
list-style: none;
float: left;
background-image: url(../img/stepsSpr.gif);
background-repeat: repeat-x;
background-position: left -280px;
background-color: #0E96CC;
vertical-align: middle;
}
ul.step li ins {
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 26px;
height: 70px;
background-image: url(../img/stepsSpr.gif);
background-repeat: no-repeat;
background-position: right top;
}
ul.step li.step_current ins{
background-color: #CD3C0F;
background-position: right -70px;
}
ul.step li.step_last_done ins{
background-color: #CCC30E;
background-position: right -140px;
}
ul.step li.step_done ins{
background-color: #CCC30E;
background-position: right -210px;
}
ul.step li.step_current{
background-position: left -350px;
background-color: #CD3C0F;
}
ul.step li.step_last_done, ul.step li.step_done{
background-position: left -420px;
background-color: #CCC30E;
}
ul.step li span a {
color: #fff;
}
ul.step li span{
position: absolute;
width:120px;
display:block;
left:5px;
top: 30px;
font-weight:bold;
color: #fff;
}

 

and ofcourse make sure that you have the right image in the themes/img folder

 

!! please keep in mind that i modified (i replaced a step and mode a complete new template for it, i rearanged them , etc...) the order-steps.tpl and that a simple copy paste may not work completely for you !!

[willcm]

Really grateful for these tips, I've developed for my own site, this is with standard order steps - i.e. still 5 steps, and I've included an ai file for the backgrounds so that you can style in your themes colours

 

so in order steps.tpl replace all with this

 

{*
* 2007-2011 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 6594 $
*  @license	http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{* Assign a value to 'current_step' to display current style *}
{if !$opc}
<!-- Steps -->
<ul class="step" id="order_step">
<li class="{if $current_step=='summary'}step_current{else}{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}step_done{else}step_todo{/if}{/if}">
 <span>
 {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}
 <a href="{$link->getPageLink('order.php', true)}{if isset($back) && $back}?back={$back}{/if}">
  1. {l s='Summary'}
 </a>
 {else}
  1. {l s='Summary'}
 {/if}
 </span>
 <ins></ins>
</li>
<li class="{if $current_step=='login'}step_current{else}{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}step_done{else}step_todo{/if}{/if}">
 <span>
 {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}
 <a href="{$link->getPageLink('order.php', true)}?step=1{if isset($back) && $back}&back={$back}{/if}">
  2. {l s='Login'}
 </a>
 {else}
  2. {l s='Login'}
 {/if}
 </span>
 <ins></ins>
</li>
<li class="{if $current_step=='address'}step_current{else}{if $current_step=='payment' || $current_step=='shipping'}step_done{else}step_todo{/if}{/if}">
 <span>
 {if $current_step=='payment' || $current_step=='shipping'}
 <a href="{$link->getPageLink('order.php', true)}?step=1{if isset($back) && $back}&back={$back}{/if}">
  3. {l s='Address'}
 </a>
 {else}
  3. {l s='Address'}
 {/if}
 </span>
 <ins></ins>
</li>
<li class="{if $current_step=='shipping'}step_current{else}{if $current_step=='payment'}step_done{else}step_todo{/if}{/if}">
 <span>
 {if $current_step=='payment'}
 <a href="{$link->getPageLink('order.php', true)}?step=2{if isset($back) && $back}&back={$back}{/if}">
  4. {l s='Shipping'}
 </a>
 {else}
  4. {l s='Shipping'}
 {/if}
 </span>
 <ins></ins>
</li>
<li id="step_end" class="{if $current_step=='payment'}step_current{else}step_todo{/if}">
 <span>5. {l s='Payment'}</span>
</li>
</ul>
<!-- /Steps -->
{/if}

 

and in theme folder -> css -> global.css: overwrite the cart steps (mine is around line 448 - remember to change image directory to reference yours):

 

/* CART steps *********************************************************************** */
ul.step {
	list-style: none;
	width: 100%;
	background-color: #fff;
	height: 70px;
	padding: 10px 0;
 margin-bottom:10px;
}
ul.step li {
position: relative;
height: 66px;
width: 20%;
list-style: none outside none;
float: left;
background-image: url("/img/stepsspr.gif");
background-repeat: repeat-x;
background-position: left -276px;
background-color: rgb(0, 128, 127);
vertical-align: middle;
}
ul.step li ins {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 26px;
	height: 66px;
	background-image: url(/img/stepsspr.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
ul.step li.step_current ins {
background-position: right -69px;
}
ul.step li.step_last_done ins{
	background-color: rgb(0, 128, 127);
	background-position: right -140px;
}
ul.step li.step_done ins{
	background-color: rgb(0, 128, 127);
	background-position: right -139px;
}
ul.step li.step_current {
background-position: left -343px;
background-color: rgb(0, 128, 127);
}
ul.step li.step_last_done, ul.step li.step_done{
	background-position: left -345px;
}
ul.step li span a {
	color: #fff;
 text-decoration:none;
}
ul.step li span {
position: absolute;
width: 80%;
display: block;
top: 25px;
font-weight: bold;
color: rgb(255, 255, 255);
font-size: 14px;
text-align: right;
}

 

stepssprWCMGROUPED.zip

Edited November 20, 2012 by willcm (see edit history)

[willcm]

Since I've shared the above I'd be grateful if someone could tell me how to skip the payment selection, I only have one payment method with is Sage Pay so instead of showing the payment selection screen I want it to go straight to the payment form - how do I do this?

 

Thanks

Will

[redtango2]

Does it work with One Page Check Order on PS 1.5.2. ?

Best R