Support » Plugin: Fluid Checkout for WooCommerce - Lite » Conflict with Orderable (FREE) plugin, unable to click purchase button

  • Resolved FENG YIN TSENG

    (@fengyintseng)


    Hi,

    Really appreciated for making this plugin. I like it very much.

    When testing it with the other tools I used I found there is conflict with Orderable plugin which will cause the “purchase” button remain grayed and unable to click even when visitors completed all the steps above and confirmed the terms/conditions check box.

    Cleared Varnish and caches and the issue still exists. Later I found that the issue can be resolved only when either Orderable or Fluid Checkout is activated.

    Please check the screenshot (https://d.pr/7CQHIb) and you can see that the purchase button is grayed.

    This issue can be identified with Orderable FREE version installed.
    Please help take a look of the issue.

    Many thanks.

    Best regards,
    Feng

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Contributor fluidweb.co

    (@fluidwebco)

    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://wordpress.org/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

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    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 šŸ˜‰

    Using Your Browser to Diagnose JavaScript Errors

    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

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    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,

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    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

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi Feng,

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

    Best,
    Diego

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    Hi Diego,

    Just created account for you.
    Thanks for the help šŸ™‚

    Best,
    Feng

    Plugin Author Diego Versiani

    (@diegoversiani)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    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

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

    Plugin Author Diego Versiani

    (@diegoversiani)

    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://wordpress.org/support/plugin/fluid-checkout/reviews/#new-post

    Best,
    Diego

    Thread Starter FENG YIN TSENG

    (@fengyintseng)

    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

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Conflict with Orderable (FREE) plugin, unable to click purchase button’ is closed to new replies.