search.twig

{% set limit = 9 %}
{% set articles = _Search.searchArticles({'limit': limit, 'offset': 0, 'search': search, 'sortBy': 'published'}) %}
{% set config   = _Network.getThemeConfig() %}


{% set firstCount = articles | length %}

{% set networkData = _Network.getNetworkData() %}



<!-- used to index each article as we loop over throughout the template -->
{% set articleCount = 0 %}


<main id="main" class="o-body-container o-body-container-md searchPage u-margin-top-60" role="main">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-7 j-article-container">
                <div class="c-search">
                    <div class="c-search__head">
                        {% if firstCount > 0 %}
                            Showing search results for '<span class="c-search__name">{{search | raw}}</span>'
                        {% else %}
                            No results were found for '<span class="c-search__name">{{search | raw}}</span>'
                        {% endif %}
                    </div>

                    <div id="results" style="min-height:600px;">
                    {% for article in articles %}
                        <hr class="o-rule o-rule--15">
                        {{this.render('partials/_single-article.twig', {
                            article: article, 
                            containerClass: "card-2-mobile card-9-tablet card-9-desktop card-9-desktop-lg"
                        }) | raw}}

                    {% endfor %}
                    </div>
    

                    {% if articles|length >= limit %}
                        <section class="">
                            <div class="row">
                                <div class="col-12 u-margin-top-40">
                                    {{ this.render('partials/ajaxarticles_new.twig', {
                                        name            : "search-load",
                                        label           : "more",
                                        buttonClass     : "",
                                    }) | raw }}
                                </div>
                            </div>
                        </section>
                    {% endif %}

                </div>

            </div>


            <div class="col-12 offset-md-1 col-md-4">
                <div class="o-body-container__right-layout j-article-sidebar">
                    {% if config['inventory']['adSpace']['side-fix'][0] is defined %}
                        <div class="j-adslot" id="{{config['inventory']['adSpace']['side-fix'][0]}}" data-adshape="side-fix"></div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

</main><!-- .site-main -->



<script>
    // main script is defered so event listener makes sure
    // defered script is loaded before this runs
    document.addEventListener("DOMContentLoaded", function(event) {
        
        Acme.loadMore = new Acme.View.articleFeed({
            model           : new Card(),
            container       : 'results',
            infinite        : true,
            limit           : {{limit}},
            offset          : {{limit}},
            loadtype        : 'api/search',
            searchterm      : "{{search}}",
            name            : 'search-load', //name of the search button
            card_class      : 'card-2-mobile card-9-tablet card-9-desktop card-9-desktop-lg u-margin-top-30'
        });
    });
</script>