I'm trying to create a page where I can view entries in a list and have the option where I can view all entries at the click of a button, or choose to load more as and when I want.
With the view all button, everything works perfectly because it replaces the whole component that I want to swap out and I have a twig function that stops the load more and view all button from showing in my component if 'limit' is set to 'view-all' (generally limit is set to an integer).
My problem is, using the show more button, because the s-target is set to 'this' like in the cookbook, It loads another view all button whereas in reality what I want it to do is either just keep one view all button, or remove that button completely if I'm not showing all entries.
Does anybody know of a way that I can achieve this? I've been trying for a couple of hours now and I keep finding that I run into obstacles.
Below I've included all the code that I've got for both the component and the load more buttons which I'm pulling in through an include because theoretically these buttons are going to be used elsewhere.
Many thanks
Main component for listing/ setting variables
{#
sprig variables
#}
{# sets the filter and type parameter to either be what is in the url, or nothing #}
{% set filter = filter ?? '' %}
{% if reset is defined %}
{% set filter = '' %}
{% endif %}
{# tells the component how many items to show #}
{% set offset = offset ?? 0 %}
{% set limit = limit != 'view-all' ? limit %}
{# will ensure that filters are dynamically added to site #}
{% set filterOptions = craft.categories.group('hubCategories').all() %}
{# For security only filters that are within filterOtions/ filterTypes can be used. Prevents people updating query params and finding hidden content #}
{% set allowedFilters = [] %}
{% for option in filterOptions %}
{% set allowedFilters = allowedFilters|merge([ option.slug ]) %}
{% endfor %}
{% set entryQuery = craft.entries({
section: 'hubArticles',
orderBy: ('postDate desc'),
offset: offset,
limit: limit,
}) %}
{# if filter is empty then double check the query string to make sure that there's nothing there. If there is, filter == the query string value. This is for copying the url and sharing/ finding the search again later. #}
{% if filter is empty and craft.app.request.getQueryParam('filter')|length %}
{% if craft.app.request.getQueryParam('filter') != 'all' %}
{% set filter = craft.app.request.getQueryParam('filter') %}
{% endif %}
{% endif %}
{# check to make sure that first of all, the query exists and second of all that it's permitted to get content for #}
{% if filter is not empty and craft.app.request.getQueryParam('filter') != 'all' and filter in allowedFilters %}
{% do entryQuery.andRelatedTo(craft.categories.slug(filter)) %}
{% endif %}
{# check whether or not the filter == all or '' to show the active filter #}
{% set allArray = [
'all',
''
] %}
{# send completed query #}
{% set entries = entryQuery.all() %}
<section s-replace="#hub-listing" id="sprig-listing-container" class="sprig-listing section">
<div class="container xtra-small">
<div class="listing-navigation">
<ul class="wrapped-listing-container center-text">
{# all button #}
<li class="listing-item listing-all upper-text xtra-small-text text-blue {{ filter in allArray ? 'active' }}" sprig s-vals="{{ { filter : 'all' }|json_encode }}" s-push-url="?filter=all" id="all" name="all">All</li>
{% for cat in filterOptions %}
<li class="listing-item upper-text xtra-small-text text-blue {{ filter == cat.slug ? 'active' }}" sprig s-vals="{{ { filter : cat.slug }|json_encode }}" s-push-url="?filter={{ cat.slug }}" id="{{ cat.slug }}" name="{{ cat.slug }}">{{ cat.title }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="container" id="hub-listing">
<div class="listing-wrapper" id="listing-wrapper">
{% if entries|length %}
{% for entry in entries %}
<a class="hub-card" href="{{ entry.url }} aria-label={{ entry.title }}">
<div class="hub-image">
<picture>
<img src="{{ entry.listingImage.one.url()|default("#{ siteUrl }assets/images/default-image0#{ random(1, 6) }.jpg") }}" alt="{{ entry.title }}" height="auto" width="auto" loading="lazy" />
</picture>
</div>
<div class="text-content">
<div class="hub-categories">
{% for cat in entry.hubCategories.all() %}
<p class="hub-category text-light-blue upper-text xtra-small-text">{{ cat.title }}{{ not loop.last ? ', ' }}</p>
{% endfor %}
</div>
<div class="text-wrapper">
<h4 class="hub-title text-blue">{{ entry.title }}</h4>
{% if entry.listingDescription %}
<p class="small-text text-blue">{{ entry.listingDescription }}</p>
{% endif %}
</div>
</div>
</a>
{% endfor %}
{% else %}
<h4 class="text-blue upper-text">Sorry, we can't find any results right now. Please try another search option.</h4>
{% endif %}
</div>
{% if entryQuery.count() > offset + entries|length and limit != 'view-all' %}
{% include "_sprig/_load-more-view-all" %}
{% endif %}
</div>
</section>
{% js %}
$('#sprig-listing-container .listing-item').click(() => {
if ($(this).hasClass('active')) {
return;
}
$('.listing-item.active').removeClass('active');
$(this).addClass('active');
});
{% endjs %}
load more component
{# Increments `offset` by the value of `limit` and swaps itself out on click #}
<div
class="button small-button"
sprig
s-vals="{{ {
offset : offset + limit,
filter : filter
}|json_encode }}"
s-target="this"
s-swap="outerHTML"
>show more</div>
{# view all results button #}
<div
class="button small-button blue-transparent"
sprig
s-vals="{{ {
offset : 0,
limit : 'view-all',
filter : filter
}|json_encode }}"
s-target="#hub-listing"
s-swap="outerHTML"
>View All</div>
