1

I have some checkboxes that filter entries by category. All that is working fine on its own. I also have a load more button that is supposed to append additional entries to the query results.

The problem is that it appends everything in the sprig component, including the category filters.

_sprig/component:

{% set category = craft.categories.id(categoryId).one() %}
{% set industry = industry ?? '' %}
{% set offset = offset ?? 0 %}
{% set limit = 6 %}

{% set relatedTo = ['and', categoryId] %}
{% set relatedTo = industry ? relatedTo|merge(industry) : categoryId %}

<section>
  <div class="template-types__industry">
    <p>Industry:</p>
    <ul>
      {% for indCat in craft.categories.group('templateCategory').all() %}
        <li>
          <input type="checkbox" id="{{ indCat.slug }}" value="{{ indCat.id }}" name="industry[]" {{ indCat.id in industry ? 'checked' }} sprig>
          <label for="{{ indCat.slug }}">{{ indCat.title }}</label>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

<section>
  <div class="row" id="results">
    {% set entryQuery = craft.entries
      .section('proposalTemplates')
      .limit(limit)
      .offset(offset)
      .relatedTo(relatedTo)
      .with(['image'])
    %}
    {% set entries = entryQuery.all() %}

    {% if entries|length %}
      {% for template in entries %}
        <div class="result">
          {{ template.title }}
        </div>
      {% endfor %}
    {% endif %}

    {% if entryQuery.count() > offset + entries|length %}
      <button sprig 
        s-val:offset="{{ offset + limit }}" 
        s-swap="outerHTML" 
        s-target="#results"
        class="template-types__load-more">
          Load more
      </button>
    {% endif %}
  </div>
</section>

I've tried breaking the results into a separate sprig component, but then changes made to the filters don't have an effect, even if they're sent as variables:

_sprig/results:

<section>
  <div class="row" id="results">
    {{ sprig('_sprig/results', with {
      limit: limit,
      offset: offset,
      relatedTo: relatedTo
    }) }}
  </div>
</section>

This should be possible...I just can't figure out a way to set it up properly.

2
  • 1
    Can you post more of your template? How do you build your relatedTo variable?
    – Oli
    Aug 19 at 7:35
  • I skipped that stuff because it's all working as expected. Adding now.
    – Bryce
    Aug 19 at 15:52
2

Because of your component's element structure this is slightly more complex. I just added a new recipe to the Sprig cookbook called "Load More Complex" which should provide you with the solution, although you may want to move the button outside of the #results div. https://putyourlightson.com/sprig/cookbook#load-more-complex

6
  • Thanks, the new example is super helpful! I've got entries loading in the correct spot now. The only remaining issue is that entryQuery.count() and offset + entries|length don't seem to update when the button is clicked–when I reach the end of my entries, the load more button remains. The only way to update those two variables is to select a checkbox filter.
    – Bryce
    Aug 23 at 19:24
  • 1
    Using s-swap-oob with an ID on the button should swap it out, as explained in the recipe.
    – Ben Croker
    Aug 24 at 7:44
  • Yeah–have all that. Copying all of the code directly from the example still produces this error. When it reaches the end of entries, the Load another still appears and continually loads the last entry (or entries, if the limit is > 1)
    – Bryce
    Aug 24 at 16:51
  • 1
    Try the recipe at putyourlightson.com/sprig/cookbook#load-more-complex in isolation and you'll see that it does indeed work.
    – Ben Croker
    Aug 25 at 6:00
  • 1
    I've updated the recipe with a fix at putyourlightson.com/sprig/cookbook#load-more-complex
    – Ben Croker
    Aug 25 at 18:29

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.