503
Free
Add to project

Product support

Get help in the plugin support forum.

Categories

Visit the live demo site

Description

Adds Single Page Application features to the OctoberCMS website.

Requirements

This plugin requires jQuery to be included in your layout/page.

Plugin usage:

  • Add [makeSpa] component to your layout file to enable plugin features.

  • Place content in a container with id #spa-page-content, for example: 

    <div id="spa-page-content">
    {% page %}
</div>

  • Add .spa-link class to any link you need to handle with OctoberSPA plugin for example: 

    <a href="{{ 'home'|page }}" class="spa-link">Home</a>

    Note - plugin doesn't handle "anchors" and blank links such as: 

    <a href="#">Just a link</a>
<a href="#services">Services</a>

  • You can also add .spa-link class to any block so that OctoberSPA handles all the links it contains!

    Example:

    <nav class="spa-link">
    <a href="{{ 'home'|page }}">Home</a>
    <a href="{{ 'contact_us'|page }}">Contact Us</a>
    <a href="{{ 'about'|page }}">About</a>
    <a href="{{ 'whatever'|page }}">Etc...</a>
</nav>

    or even:

    <body class="spa-link">
    <!-- Your layout  -->
</body>

  • Found the plugin useful on 4 Mar, 2020

    Hi, I like the plugin.

    I did have to make a minor fix for it to work with my site:

    change lines 520 of spa.js from a loop to locate "spa-page-content" to a jquery find like below:

    let reloadElem = dom.find("#spa-page-content");

    Otherwise, your plugin will only find spa-page-content if its a root-level node of document

  • Please login to rate the plugin or write a review.
1.0.2

Fixed anchor links handling.

Apr 03, 2019
1.0.1

Initialize plugin.

Apr 02, 2019