Flatsome Pjax

Version 3.18 debuts tailored Pjax functionality. If you're unfamiliar with the term, Pjax stands for "PushState Ajax." In simpler terms, it's a brilliant combination that facilitates ajax-driven navigation on your website. The result? A user experience that feels incredibly smooth, almost like navigating & filtering within a native application. Beyond mere rapid transitions, it refines the overall navigation and filtering experience.

This feature is currently in experimental phase; given the vast WordPress ecosystem, changes and refinements may occur as we gather more feedback and insights. Everything related to how it works or how it is implemented is subject to change.

Mentioned actions or events prefixed with experimental will change when phasing out.

Out of the box

To get started, head over to the settings section Advanced → Content Delivery. Activating any AJAX-related options here will enable the Pjax feature for that specific part.

Customizing with the 'experimental_flatsome_pjax' filter

If you've got a specific vision for your website's navigation or want to enable it on certain links, the experimental_flatsome_pjax filter has got your back.

Utilizing the filter grants unparalleled flexibility, empowering developers to shape and optimize the Pjax experience precisely to their needs. Customize to your heart's content and, as an illustration, here's how you can Pjaxify the WooCommerce's My Account dashboard links.

And ... 🚀 yes, it's really that simple!

Add selectors and processing elements conditionally if you want precise control over where Pjax loads and activates. If not added conditionally it will load & activate globally (which you may want in specific use cases).

Optionally configure style and position for a specific processing element:

Points to note

This feature is geared towards elevating the user experience. However, there are certain aspects to be mindful of:

  • Select2 dropdowns: Is currently not supported.
  • Plugins JS: If you have scripts linked to specific plugins, they might need a reinitialization after a Pjax refresh on the new content loaded. The experimental-flatsome-pjax-request-done JS event is triggered on the body when a request is completed.

Requirements

  • 3.18.0 or greater

Related Articles