Elementor Compatibility

  • rydergillen

    (@rydergillen)


    4 years, 10 months ago

    Awesome plugin but doesn’t render in Elementor designer. After inspection of code it looks like Frontend Assets are only loaded when !is_admin() thus this is preventing the plugin from rendering within a page designer (e.g. Elementor).

    I was able to resolve the issue by removing the else statement from Fr_Address_Book_for_WooCommerce->init() and always init() frontend assets regardless.

    Calling enqueue_scripts from within add_action('woocommerce_before_checkout_billing_form', ...) is too late in lifecycle when rendering via a designer, the action hook is called but any calls to register/enqueue a CSS/JS file doesn’t work, and the file is not included at render).

    To get around this issue and prevent the frontend assets from initializing on all admin pages I added the following code toclass Fr_Address_Book_for_WooCommerce_Frontend_Checkout->init() and similar code to other frontend classes

    
add_action('wp_enqueue_scripts', function () {
			if (is_checkout()) {
				$this->enqueue_scripts();
			}
		});

    Would you consider taking a pull req. for these compatibility changes so that your plugin works with popular page designers?

    • This topic was modified 4 years, 10 months ago by rydergillen.
    • This topic was modified 4 years, 10 months ago by rydergillen.
    • This topic was modified 4 years, 10 months ago by rydergillen.
    • This topic was modified 4 years, 10 months ago by rydergillen.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author fahrirusliyadi

    (@fahrirusliyadi)

    4 years, 10 months ago

    Actually, the assets are loaded correctly. The problem is Elementor loads the elements via AJAX thus the select address field is not rendered because it’s only hooked on front-end.

    Does this fix the issue? Also pull requests are welcome on Github.

    Thank you.

    Thread Starter rydergillen

    (@rydergillen)

    4 years, 10 months ago

    It now shows on the checkout page but the CSS for FrontEnd doesn’t load. It looks like woocommerce_before_checkout_billing_form on AJAX call doesn’t not properly enqueue scripts.

    I had to add this to src/Fr_Address_Book_for_WooCommerce_Frontend_Checkout->init() to get the CSS to properly enqueue via AJAX.

    
add_action('wp_enqueue_scripts', function () {
			if (is_checkout()) {
				$this->enqueue_scripts();
			}
		});
    Plugin Author fahrirusliyadi

    (@fahrirusliyadi)

    4 years, 10 months ago

    Please provide the steps to reproduce the issue.

    Thread Starter rydergillen

    (@rydergillen)

    4 years, 10 months ago

    1) Install ‘Fr Address Book’ Plugin

    2) Install ‘Elementor’ Plugin

    3) Edit Checkout Page w/Elementor

    4) Observe ‘Fr Address Book’ Plugin doesn’t render

    5) Apply fix you provided for $this->Frontend_Checkout->init()

    6) Reload Elementor editor (may need to select Shortcode widget and click ‘Apply’; this makes Elementor re-render the shortcode control)

    7) Observe ‘Fr Address Book’ plugin is displayed on Checkout Page w/Elementor

    8) Observe CSS is not loaded, this is evident because the Border Box on Selected Addresss is missing && Radio button is visible and doesnt have display:none.

    9) Open Dev Tools in Chrome, Navigate to Network Tab, Observe many CSS style sheets are being loaded however Fr Address Book CSS - frontend.min.css is NOT.

    10)Now compare to loading the Checkout page on Front End (e.g. normal customer checkout page) and observe the CSS is loaded && this can be confirmed via F12 – Dev Tools – Network

    • This reply was modified 4 years, 10 months ago by rydergillen.
    Plugin Author fahrirusliyadi

    (@fahrirusliyadi)

    4 years, 10 months ago

    Number 8 doesn’t happen to me.

    Which version of PHP, WordPress, plugins and theme are you using?

    Thread Starter rydergillen

    (@rydergillen)

    4 years, 10 months ago

    I have disabled all other plugins/themes/etc. My environment looks like this…

    – WordPress: 5.4.1
    – PHP (fpm-fcgi): 7.4.2
    – Elementor: 2.9.9
    – Elementor Pro: 2.9.5
    – Theme: Hello (Elementor Theme): 2.3.0

    If you still run into issues I will create a minimum reproduction with Docker Compose

    Plugin Author fahrirusliyadi

    (@fahrirusliyadi)

    4 years, 10 months ago

    I don’t have Elementor Pro. Does it work for you if you only use the free version?

    Thread Starter rydergillen

    (@rydergillen)

    4 years, 10 months ago

    No issue persists with only free version…. I will repro this issue with a minimal setup this weekend using Docker WordPress Image + Just the FR Address Book Plugin && Elementor (non-Pro). If I can still reproduce I will link to a git repo with the code I used to reproduce issue.

    Plugin Author fahrirusliyadi

    (@fahrirusliyadi)

    4 years, 10 months ago

    OK

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Elementor Compatibility’ is closed to new replies.