Contests

Company Name: Finning.com

Company URL: https://www.finning.com

Your Name: Brian

Your Title: Senior AEM Software Engineer

Finning is the world's largest Caterpillar dealer delivering unrivalled service which has it's own digital experience for customers to find specific parts and machines. Their website https://www.finning.com purpose is to help customers find old/new machines and old/new parts.

One of their challenges is the header navigation. The header navigation outputs old/new machines and old/new parts that are rendered from a 3rd party API. This 3rd party API is managed by the product managers and has a pretty large set of data. When there is a change in the 3rd party API, we must flush the entire cache of the website. This mechanism wasn't too great for the end users as a full cache of the entire website causes the digital experience of customers to be hindered by the website performance issue; forcing pages to refetch and again save the cache. This gave us an opportunity to enhance the experience, Using Sling Dynamic Include and Experience Fragments to solve the issue. Sling Dynamic Include or SDI makes it possible to cache a page with placeholder content (include) for dynamic data that will be replaced with actual content when a user accesses the page. Due to this, the majority of page components can be cached in caching layers, and dynamic data is replaced when a page is accessed.

Technologies Used:

- Experience Fragments

- Apache Sling Dynamic Include -  https://sling.apache.org/documentation/bundles/dynamic-includes.html

Steps Produced:
Setting Up SDI

1. we start off by Including the SDI as a dependency in the parent pom.xml

<!-- Sling dynamic include -->
<dependency>
  <groupId>org.apache.sling</groupId>
  <artifactId>org.apache.sling.dynamic-include</artifactId>
  <version>3.1.2</version>
</dependency>

2. next, we Embed the SDI as a package for deployment in pom.xml

<embedded>
    <groupId>org.apache.sling</groupId>
    <artifactId>org.apache.sling.dynamic-include</artifactId>
     <target>/apps/vendor-packages/content/install</target>
</embedded>

3, thirdly, we create OSGI configuration via code org.apache.sling.dynamicinclude.Configuration.experiencefragment.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:OsgiConfig"
    include-filter.config.add_comment="{Boolean}false"
    include-filter.config.appendSuffix="{Boolean}true"
    include-filter.config.disableIgnoreUrlParams="{Boolean}false"
    include-filter.config.enabled="{Boolean}true"
    include-filter.config.extension="html"
    include-filter.config.ignoreUrlParams="[]"
    include-filter.config.include-type="SSI"
    include-filter.config.path="/conf"
    include-filter.config.required_header="Server-Agent=Communique-Dispatcher"
    include-filter.config.resource-types="[]"
    include-filter.config.rewrite="{Boolean}true"
    include-filter.config.selector="shared"
    include-filter.config.ttl=""/>

4. SDI completed configuration, so when a page is being published, the entire path of /content/experience-fragments/my-company/structure/header/en.html is being cached. When we re-activate of flush only /content/experience-fragments/my-company/structure/header/en.html, just this content will be cacheflushed.
Updating the Header Component

5. The header's "active" state has been migrated to use CSS and JS, instead of using server rendering. 

6. Done.