Checkout's Next button requires extra click

  • Posts: 6
  • Thank you received: 0
13 years 3 months ago #3795

It looks like any time anything is changed the Next button actually behaves as an Update button and brings you back to the same checkout page. The order only goes forward if you click Next without having changed any other fields. This *might* be desirable behavior, but there is no visual indication of what is going on in the UI so it is a confusing experience. I would expect to have an Update button to handle field changes and some sort of Submit button to proceed to the next step in checkout. Barring that, there *at least* needs to be a message of some sort explaining why we're back on the same page again.

One way to handle this would be to label the button Update whenever any required fields are not yet filled in. Once everything is there it could change to Order Now or something obvious like that. If fields get changed it could revert to Update using Javascript. These little clues help people feel comfortable with what's going on and it helps avoid worries like "how many times did I just order that?"

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

  • Posts: 45
  • Thank you received: 0
13 years 3 months ago #3803

There is a navigation bar for the checkout process. You can enable it in the settings.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
13 years 3 months ago #3804

You can change the behavior of the checkout using the "workflow checkout" option in the configuration. There is a lenghty explanation of how it works in the documentation: www.hikashop.com/support/documentation/i...hop-config.html#main
You will also be able to display a checkout progress bar so that the user knows where he is with the option "Display checkout progress bar" in the tab display of the configuration. By default we don't show it as the workflow is all done in one step.
By default, the checkout is a one click button once the user logs in. If he changes something, the page has to be reloaded to display him the new information before he can finish the order. But if you choose to display the checkout in several steps, then, the user will go from one step to the other until the last step.

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

  • Posts: 28
  • Thank you received: 0
13 years 2 months ago #4618

Yes, i had the same issue. There is a little note down the bottom that tells you your payment method, and that updates when u change from paypal to bank transfer.
However, I've shopped online for years, and it got me stuck for a while. I'd change payment method, click next, and was still on the same screen. Until after about 10 goes I noticed the little line of text at the bottom of the screen, showing me i'd changed the payment method.

I agree, an Update button, and/or a submit button. It's a bit confusing.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
13 years 2 months ago #4620

If you want, you can auto submit the form when the user selects a payment method. For that, go in the menu Display->Views and edit the file payment of the view checkout. There, in the first input tag you can just add that code:

onclick="this.form.submit(); return false;"

That way, when the user will click next after selecting the payment method, the system will consider it had already displayed the cart with the new information.

Also, as I said in my previous post, in most checkouts out there, you have several screens and the payment is on a separate page than the final confirmation page which means that the system doesn't have to refresh the page when you change something as the price might change. That can also be achieved in hikashop by changing the workflow of the checkout.

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21273

Hi Nicolas,

I have the same issue at the first step of the checkout (address selection), i realize this is because i have deactivated the auto submit option of the checkout tab of the configuration.

However i need this disabled to prevent users from trying to edit the address by directly clicking on it, because it will send them to the next step instead of enabling them to edit the address.

Is there any other way to force the "next" button to continue upon the first click?
I've tried finding a similar item as the input tag (view payment) in the address and address_view to add the onclick="this.form.submit(); return false;" code, but without luck.

Is there anywhere else where i can add this JS?

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21294

It's even simpler now. You can just add the code below at the beginning of the payment view, after the first <?php tag and that will activate the auto submit:

$this->config->set('auto_submit_methods',1);

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21312

I've tried adding it to the view address_view, it does enable the auto submit, but it makes the address "clickable to proceed" again..

Maybe we can fix this the other way around? By disabling the link to proceed at the billing/shipping address at the address view..?

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21325

Sure. You can add the code:
$this->config->set('auto_submit_methods',0);
in the address file of the view checkout for that.

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21326

Tried that, but it just diables the auto submit again, which means the customer has to click the proceed button twice again.

Auto submit would be the solution, if it would not make the address text itself a link

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21330

Did you try to do both modifications at the same time ?

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21361

