Working methodically - checkout.php - problems all over the place with it.

Thank you for your call yesterday Jason. That has settled any confusion over how the Checkout Wizard works. If you don't mind, I'd like to work through my pages methodically with you in order to resolve any outstanding issues, of which there are many...starting with checkout.php.

https://www.ledwarehouseuk.com/shopping-basket.php > https://www.ledwarehouseuk.com/checkout.php

1) For the life of me, I can't get my card graphics to sit aligned with the radio button the way the PayPal icon, opposite it, is. Is this something to do with the numerous formList, forItem, formGroup references and their associated CSS stylings? I've tried putting it all into a table, with two columns, but it's still all over the place. How do I fix that?

2) When I select the PayPal payment option, the Shipping form slides up and obscures the Billing form, however the Group Header for the Billing form remains rendering the Shipping Group Header unreadable.

3) How do I prevent the Billing form overlapping the Billing Group Header? The Shipping form is doing something similar, but not as noticeably.

4) How do I modify the jQuery Validation for any of the form fields? For example, 10 digit telephone number isn't relevant.

5) I have moved the "Company_Name" field below the "Phone" field on both the Billing and Shipping parts of the form and have changed the label text to "Mobile", however I have not changed the name of the form field itself for fear of wrecking the form and subsequently causing problems on the receiving action page/s or the jQuery Validation for that field. Is it safe to change that form field name and will the subsequent page/s pick up on that change automatically?

6) The form field labels appear to be top aligned to the form fields. How do I vertically align those so that they look more in balance?

7) Can I have the Billing and Shipping forms pre-populated with a logged in users billing and shipping addresses? At the moment I assume both fields default values are set to retain the validated entries so I was concerned about overwriting those.

8) If I click "Same as Billing" and it fills in the Shipping form but I THEN notice a change in the Billing form, correct that change, and then untick and re-tick the "Same as Billing" checkbox...well...try it yourself. BOTH forms disappear and we are now faced with the Order Confirmation and Payment Info sections.

9) Oh, and the Payment Info Group Header is being overlapped by the payment info form - much like the Billing and Shipping Group Headers.

10) When I click "Continue" we get the "Please wait" progress bar and nothing else happens from that point on.

Hoping you can help us with these issues.
Thank you
NJ

1) move the checkbox into the span that contains the CC images. on the checkbox tag, add margin-top 15px and margin-right 10px


2, 3, 9) These appear to be issues with conflicting CSS though am not able to find the conflict. try detaching your design CSS to see if the problem persists, I know that this behaivor does not hapoen to the checkout pages as they are gererated by the wizard, so there must bee something i nthe CSS you are adding afterwards to cause the behavior

4) go to WebAssist -> Forms -> Jquery validation to edit the jquery settings for the form

5) changing the labels is fine, but do not change the form element names

6) i dont follow, the labels look properly aligned to me, at any rate, any change to the positioning of the labels would be done by editing the CSS

7) yes, you can prepopualte the form elements by chaning the value, for example the email field:

value="<?php echo(WA_coalesce(array(WA_getSavedFormValue("CheckoutWizard_Sharp_Default","Email_Address_2"),(isset($_GET["invalid"])?ValidatedField("confirmcart","Email_Address_2"):"")))); ?>"


this uses a ternary expression, you can add a recordset referance to the last argumet:
value="<?php echo(WA_coalesce(array(WA_getSavedFormValue("CheckoutWizard_Sharp_Default","Email_Address_2"),(isset($_GET["invalid"])?ValidatedField("confirmcart","Email_Address_2"):$row_reccordsetName['ColumnName'])))); ?>"

8, 10) I'll need to troubleshoot directly, see the private message section.

1) Have done that, but now it's out of line with the PayPal radio button and if I try to move the PayPal radio button into its associated span then the Billing Address Group Header goes all wonky! (wraps around them both)

2, 3, 9) Completely removed our CSS and the problem remains. I'm not convinced that it's related to our stylesheet which is, really, only styling the header and footer sections.

4) Thank you.

5) OK

