templates/pages/category.html

category.html

---
gql: "query CategoryQuery($categoryId: Int!) {
    site {
        category(entityId: $categoryId) {
            breadcrumbs(depth: 10) {
                edges {
                    node {
                        name
                        entityId
                    }
                }
            }
        }
    }
}"
---
{{#partial "page"}}

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

{{#if category.image}}
    {{> components/common/responsive-img
        image=category.image
        fallback_size=theme_settings.zoom_size
        lazyload=theme_settings.lazyload_mode
        class="category-header-image"
    }}
{{/if}}

<section class="page">
    <div class="klevuLanding klevuTarget"></div>
</section>
{{/partial}}
{{> layout/base}}

klevu-catnav-theme.html

<!-- File location can be vary or layout.html whereever klevu_pageCategory available.  -->
<script type="text/javascript" id="klevu_category">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    
    window.renderCategoryFullPath = {{{json gql.data.site.category.breadcrumbs.edges}}}
        .map(b => b.node.name)
        .join(";");
        
    var updatedCategoryPath = window.renderCategoryFullPath;
    var oldPath = klevu_pageCategory; 

    if (
        typeof klevu_pageCategory !== "undefined" &&
        klevu_pageCategory !== null &&
        klevu_pageCategory !== "" &&
        klevu_pageCategory !== updatedCategoryPath
    ) {
        klevu_pageCategory = updatedCategoryPath;
    }
    
    
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>