Load More Entries based on Parameter Category Filtering

Question

so i filter some entries via the url parameters... that works fine. But if i load more entries (based on the category parameter), the result includes also all other entries with other categories... but of course i just wanna load more entries based on that one category parameter... any ideas? :)

  {% set category = craft.app.request.getParam('category') %}
  {% set organisation = craft.app.request.getParam('organisation') %}
  {% set topic = craft.app.request.getParam('topic') %}

  {% set organisationCat = organisation ? craft.categories.group('organisation').slug(organisation).one() %}
  {% set categoryCat = category ? craft.categories.group('category').slug(category).one() %}
  {% set topicCat = topic ? craft.categories.group('topic').slug(topic).one() %}

  {% set organisationParam = organisationCat ? {targetElement: organisationCat} %}
  {% set categoryParam = categoryCat ? {targetElement: categoryCat} %}
  {% set topicParam = topicCat ? {targetElement: topicCat} %}

  {% set relationParams = [organisationParam, categoryParam, topicParam]|filter %}

  {% set topicsEntries = craft.entries({
    section: 'topics',
    relatedTo: relationParams ? ['and']|merge(relationParams) : null,
  }) %}

  {% set offset = offset ?? 0 %}
  {% set limit = 3 %}

  {% set allTopicsEntries = topicsEntries.offset(offset).limit(limit) %}
  {% set allTopicsOutputEntries = allTopicsEntries.all() %}

  {# Loop and output #}
  {% for topic in allTopicsOutputEntries %}
    <div class="grid-item">
      {% if topic.topicLink is defined and topic.topicLink|length %}
        <a class="card-topic" href="{{topic.topicLink}}" target="_blank" rel=”noopener noreferrer”>
          <div class="card-topic__wrapper">
            {% if topic.catTopic is defined and topic.catTopic|length %}
              <span class="card-topic__toptitle">{{topic.catTopic.one().title}}</span>
            {% endif %}
            {% if topic.topicTitle is defined and topic.topicTitle %}
              <h3 class="card-topic__title">{{topic.topicTitle}}</h3>
            {% else %}
              <h3 class="card-topic__title">{{topic.title}}</h3>
            {% endif %}
            {% if topic.topicText is defined and topic.topicText|length %}
              <div class="card-topic__text">
                <p>{{topic.topicText}}</p>
              </div>
            {% endif %}
            <div class="card-topic__button">
              <span class="button-circle button-circle-theme-bright">
                <span class="button-circle__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12" style="enable-background:new 0 0 14 12" xml:space="preserve"><path d="m7 11 5-5-5-5" style="fill:none;stroke:#1a0d3d;stroke-width:2;stroke-linecap:round"/><path d="M1 5c-.6 0-1 .4-1 1s.4 1 1 1V5zm11 0H1v2h11V5z" style="fill:#1a0d3d"/></svg>
                </span>
              </span>
            </div>
          </div>
        </a>
      {% endif %}
    </div>
  {% endfor %}

  {# If the total entry count is greater than the number that has been displayed#}
  {% if allTopicsEntries.count() > offset + allTopicsOutputEntries|length %}
    {# Increments `offset` by the value of `limit` and swaps itself out on click #}
    <div sprig s-val:offset="{{ offset + limit }}" s-target="this" s-swap="outerHTML" class="news-footer">
      <button class="button button-theme-transparent">
        <span class="button-title">Mehr anzeigen</span>
      </button>
    </div>
  {% endif %}

Answer 1

Using craft.app.request.getParam will only work on the initial request. Sprig populates variables from parameters by default, so you should be able to replace the first three lines with the following, and that should solve your issue.

  {% set category = category|default(null) %}
  {% set organisation = organisation|default(null) %}
  {% set topic = topic|default(null) %}

You’ll also need to ensure that their values are submitted in subsequent requests triggered by the load more button. To do so, you can add them as parameters as follows.

{% set params = { 
    category: category, 
    organisation: organisation, 
    topic: topic,
} %}
<div sprig s-val:offset="{{ offset + limit }}" s-target="this" s-swap="outerHTML" class="news-footer"
    s-vals="{{ params|json_encode }}"
>

Answer 2

When using the Sprig plugin to "load more" entries, you'll want to make sure you're correctly maintaining your filter parameters across requests. If you're loading more entries but it includes entries from categories other than what was originally filtered, it's possible that your subsequent Sprig requests aren't carrying over the original filter parameters.

When you make a Sprig request, it doesn't automatically know about the original filter parameters you set. You have to explicitly pass them again in the Sprig context so that the new batch of entries is filtered the same way as the first batch.

Here's one approach to make sure the category filter stays in effect:

Pass the original category parameter (and other filter parameters if needed) to your Sprig component as attributes. These will be available in the s-val attribute or as parameters in your Sprig include.

Include the filter parameters in your "Load More" button to make sure they are applied in subsequent requests.

Here's how you might modify your "Load More" button to include the category and other parameters:

<div sprig 
     s-val:offset="{{ offset + limit }}"
     s-val:category="{{ category }}" 
     s-val:organisation="{{ organisation }}"
     s-val:topic="{{ topic }}"
     s-target="this" 
     s-swap="outerHTML" 
     class="news-footer">
  <button class="button button-theme-transparent">
    <span class="button-title">Mehr anzeigen</span>
  </button>
</div>

Now in your Sprig component, you should be able to access these values and use them to filter your entries.

Another approach is to encapsulate all of this logic within a Sprig component that knows how to filter entries based on URL parameters. This would involve moving your current code into a reusable Sprig component.

Also, note that you have a typographical issue with rel=”noopener noreferrer” in your code. The quotation marks should be consistent. So it should be rel="noopener noreferrer".