Getting Floating Labels back

  • Resolved alx359

    (@alx359)


    2 years, 7 months ago

    The Flatsome theme offers a neat and more compact label layout option called Floating Labels that actually I prefer than the standard labels in Fluid Checkout. For example: https://postimg.cc/KRx7nc2T

    When the checkout page loads with Fluid Checkout in multi-step mode, the nicer Floating Labels appear for a few seconds but then revert back to defaults, presumably as they get dynamically suppressed by something in the plugin code. (The style switching looks a bit clunky, too.)

    I see you already offer Flatsome compatibility with compat-theme-flatsome.php, but I’m yet unable to find the pertinent snippet of code to switch off said suppressor.

    Could you please hint how to get the Floating Labels back?

    Thanks.

    PS. For reference, this is the Flatsome code that appears to implement the Floating Labels:

    themes\flatsome\inc\woocommerce\structure-wc-checkout.php

    /* Floating labels option */

function flatsome_checkout_scripts() {
  if(is_checkout() && get_theme_mod('checkout_floating_labels', 0)) {
    wp_enqueue_script( 'flatsome-woocommerce-floating-labels', get_template_directory_uri() .'/assets/libs/float-labels.min.js', array( 'flatsome-theme-woocommerce-js' ), '3.5', true );
    wp_dequeue_style( 'selectWoo' );
    wp_deregister_style( 'selectWoo' );
    wp_dequeue_script( 'selectWoo' );
    wp_deregister_script( 'selectWoo' );
  }
}

add_action( 'wp_enqueue_scripts', 'flatsome_checkout_scripts', 100 );

function flatsome_checkout_body_classes( $classes ) {
  if( is_checkout() && get_theme_mod('checkout_floating_labels', 0))  {
    $classes[] = 'fl-labels';
  }
  return $classes;
}
add_filter( 'body_class', 'flatsome_checkout_body_classes' );
Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter alx359

    (@alx359)

    Okay, delved some more into this, and noticed that the suppressing code seems to stop if I tweak this line:

    \fluid-checkout\js\checkout-201.min.js

    window.can_update_checkout = true;
    to:
    window.can_update_checkout = false;

    Frankly, I don’t yet understand the side-effects of this, but hope the team would be willing to do a proper tweak that doesn’t disable the Floating Labels feature of Flatsome, as it really makes Fluid Checkout even more compact and streamlined than before.

    Thanks in advance for your consideration!

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @alx359,

    This has been fixed and will be available with the next update.

    The problem was that Flatsome did not expect fields to be replaced in the checkout page while Fluid Checkout does need to replace the fields when updating the checkout fragments.

    The solution was to call the rebuild process from the Flatsome floating labels script after each checkout update.

    The code mentioned in your last message will disable checkout updates, which are necessary for Fluid Checkout to work properly. For that reason, I do not recommend changing window.can_update_checkout = false; as this can break the checkout functionality.

    I let you know once the update with this fix is available.

    Best,
    Diego

    Thread Starter alx359

    (@alx359)

    That’s great news Diego. I’m eagerly waiting the next update ??

    Thread Starter alx359

    (@alx359)

    Tested 2.0.3-beta-2and it seems you’ve included this fix in, and it seems to be working well, too.

    Now noticed a cost though. The very useful in-context search for country/state is gone when the Flatsome’s Floating Labels feature is enabled. Flatsome alone w/o FC has the same issue. Not sure if an omission of their part in the latest build, or a limitation of the script they use. (I recall the Floating Labels feature having in-context capability in other similar to FC plugins, but they seem to use their own implementation.)

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @alx359,

    Yes, this has also been fixed for the next version.

    When the Floating Labels feature is enabled, the “in-context search” is disabled by the script itself. It seems to be a limitation of the implementation of floating labels used by Flatsome.

    I suggest you contact the Flatsome team directly to inquiry about it.

    Best,
    Diego

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @alx359,

    Just released the update 2.0.3 with the fix for the overlay with the Flatsome theme.

    Best,
    Diego

    Thread Starter alx359

    (@alx359)

    Hi Diego,

    Thank you very much for the 2.0.3 update, with so much little improvements. Much appreciated!

    I’m using this same thread to report another small UI/usability issue that seems to concern Flatsome.

    The issue is that Fluid Checkout isn’t respecting some styles, even if !important applied. Namely, when the page re/loads, the border-radius and padding styles seem lost during the re-population process for the dropdown form elements (tested with FF/W10). Please see it here: https://mega.nz/file/CDhnTKwY#bSblxh1EmE3ZzwvldOqmxnZY0UABFxT8xKeoT8RijjM

    Thread Starter alx359

    (@alx359)

    (As found out the issue isn’t Flatsome-specific, I’ve opened a new thread and I’m closing back this.)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Getting Floating Labels back’ is closed to new replies.