# AJAX Transitions
One of the key features of Rhye is its seamless transitions between pages. This technique is called AJAX or, to be more precise PJAX. It can be enabled in Customizer → Theme Options → AJAX Transitions
.
Permalinks Structure
There is an important requirement to make AJAX transitions function properly. You have to set your permalinks structure to any of style EXCEPT Plain

Plain
permalinks style is not compatible with AJAX transitions# Preventing Links Conflicts
If you want certain links to be prevented from AJAX transition, you can specify their jQuery selectors in Customizer → Theme Options → AJAX Transitions
. This may be useful if a 3rd-party plugin outputs a markup with <a href="https://...">...</a>
tag but you don't want to go another site page by clicking on it (for example, it can be a Lightbox Gallery).
There are some built-in rules that already handle some common cases for you:
'[target=_blank]', // links that open new in window
'[data-elementor-open-lightbox]', // Elementor lightbox gallery
'.lang-switcher a', // Polylang & WPML language switcher

# Excluding Specific Pages
Some of the 3rd-party scripts and plugins are technically impossible to make AJAX compatible. To let them function properly browser has to perform a page refersh to reload and initialize the page scripts. If you don't want to turn off AJAX navigation completely for the whole website there is a posibility to exclude a certain page from AJAX.
Being in Edit with Elementor
mode go to Document Settings → Page Transition
. There you may tune the AJAX router rules for that specific page.
# Excluding WooCommerce Pages
Rhye theme is NOT compatible with WooCommerce. There are no layouts or styling for the shop pages provided by the theme. If you'd like to use WooCommerce anyway you need to exclude WooCommerce pages from AJAX navigation to avoid any issues with the store frontend.
Once WooCommerce is activated there will appear a toggle which allows to exclude all the WooCommerce pages from AJAX navigation in one click.


# Extending Plugins Compatibility
JavaScript plugins don't work after page transition?
When extending the theme functionality with a JavaScript plugin that’s not included to the package, you may run into an issue. Your plugin may work good after the initial site load. But when it comes to any AJAX transition it doesn’t initialize. This is an expected behavior due to the nature of AJAX technology.
Normally the page initilizes scripts each time it's loaded by browser. But when AJAX navigation is enabled it loads only once initially. The rest navigation is performed without any page refresh. So to make the 3rd-party scripts work you need to re-init them manually each time an AJAX transition occurs.
The theme has a special field where you can place JavaScript initialization code for your scripts.

# Updating Head Styles
Some of 3rd-party scripts load their CSS files on the pages only whenever it's required. While this approach is good in terms of assets optimization, it doesn't work when it comes to AJAX navigation where all the resources have to be loaded once right after the initial page render. However it's still possible to selectively refresh/load the stylesheets based on their IDs.
There is Update Page Head Nodes
field in Customizer → Theme Options → AJAX Transitions
. There you may define what styles the theme needs to look for and update them if required.
The field accept HTML selectors and may be useful to add compatibility with 3rd-party Elementor addons.
'link[id*="eael"]', // Essential Addons plugin post CSS
'link[id*="theplus-"]', // ThePlus Elementor addon post CSS
'style[id*="eael"]', // Essential Addons plugin inline CSS
'style[id*="theplus-"]', // ThePlus Elementor addon inline CSS