510
Free
Add to project

Product support

Get help in the plugin support forum.

  • Added on Apr 2, 2019
  • Current version: 1.0.2
  • Platform Compatibility
    v4.x not tested
    v3.x not tested
    v2.x not tested
    v1.x use latest
  • Created by
  • Public repository

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