arlo-1.x-dev/templates/arlo-search-1.html.twig

<script src="//code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
{{ attach_library('arlo/arlo-search') }}
{{ attach_library('arlo/arlo-search-1') }}
<script language = "Javascript">
(function () {
    document.addEventListener("arlojscontrolsloaded", function () {
        var platformID = "{{ platform_id }}";

        var searchResults = {
            moduleType: "Search",
            targetElement: '#arlo-search2',
            customUrls: {
                eventtemplate: "http://theme1.demo.arlo.co/event-template/"
            },
            searchControlID: 2,
            autoUpdateResults: false,
            searchBoxTarget: '#arlo-search-box',
            searchResultsTarget: "#arlo-search-results",
            maxCount: 5,
            maxNextRunningEvents: 5,
            includeLoadMoreButton: true,
            loadMoreButtonText: "Show More",
            nextRunningEventTemplate: '<a href="<%- ViewUri %>" ><%= formatDate(StartDateTime, "D MMM") %> <span><%= Location.Name %></span></a>',
            noResultsText: '<div class="arlo-no-results">No items match this search</div>',
            searchResultsTemplate: "#search-results-template",
            targetSearchControlID: 2,
            includeSearchButton: false,
            filterControlId: 1
        };

        var filter = {
            moduleType: "Filters",
            targetElement: "#arlo-filters",
            template: "#filter-template",
            filterControlId: 1
        };

        new window.ArloWebControls().start({
            "platformID": platformID,
            "showDevErrors": true,
            "modules": [searchResults,filter]
        });
    });
})(jQuery, window.ElementQueries);
</script>

<!-- Target Elements -->
<div class="arlo">
    <div class="arlo-filters">
        <div id="arlo-search-box"></div>
        <div id="arlo-filters"></div>
    </div>

    <div id="arlo-search-results"></div>
</div>

<script type="text/template" id="header-search-results-template">
    <a href="<%= ViewUri %>"><%= TitleHtml %></a>
</script>

<script type="text/template" id="search-results-template">
    <h1 class="arlo-title"><a href="<%= ViewUri %>"><%= TitleHtml %></a></h1>
    <%= formatEventTemplateCategoryBreadcrumbs(CategoryPaths) %>

    <p><%= SummaryHtml %></p>

    <div class="arlo-nextrunning">
        <div class="nextrunning-<%= EventTemplateID %> arlo-next-running-wrapper" data-customuri="<% if(typeof ViewUri!=='undefined') { ViewUri }%>"></div>
    </div>
</script>

<script type="text/template" id="filter-template">
    <%= showFilter({filterCode: "locname"}) %>
    <%= showFilter({filterCode: "templatecategory"}) %>
</script>