2

I want to display all results in the games section to start with, then once you search, it shows the filtered results. Sprig's starting point I think assumes that you're showing nothing, like a normal search box.

With the code below, it shows all results to start with - but once there's a search query, it shows the filtered results, then also ALL of the results underneath those. What do I need to change to show all results first and REPLACE them with the filtered results after searching?

It's something to do with the s-target stuff I think. The original loop gets 'moved' into #results when you search, but as I don't understand how Sprig works so I don't really know why it's doing it

{% set queryParams = {} %}
{% set relatedParams = ['and'] %}

{# This is where the query logic is -combining category filters and text search etc #}

{% if sprig.include %}
    <select sprig s-target="#results" name="verdict" id="verdict">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="rating" id="rating">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="platform" id="platform">
        {# loop through options #}
    </select>
    <input sprig s-trigger="keyup changed" s-target="#results" type="search" name="title" id="title" />
    <div id="results"></div>
{% endif %}

{% if queryParams %}
    {% set entries = craft.entries(queryParams).orderBy('score').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% else %}
    {% set entries = craft.entries.section('games').orderBy('title').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% endif %}
3

Looking at the example from the Sprig Cookbook, it looks like the results container should live outside the sprig.isInclude:

{% if sprig.isInclude %}
    <select sprig s-target="#results" name="verdict" id="verdict">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="rating" id="rating">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="platform" id="platform">
        {# loop through options #}
    </select>
    <input sprig s-trigger="keyup changed" s-target="#results" type="search" name="title" id="title" />
{% endif %}

<div id="results">
{% if queryParams %}
    {% set entries = craft.entries(queryParams).orderBy('score').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% else %}
    {% set entries = craft.entries.section('games').orderBy('title').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% endif %}
</div>
2
  • Thank you, that was it. Can't believe I didn't try that before. Sep 14 '20 at 7:18
  • Updated the answer to use the new sprig.isInclude syntax as of beta 15.
    – Ben Croker
    Sep 17 '20 at 6:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.