1

This is a continuation of a previous question I had (Here). I am using Sprig's Load More Recipe. In my category page, I want the load more function to only pull up entries that equals the current category page. In a recent update, the category solution that was in my previous question no longer works, since it has been restructured a little. I cannot figure out how get the relatedTo(category) to work again. I currently have it set up like this (the {'relatedTo': category} does not do anything):

_category.twig

{{ sprig('_layouts/_blog/_categories/_loadMore', {'limit': 6},{'relatedTo': category}) }}
{{ sprig.script }}

_loadMore.twig

{% set offset = offset ?? 0 %}

{% set entries = craft.entries.section('caseFiles').offset(offset).limit(limit).relatedTo(category).all() %}

{% for entry in entries %}
   ------Entry Content-----
{% endfor %}

{% if entries %}
  {# Increments `offset` by the value of `limit` and swaps itself out on click #}
  <button class="orange-button" sprig s-vars="offset: {{ offset + limit }}" 
    s-target="this" s-swap="outerHTML">
    <p>Load More</p>
  </button>
{% endif %}
4

The problem is that you are doing .relatedTo(category) but the variable you are passing is called relatedTo, not category.

Just like with limit, based on your code, it should be .relatedTo(relatedTo). Also, it should be part of the same hash as your limit.

However, you can't pass a category object to a component and will need to pass its id instead (docs).

Depending on what category is in your case (and I guess it's an object), you could do:

{{ sprig('_components/load-more', {
    'limit': 6,
    'categoryId': category.id
}) }}

Then in your component:

{% set offset = offset ?? 0 %}

{% set query = craft.entries().section('caseFiles').offset(offset).limit(limit) %}

{# Make sure a categoryId is being passed #}
{% if categoryId %}
    {% set query = query.relatedTo(categoryId) %}
{% endif %}

{% set entries = query.all() %}

{% for entry in entries %}
   ------Entry Content-----
{% endfor %}

{% if entries %}
  {# Increments `offset` by the value of `limit` and swaps itself out on click #}
  <button class="orange-button" sprig s-vars="offset: {{ offset + limit }}" 
    s-target="this" s-swap="outerHTML">
    <p>Load More</p>
  </button>
{% endif %}
4
  • This worked great! However, the load more button at the bottom no longer disappears when there are no more entries to load Nov 19 '20 at 14:34
  • 1
    @JustinKendall - changed the code above for you, the button should disappears as before now.
    – Oli
    Nov 19 '20 at 15:11
  • Perfect, thanks! Nov 19 '20 at 15:13
  • @Oli You're a legend!
    – Ben Croker
    Nov 23 '20 at 12:09

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.