Tried that now, thought it would just switch the auto submit off/on (0/1)

In the view: adress 0
In the view: address_view 1

Same result, auto submit is enabled and the address itself links to the next page

Tried reversing it:
In the view: adress 1
In the view: address_view 0

Now, auto submit is disabled, which results in the next button needed to be clicked twice
Obviously, the view address_view is processed after the view address, and affects the whole address step of the checkout.

I've also sought everywhere to find the code that makes the address itself a link, (e.g. <a> tags) but without luck..

Any other thoughts on this?

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21366

One modification was in the address file while the other was in the payment file. If you made one in the address file and the other in the address_view, that explains why the modification didn't work.

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21392

Ah, i thought the payment view was just for the payment screen.. So i've tried that now..
The auto submit is now disabled at the address selection screen, now when i click the button to continue to the next page; the same page reloads again(address selection)..

Ps. (With the auto submit code enabled (1) at the checkout/payment view) The behaviour at the payment screen is fine and as expected, you can select a different payment method by clicking on the logo without it getting auto submitted and proceeding to the next page. Also when this is done, just 1 click is enough to finish the order.

Last edit: 12 years 8 months ago by woes.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21416

The payment view is indeed only for the payment.
The problem must be that you have several views on the same step. In that case, when you deactivate the auto submit at the beginning of a view, you should reactivate it at the end of the same file so that the other views don't get their behavior changed. Same for the opposite scenario. If you activate the auto submit at the beginning of a view, you should deactivate it at the end.

It can be activated with:
$this->config->set('auto_submit_methods',1);

and deactivated with:
$this->config->set('auto_submit_methods',0);

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21425

Yes, then i did understand it correctly..

However, the problem is just on ONE view, only the address view (address selection screen).

Problem still is, i need auto submit enabled so 1 click on the next button is enough, but i do not want the side effect, that addresses are made into links, because that's confusing. (people will think they can edit the address by clicking on it).



I've tried disabling auto submit in the beginning of the view, and to put it back on somewhere further down the view to make the next button work ok.
I figured the next button would be rendered somewhere below this code

<div class="hikashop_checkout_shipping_div" id="hikashop_checkout_shipping_div" <?php echo $style;?>>
			<?php
So tried adding the "enable" code there, without luck.. Still needs 2 clicks..


Also tried to enable the auto submit in the global config, and just disabling it when rendering the addresses,
Disabling before these lines:
$this->type = 'billing';
			echo $this->loadTemplate('view');

And enabling after these again:
$this->type = 'shipping';
				echo $this->loadTemplate('view');


This did disable the auto submit before rendering the addresses, and made them "not clickable", however the next button still needs 2 clicks..

Last edit: 12 years 8 months ago by woes.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21465

Ok, I see what you mean now. So remove the customization, and just remove the code:
<label for="hikashop_checkout_<?php echo $this->type;?>_address_radio_<?php echo $address->address_id;?>" style="cursor:pointer;">

and:
</label>

from the file address_view of the view checkout. That way, the address won't be clickable.

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

  • Posts: 47
  • Thank you received: 0
12 years 8 months ago #21471

I see, thank you very much, that worked!

However, now when have edited the shipping address, the next button still needs to be clicked twice..?
I don't understand why though, have enabled the auto submit in the configuration, and to be sure i've also put the enable code in the view.

I'm guessing because i removed the label, i've also removed the auto submit?

Last edit: 12 years 8 months ago by woes.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
12 years 8 months ago #21481

The label is not linked to the auto submit. If you removed just the label, you should not have to click twice. Do you use the latest version of HikaShop ?

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

  • Posts: 14
  • Thank you received: 0
12 years 8 months ago #21486

Now I understand. From this link: " $this->config->set('auto_submit_methods',1); " changing 1 to 0 or vice versa will activate and deactivate auto submit. I wasn't able to figure this out. lol.. Thanks for this one, Nico.

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

Time to create page: 0.108 seconds
Powered by Kunena Forum