6) They are top aligned in IE11. I'll check the CSS.

7) Does it matter that you've removed the quotes at the end of the first ternary expression?

value="<?php echo(WA_coalesce(array(WA_getSavedFormValue("CheckoutWizard_Sharp_Default","Email_Address_2"),(isset($_GET["invalid"])?ValidatedField("confirmcart","Email_Address_2"):"")))); ?>"

value="<?php echo(WA_coalesce(array(WA_getSavedFormValue("CheckoutWizard_Sharp_Default","Email_Address_2"),(isset($_GET["invalid"])?ValidatedField("confirmcart","Email_Address_2"):$row_reccordsetName['ColumnName'])))); ?>"

..so you've replaced the double quotes with $row_reccordsetName['ColumnName']

8, 10) See below.


PS. I've just noticed that there are now problems with the Country and State fields in both forms. I basically just want a drop down menu for Scotland, Wales, Northern Ireland and England for Country and an input text field for State. I was worried about deleting the Countries out, as you'd previously advised, because it struck me that the State field was dependent on selections in the Country menu.

1) add:
style="margin-top:10px;"

to the div that contains the paypal logo

2) the real test is to go back to the unchanged checkout pages before you added your design to it. test the pages before adding your design.

in all reality, most stores use a very basic page design for the checkout pages, no menus, or footers, just a basic header, a link to the home page and the checkout details. a full page design is not needed on the checkout pages, by having all the footer links and the main navigation and other bells and whistles, you give the customer more options to back out of the checkout process and abandon the order


6) I dont see them being top aligned in IE 11, but still, position changes are done by editing the CSS

7) "..so you've replaced the double quotes with $row_reccordsetName['ColumnName']"
yes, that is correct

the other issues I Will have to look at a little later as I have other customers to attend to.

1) Thank you.

2) We've removed our stylesheet. The only other stylesheet on the page is for CSSMenuWriter! :(
This isn't a bells and whistles page Jason, it's a header, content and footer layout, very basic, with CSSMenuWriter navigation.

I, and crucially, my client really like the integration with the existing page styling. If I strip everything out and leave only what's been created by the Checkout Wizard, would you agree to take a look at it for us?

(http://www.ledwarehouseuk.com/template-nothing.php - checkout page with nothing on it at all apart from the checkout functionality)

Everything else) Will wait to hear from you. Thank you.

NJ

I have forwarded this to Ray to ask him to take a look, I'll let you know when i hear something back.

Ray said he would give a call through Skype a little later to troubleshoot.

Thank you Jason. I'll wait to hear from Ray.
NJ

Outstanding Items...

1) Selecting PayPal as the payment option no longer hides the billing address.

2) Odd overlapping form and group header.

3) Country and State - previously the State field would change to a text input field but now it remains as a drop down even though we've removed countries that have state options.

4) We have a recordset (rsUSER) on the checkout page that pre-fills the billing form is a user is logged in. However, this recordset is throwing the following error at the foot of the page:
Warning: mysql_free_result(): 17 is not a valid MySQL result resource in /home/led2014/public_html/checkout.php on line 710
We have this recordset on other pages of the website but the error only occurs on the checkout page.

5) We changed the jQuery Validation for the 2 telephone number fields but when we try to submit the form now it keeps asking us to enter a telephone number.

Appreciate the help, thank you.
NJ

mention these to Ray when he contacts you.

Just finished speaking with Ray and we got to the bottom of most of the issues. He said to post in here for any others.
http://www.ledwarehouseuk.com/checkout.php

1) Still having a problem with the jQuery Validation on the phone number fields. I want to allow only numbers and spaces but when I edit the validation via WebAssist > Forms > jQuery Validation it doesn't update.

2) When I click "continue" (non PayPal) I am shown an address just above the Payment Info header. This only appears to be the billing address though. How do I display the shipping address (Delivery Information)?

3) When I click "continue" (PayPal) I'm back to having jQuery Validation problems again and it doesn't submit. Again, only one address is listed.

Appreciate the help, as ever. Thank you.
NJ