Altering Checkout Layout and Functionality

  • Posts: 31
  • Thank you received: 0
12 years 2 months ago #64943

Nicolas,

So, our client would like the address management section of the checkout process adjusted, and I'm not sure what our options are here. I'll try to outline this as best I can, and would greatly appreciate your feedback on whether each is possible, what would be involved in doing them, and whether or not each option would require additional development to achieve.

1) The checkout process shows one address for billing (the one that was entered at registration), along with an Edit button. If the billing address is edited, the existing address would be replaced by the new one, and the old address would not show up in the list. On the shipping side, if the "use same address for shipping" box is unchecked, the existing address would appear on the shipping side, along with an Edit button. If the address is edited, the new address will replace the old shipping address. Neither side would ever show more than one option. There would be no Delete button on either side.

2) When the user gets to the checkout screen, they are presented with two columns. The billing column has the address form with the fields pre-filled with the information entered at registration. Under that is a "use same for shipping" box. In the shipping column, the same fields are presented, also pre-filled, but grayed out until the checkbox is unchecked. Either side can be edited independently and then submitted to continue with payment.

Basically, the client thinks the address management is confusing. They don't like that every address entered is available in both the billing and shipping sides, and that if an address is deleted on the shipping side it is also deleted on the billing side (or if one is added on the shipping side, it also appears on the billing side). They would like the billing and shipping addresses to be separate and not connected.

Would it be possible to accomplish either of these? If they would require development time, could you provide me with an estimate? Could I accomplish anything similar on my own with edits to the view?

Also, on another note: Is it possible to condense empty optional fields in the address display so that they are not displayed as blanks on the front end? It makes the address selection screen confusing when there are gaps in each listing.

Thank you again!

Please Log in or Create an account to join the conversation.

  • Posts: 82818
  • Thank you received: 13362
  • MODERATOR
12 years 2 months ago #65091

Hi,

All these modifications are possible by editing the file "address_view" of the "checkout" view via the menu Display->Views.
For example, if you want to always have only one address on each side of the address area, you can add the line:
if(empty($checked)) continue;
before the line:
if($this->config->get('auto_submit_methods',1)&&empty($checked)){
In that case, you will also want to hide the radio button with some CSS.

You can't condense the empty fields in the address template as you can't have conditional php in it.

The following user(s) said Thank You: pulsemarketing

Please Log in or Create an account to join the conversation.

  • Posts: 31
  • Thank you received: 0
12 years 2 months ago #65094

Thank you, Nicolas.

Would it be possible to have one address per side, but have them be different? The way the cart is currently configured, if only a single address is present, it seems it will always be the same one (and if it is edited, both sides will change).

Please Log in or Create an account to join the conversation.

  • Posts: 82818
  • Thank you received: 13362
  • MODERATOR
12 years 2 months ago #65097

That's already how it should be with that modification.

Please Log in or Create an account to join the conversation.

  • Posts: 31
  • Thank you received: 0
12 years 2 months ago #65103

I applied that change, and it seems to be working correctly - both sides operate independently and can be edited without affecting the other. Thanks!

Is there a specific class for the address selection radio button so that I can hide only it and not other radio buttons on the site?

Also, our client was wondering if it would be possible to have the shipping address and edit/new button visible even when the checkbox is checked. I understand why it works the way it currently does (and feel that it makes sense), but I want to have an answer for that question in case they really want it to be that way.

Please Log in or Create an account to join the conversation.

  • Posts: 82818
  • Thank you received: 13362
  • MODERATOR
12 years 2 months ago #65265

Yes, it's:

.hikashop_checkout_billing_address_radio,.hikashop_checkout_shipping_address_radio{ display:none;}

And for the shipping area always visible, you can do like that:
#hikashop_checkout_shipping_div{display:auto !important;}
However, if the user uncheck and check again the checkbox, the area will be hidden as the javascript takes the precedence over the CSS in the DOM of the browser.

Please Log in or Create an account to join the conversation.

  • Posts: 31
  • Thank you received: 0
12 years 2 months ago #65274

Got it - thank you! I think it makes more sense to leave the checkbox behavior as-is based on what you said.

Please Log in or Create an account to join the conversation.

Time to create page: 0.063 seconds
Powered by Kunena Forum