Conflict with Orderable (FREE) plugin, unable to click purchase button

Hi Feng,

Thanks for using Fluid Checkout.

I’ve tested Fluid Checkout with the free version of Orderable and found that the place order button only remains grayed out when there are no slots available for delivery due to the Orderable settings.

In your screenshot, I can’t see the delivery date or pickup date field that is placed on the order summary.

Could you confirm this is the right Orderable plugin and the settings used for it?
https://www.ads-software.com/plugins/orderable/

Here are some screenshots of our tests:

1. Place order button is grayed out and not clickable, but there are no delivery slots available, the same happens when using pickup date instead:
https://t2449427.p.clickup-attachments.com/t2449427/3fbb4e56-fbdc-4008-aa9f-92533e93902f/Screen%20Shot%202021-07-22%20at%2006.44.46.png?view=open

2. Orderable settings, with delivery dates and time options missing:
https://t2449427.p.clickup-attachments.com/t2449427/d63262ad-8510-4b47-b166-3c86a432db8d/Screen%20Shot%202021-07-22%20at%2006.49.43.png?view=open

3. Once delivery dates and time slots are set up on Orderable, the place order button stays clickable even without selecting a date or checking the terms and conditions checkbox:
https://t2449427.p.clickup-attachments.com/t2449427/d62a3b52-2356-486d-a1d2-9de7cafccc74/Screen%20Shot%202021-07-22%20at%2006.51.33.png?view=open

I hope this helps ??

Best,
Diego

Hi Diego,

Yes. It’s the plugin I am using now.

Frankly, for this site I am planning to utilize only its 1. sidebar mini cart feature to shorten the purchase process 2. Layout builder – insert shortcode to fast build page. So I did not activate the “Delivery” and “Pickup” features.
(not going to let buyers to specify the deliver date)

I leave all the configurations blank under Orderable > Store Settings page.
Please check – https://d.pr/i/pzK1mX

Without activating Fluid Checkout plugin, under such configurations in Orderable there will be no issue with the “Purchase” button.
Please check – https://d.pr/i/wrxPFd

Does it mean the Delivery date is mandatory info for Fluid Checkout?

Best regards,
Feng

Hi Feng,

I tried now with the Orderable settings empty as per your screenshot and had no issues whatsoever.

I noticed the settings pages available as on your screenshot is a little bit different than I have here, yours have the “Dashboard” tab as well while here I do not see this tab.

Does it mean the Delivery date is mandatory info for Fluid Checkout?

No, Fluid Checkout does not have any specific feature or customization regarding the delivery date or pick-up date.

Questions:

1. Are you using the Orderable PRO version?

2. Are there any Javascript errors in the browser console log?
I think you know how to check that, but here are some instructions anyway ??
https://www.ads-software.com/support/article/using-your-browser-to-diagnose-javascript-errors/#chrome

3. Could you confirm that you cannot click the place order button, or if it is just shown in a different style?
Please also check the CSS classes the place button has:
https://t2449427.p.clickup-attachments.com/t2449427/331c3def-283e-4148-b99c-3e3852222f8b/Screen%20Shot%202021-07-22%20at%2010.35.09.png?view=open

In case it is just the button style/classes, I just added a new filter hook fc_place_order_button_classes that will allow developers to change the classes used for the button, this will be available with the next version release 1.2.5.

Best,
Diego

Hi Diego,

Yes I have PRO version, but I confirmed that the issue remains when there is only FREE plugin activated.

And yes, I checked there is no error from Chrome > Console section when loading pages, placing order and inputting contact info.
Please check – https://d.pr/i/R4Tt77

I also think about it, maybe it’s because both plugins tried to change the state of the button and causing conflict. I can see the CSS classes you mentioned.
Please check – https://d.pr/i/wSpepZ

If it’s cause I would be willing to test the beta version of v1.2.5 ??

Best regards,
Feng

Hi Feng,

I can see the button is indeed set as disabled, so this issue is not about the CSS classes applied.

Fluid Checkout does not change the state of the place order button.

I’ve checked the code of the Orderable plugin and they rely on the existence of a
field with the class orderable-field--invalid applied to define if all fields are valid or not.

1. Could you check in the HTML and elements inspector if there are any fields or elements with the class orderable-field--invalid applied?

Best,

Hi Diego,

Search the html of checkout page, no “invalid” wording in there. But there is 1 “disable”:
<div class="fc-place-order"><button disabled type="submit" class="button alt fc-place-order-button" name="woocommerce_checkout_place_order" id="place_order" value="下單購買" data-value="下單購買">下單購買</button></div>

Checked Chrome > Elements and search for “invalid”, there are 15 classes’ name started with “woocommerce-error invalid-xxx” but nothing related to orderalbe-field–invalid.

Btw, forgot to mention that I am using Blocksy theme and I found .disabled can be found in /wp-content/themes/blocksy/static/bundle/main.min.css?ver=1.8.3.4
Please check – https://d.pr/i/8IIFpO

Not sure if it relates.

Best,
Feng

Hi Feng,

The disabled is added by Orderable, and checking the code, that is the only point I believe could be in conflict with Fluid Checkout as both plugins change the final HTML of the place order button.

I’m using the Blocksy theme for this test, and I’ve disabled all other plugins except “WooCommerce”, “Fluid Checkout” and Orderable. However, I’m still unable to reproduce the problem on my end.

1. Would you mind setting up a copy of your website in a testing environment so we can further test it?

Best,
Diego

Hi Diego,

Sure, that would be even better and more efficient for investigating the issue.
I have became your website’s subscriber already, can I create account with your contact email for you to check the issue?

Best,
Feng

Hi Feng,

Yes, please. Use my business email diego [at] fluidweb.co

Best,
Diego

Hi Diego,

Just created account for you.
Thanks for the help ??

Best,
Feng

Hi Feng,

I copied your WooCommerce and Fluid Checkout settings and now I can replicate the issue on my side.

I noticed this happens only on the first visit to the checkout page, if you refresh the page the button will be enabled as expected. That is for both logged-in and not-logged users.

I’ll continue to investigate the issue and update you here on the progress.

Best,
Diego

Hi Feng,

Found the issue and fixed it. This fix will be officially available in version 1.2.5.

However, I went ahead and updated the Fluid Checkout plugin to version 1.2.5-beta-1 on the testing site you provided, I do not see it happening anymore.

Could you confirm the issue is now gone?

Best,
Diego

Hi Diego,

Just confirmed the previous mentioned issue is resolved.
Thank you so much!! ??

While I further test the function I found there is another issue.
0. do not login if already has an existing account
1. add products into cart, and go to checkout page
2. fill all fields and go to step 4
3. press the purchase button and then it will show red alert mentioning there is existing account with same email address
4. click the “login” linkage in the red alert message box
5. no response for the “login” linkage
(please refer to – https://d.pr/i/pH14f0)

Best,
Feng

Hi Feng,

That is great ??

I just noticed that too while testing the other issue.

With the PRO version, this type of issue will be resolved by allowing existing users to complete the purchase without having to log in and attaching the order to their account based on the email address.

1. Would you mind opening a new support ticket for this new issue so we can close this one?

Ps. I would really appreciate it if you could spare a few minutes to write a review about our plugin, here is a fast link to the review form:
https://www.ads-software.com/support/plugin/fluid-checkout/reviews/#new-post

Best,
Diego

Hi Diego,

No problem. Let me open a new ticket for it. ??
And I will be glad to write a review for your amazing plugin. Can’t wait for the release of PRO version.

Best,
Feng