One page checkout - hide shipping and payment until address button clicked

[daverr]

anyone know how to hide the shipping and payment methods in one page checkout until address has been saved?

 

been playing with the tpl files but haven't managed it yet. The save address button is confusing and easily missed by users, would be much simpler if you didn't see shipping and payment info until this was clicked.

 

thanks

[DenisDenis]

Also looking for the answer to this, this one page checkout is really annoying me, so poorly designed...

[Daaaaad]

I agree with you guys, PrestaShop members please help us

[JonyWei]

Also looking for the answer to this.

Another problem is _ If the buyer adds an address in one page checkout, the buyer can not go back to one page checkout by clicking "previous" in addresses page.

 

Edited September 19, 2012 by JonyWei (see edit history)

[JonyWei]

Anyone knows??

[DenisDenis]

Horrible one page checkout, only solution I guess is to pay for a one page checkout, but it easily costs €70 which i think is alot for a function that is already in prestashop...

[vasikgreif]

I solved this by a little bit of jquery and css:

 

add to order-opc.css:

#opc_payment_methods {display: none;}

 

add to order-opc.tpl:

 

 

<script>
$( document ).ready( function() {
if($(".address_delivery").length == 0) {
$("#submitAccount").click(function() {
 $('#opc_payment_methods').show();
});
}
else {
 $('#opc_payment_methods').show();
  }
 });
</script>

 

In order-payment.tpl I moved the line

 

<div id="opc_payment_methods" class="opc-main-block">

 

before

{if !$opc}<h1>{l s='Choose your payment method'}</h1>{else}<h2><span>2</span> {l s='Choose your payment method'}</h2>{/if}

 

So, basically when doing guest checkout, the payment div is hidden unless clicked on the save button, when registering, the payment div is displayed right away.

 

 

 

There might be better way to do this (I'm no way an expert), but this seems to work fine for me.

Edited February 19, 2013 by vasikgreif (see edit history)

[vasikgreif]

Ok, here's better version of that. Uses jQuery only:

 

 

<script>
$( document ).ready( function() {
if($(".address_delivery").length == 0) {
   $('#opc_payment_methods').hide();

   $("#submitAccount").click(function() {
     $('#opc_payment_methods').show();
   });
   } 

$("#openLoginFormBlock").click(function() {
 $('#opc_payment_methods').show();
});
 });
</script>

[charlie123]

Ok, here's better version of that. Uses jQuery only:

 

 

<script>
$( document ).ready( function() {
if($(".address_delivery").length == 0) {
$('#opc_payment_methods').hide();

$("#submitAccount").click(function() {
  $('#opc_payment_methods').show();
});
}

$("#openLoginFormBlock").click(function() {
 $('#opc_payment_methods').show();
});
 });
</script>

 

Thanks for that!

 

The only problem is, when customer will click Save button without filling any details, the payment and delivery block will become visible. Is it possible to prevent it? Also I think you are missing the closing /if tag

[vasikgreif]

Well, I tried

 

   $("#submitAccount").click(function() {
  if($(".error").is(':hidden')) {
    $('#opc_payment_methods').show();
  }
  });

 

which should check if the error div is hidden, and if so, display the shipping, but for some reason this doesn't work - if someone is able to make it work, it would be the best way, I think.

 

What works to some extent is to check if the fields contain a value, if so, reveal the shipping. This is not that great solution, because it doesn't check, if the value is valid. Anyway, the code looks like (feel free to add other fields if you want to use this):

 

 

 $("#submitAccount").click(function() {
     if($("#email").val() && $("#customer_firstname").val() && $("#customer_lastname").val() ) {
       $('#opc_payment_methods').show();
     }
     });

[charlie123]

Thank you for that!

 

Yes, the second code works fine for now but it would be better with the first solution which don't really work for some reason.

 

Also, do you know how I can set the field email to check if the value contains "@" sign?

 

Regards

[vasikgreif]

Don't have time now to post full code, but the code necesarry for the email validation can be found here:

 

http://stackoverflow.com/questions/2507030/email-validation-using-jquery

[hmmmtasty]

Thank you all for posting your suggestions, I also thought that the way prestashop handles the one page check out was confusing.

 

Here is the solution I thought up, with the help from everyone who perviously posted. I am a j-query nooby so if any one knows a better way please share .

 

$(document).ready(function() {
 // check if .address_address1 has value, if it does user is logged in (I assume) and will not hide divs
 if($('.address_address1').length == 0) {
  $('#opc_payment_methods').hide();
  $('#opc_delivery_methods').hide();
  alert ('Hidden payment & delivery');
 }
 else {
  alert ('Shown payment & delivery');
 }


 $('#submitAccount').click(function() {
 // set time out for error message to hide before function fires, this is incase error was displayed and corrected causing arguement to be false.
  setTimeout(
function(){
 if($('#opc_account_errors').is(':hidden')) {
 $('#opc_delivery_methods').show();
 $('#opc_payment_methods').show();
 alert ('show guest on click');
}
 else {
  alert('Error! not all fields filled in');
 }	
 },
  100)

 });
});