Asli

# AJAX Transitions

Customization Reference
Edit options in 📄 HTML/js/app.js
Options object 🔧 app.options.ajax
Component source 📄 HTML/js/components/AJAX.js
Component source (Gulp) 📄 SOURCE/components/AJAX/AJAX.js

# Default Options

window.app = {
  options: {
    // other options...
    ajax: {
      enabled: true,
      transitionDuration: 2.0,
      transitionEase: 'expo.inOut',
      timeout: 10000,
      preventRules: '',
      updateNodesAttributes: '',
      updateScriptNodes: '',
      loadMissingScripts: true,
      loadMissingStyles: true,
      removeMissingStyles: true,
      evalInlineContainerScripts: true
    },
    // other options...
  }
}

# HTML Markup

Everything outside the Barba container with the [data-barba="container"] attribute will remain unchanged when navigating the website through AJAX. This includes the contents of the page header.

<body>
  <div data-barba="wrapper">
    <main class="page-wrapper" id="page-wrapper" data-barba="container">
      <div class="page-wrapper__content" id="page-wrapper__content">
        ...
      </div>
    </main>
  </div>
</body>

# Customization

# 1. Disabling AJAX navigation

  • Option #1: Unwrap all document contents from the [data-barba="wrapper"] div and remove the [data-barba="container"] attribute from the main container.
  • Option #2: Set the enabled key to false in the component options.
ajax: {
  enabled: false,
  transitionDuration: 2.0,
  transitionEase: 'expo.inOut',
  timeout: 10000,
  preventRules: '',
  updateNodesAttributes: '',
  updateScriptNodes: '',
  loadMissingScripts: true,
  loadMissingStyles: true,
  removeMissingStyles: true,
  evalInlineContainerScripts: true
}

# 2. Excluding rules

If you don't want specific links to trigger the AJAX transition, here are the options:

Add the data-barba-prevent attribute to the link you want to act as a regular link without transitions:

<a href="/downloads/somefile.zip" data-barba-prevent="self">
  Download File
</a>

Add an outer wrapper with the data-barba-prevent="all" attribute for all the links you want to act as regular links without transitions:

<div data-barba-prevent="all">
  <a href="/downloads/somefile1.zip">Download File 1</a>
  <a href="/downloads/somefile2.zip">Download File 2</a>
  <a href="/downloads/somefile3.zip">Download File 3</a>
</div>

# Example 2.3: Add node selectors to preventRules

This option is useful if you don't want to change the existing HTML markup.

<a href="#" class="my-link-class">Link 1</a>
<a href="#" id="my-link-id">Link 2</a>

ajax: {
  enabled: true,
  transitionDuration: 2.0,
  transitionEase: 'expo.inOut',
  timeout: 10000,
  preventRules: '.my-link-class, #my-link-id',
  updateNodesAttributes: '',
  updateScriptNodes: '',
  loadMissingScripts: true,
  loadMissingStyles: true,
  removeMissingStyles: true,
  evalInlineContainerScripts: true
}

# 3. Adding compatibility to 3rd-party scripts

When extending functionality with a JavaScript library that’s not included in the template package, you may run into an issue. Your plugin may work well after the initial site load, but it may not initialize again after an AJAX transition. This is expected behavior because, by default, all the page scripts are not reloaded after an AJAX transition.

You need to re-init all the 3rd-party scripts manually each time an AJAX transition occurs. You can do this by placing the initialization code of your plugin inside the initAJAX function wrapper in the 📄 HTML/js/app.js file:

window.app = {
  // other options...
  initAJAX: () => {
    /**
     * The code you put here will be executed
     * on page load AND on each AJAX transition
     */
  },
  // other options...
}

# 4. Compatibility with Ad trackers

Some popular tracking scripts are already AJAX-compatible with the Asli template. This means you don’t have to write any additional functions to make them work flawlessly. These include:

  • Google Analytics
  • Facebook Pixel
  • Yandex.Metrika

If you need to fine-tune those ad tracking update functions, please refer to _updateTrackerGA, _updateTrackerFBPixel, and _updateTrackerYaMetrika in the component source code file.

← Animations →