Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Related Categories Filters

See original GitHub issue

Question

This question is about the same project here: https://github.com/putyourlightson/craft-sprig/issues/71

I added in live search and that worked however once I started adding in filtering via dropdown related categories things got wonky.

I have 2 category group dropdowns to filter by geography and experience I was able to get filtering for one category group to work, but that also breaks the option to switch between grid view and list view - detailed in issue linked above along with pagination that was previously resolved.

In my entry query I have the following:

{% set entryQuery = craft.entries
  .section('sustainingMemoriesAuthors')
  .orderBy('lastName asc')
  .limit(limit)
  .relatedTo(experience)
  .search(search) %}
  {# .relatedTo([ 'and', { targetElement: experience }, { targetElement: geography } ]) #}

which filters by the experience category however If I change anything else in the filters or search I end up with zero results. Also switching from grid to list view does this as well. and if I change the relatedTo parameter to the one in the comment there are no results at all

Full template code below:

  {# set some variables #}

  {# set variable for sprig to hook into with default of grid for first page load #}
  {% set gridListView = gridListView ?? "grid" %}
  {% set page = page ?? 1 %}
  {# set search parameter here #}
  {% set search = q ?? '' %}

  {# set default values for the category dropdowns #}
  {% set geography = geography ?? '' %}
  {% set experience = experience ?? '' %}

  {#
   // need above values in hidden inputs for persistent state
   // https://github.com/putyourlightson/craft-sprig/issues/71#issuecomment-745388432
  #}
  {{ hiddenInput('page', page) }}
  {{ hiddenInput('gridListView', gridListView) }}
  {{ hiddenInput('geography', geography) }}
  {{ hiddenInput('experience', experience) }}

    {# search #}
    <section class="search teal" s-replace="#survivors">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">

            <form action="{{ url('search/results') }}" class="search-form">
              <input
                sprig
                s-trigger="keyup changed delay:300ms"
                type="search"
                name="q"
                aria-label="{{ "Search by name"|t }}"
                placeholder="{{ "Search by name"|t }}"
                autocomplete="off"
                value="{{ search }}">

              <button type="submit" class="sr-only">{{ "Search"|t }}</button>

              <div class="row filtering">
                <div class="col-sm-9">
                  <div class="fieldset">

                    <span>{{ "Filter By:"|t }}</span>
                    <div class="form-group">
                      <label for="geography" class="sr-only">{{ "Geography"|t }}</label>
                      <select
                        sprig
                        class="form-control"
                        id="geography"
                        name="geography">

                        <option {{ geography =='' ? 'selected'}} value="all">{{ "Geography"|t }}</option>

                        {% for option in craft.categories.group('sustainingGeography').all() %}
                          <option
                            value="{{ option.id }}"
                            {{ option.id == option.slug ? 'selected'}}>{{ option.title }}</option>
                        {% endfor %}

                      </select>
                    </div>

                    <div class="form-group">
                      <label for="experience" class="sr-only">{{ "Experience"|t }}</label>
                      <select
                        sprig
                        class="form-control"
                        id="experience"
                        name="experience">
                        <option value="all" {{ experience =='' ? 'selected'}}>{{ "Experience"|t }}</option>
                        {% for option in craft.categories.group('sustainingExperience').all() %}
                          <option value="{{ option.id }}">{{ option.title }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div><!-- /.fieldset -->

                </div><!-- /.col-sm-9 -->

                <div class="col-sm-3 grid-list-choose">
                  {# s-val name is same as variable gridViewList further down but here needs to be kebab case #}
                  {# Sprig to switch layouts #}
                  <a href="" sprig s-val:grid-list-view="grid" class="{{ gridListView == 'grid' ? 'active': ''}}">
                    {{ svg('@webroot/assets/images/grid.svg')|attr({class:''}) }}
                    {{ "Grid View"|t }}
                  </a>
                  <span>|</span>
                  {# s-push-url="?gridListView=list" #}
                  <a href="" sprig  s-val:grid-list-view="list" class="{{ gridListView == 'list' ? 'active': ''}}">
                    {{ svg('@webroot/assets/images/list.svg')|attr({class:''}) }}
                    {{ "list View"|t }}
                  </a>
                </div><!-- /.col-sm-3 -->

              </div><!-- /.row -->

            </form>

          </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.search -->
    {# end search #}


    <section class="survivors" id="survivors">
      <div class="container">
        <div class="row">

      {# Sets a default value if not defined by `s-val:*` on the clicked element #}
      {% set page = page ?? 1 %}

      {% set entryQuery = craft.entries
        .section('sustainingMemoriesAuthors')
        .orderBy('lastName asc')
        .limit(limit)
        .relatedTo(experience)
        .search(search) %}
        {# .relatedTo([ 'and', { targetElement: experience }, { targetElement: geography } ]) #}

      {# Paginates the entry query given the current page #}
      {% set pageInfo = sprig.paginate(entryQuery, page) %}
      {% set entries = pageInfo.pageResults %}

      {% if gridListView =="grid" %}
        {# grid view #}
        {% include 'exhibits/sustaining-memories/_includes/grid-view' %}
      {% else %}
        {# list view #}
        {% include 'exhibits/sustaining-memories/_includes/list-view' %}
      {% endif %}

        </div><!-- /.row -->

        {# pagination #}
        <div class="row">
          <div class="col-sm-12">

            {% if entries %}
              <p>
                {{ "Page"|t }}
                {% for i in 1..pageInfo.totalPages %}
                  {% if i == page %}
                    {{ i }}
                  {% else %}
                    {# Refreshes the component and pushes the new value into the URL #}
                    <a  href="#" sprig s-val:page="{{ i }}">{{ i }}</a> {# s-push-url="?page={{ i }}" #}
                  {% endif %}
                {% endfor %}
              </p>
            {% endif %}

            {% do sprig.pushUrl('?' ~ {page: page, gridListView: gridListView}|url_encode) %}

          </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
        {#  #}

      </div><!-- /.container -->
    </section><!-- /.survivors -->

please advise.

Additional context

Add any other context or screenshots about the support request here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:11

github_iconTop GitHub Comments

11reactions
CreateSeancommented, Jun 21, 2022

@j-greig

sure - here’s the full current template - code is ready to go live, just waiting on final approval.

  {# set some variables #}

  {# set variable for sprig to hook into with default of grid for first page load #}
  {% set gridListView = gridListView ?? "grid" %}
  {% set page = page ?? 1 %}
  {# set search parameter here #}
  {% set search = q ?? '' %}

  {# set default values for the category dropdowns #}
  {% set geography = geography ?? '' %}
  {% set experience = experience ?? '' %}

  {#
   // need above values in hidden inputs for persistent state
   // https://github.com/putyourlightson/craft-sprig/issues/71#issuecomment-745388432
  #}
  {{ hiddenInput('page', page) }}
  {{ hiddenInput('gridListView', gridListView) }}

    {# search #}
    <section class="search teal" s-replace="#survivors">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">

            <form class="search-form">
              <input
                sprig
                s-trigger="keyup changed delay:300ms"
                type="search"
                name="q"
                aria-label="{{ "Search by name"|t }}"
                placeholder="{{ "Search by name"|t }}"
                autocomplete="off"
                value="{{ search ?? null }}">

              <button type="submit" class="sr-only">{{ "Search"|t }}</button>

              <div class="row filtering">
                <div class="col-sm-12 col-md-9">
                  <div class="fieldset">

                    <span class="filter-title">{{ "Filter By:"|t }}</span>
                    <div class="form-group">
                      <label for="geography" class="sr-only">{{ "Geography"|t }}</label>
                      <select
                        sprig
                        class="form-control"
                        id="geography"
                        name="geography">

                        <option {{ geography =='' ? 'selected'}} value="">{{ "Geography"|t }}</option>

                        {% for option in craft.categories.group('sustainingGeography').all() %}
                          <option
                            value="{{ option.id }}"
                            {{ option.id == option.slug ? 'selected'}}>{{ option.title }}</option>
                        {% endfor %}

                      </select>
                    </div>

                    <div class="form-group">
                      <label for="experience" class="sr-only">{{ "Experience"|t }}</label>
                      <select
                        sprig
                        class="form-control"
                        id="experience"
                        name="experience">
                        <option value="" {{ experience =='' ? 'selected'}}>{{ "Experience"|t }}</option>
                        {% for option in craft.categories.group('sustainingExperience').all() %}
                          <option value="{{ option.id }}">{{ option.title }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div><!-- /.fieldset -->

                </div><!-- /.col-sm-9 -->

                <div class="col-sm-12 col-md-3 grid-list-choose">
                  {# s-val name is same as variable gridViewList further down but here needs to be kebab case #}
                  {# Sprig to switch layouts #}
                  {# s-push-url="?gridListView=grid" #}
                  <a href="" sprig s-val:grid-list-view="grid" class="{{ gridListView == 'grid' ? 'active': ''}}">
                    {{ svg('@webroot/assets/images/grid.svg')|attr({class:''}) }}
                    {{ "Grid View"|t }}
                  </a>
                  <span>|</span>
                  {# s-push-url="?gridListView=list" #}
                  <a href="" sprig  s-val:grid-list-view="list" class="{{ gridListView == 'list' ? 'active': ''}}">
                    {{ svg('@webroot/assets/images/list.svg')|attr({class:''}) }}
                    {{ "list View"|t }}
                  </a>
                </div><!-- /.col-sm-3 -->

              </div><!-- /.row -->

            </form>



          </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.search -->
    {# end search #}




    <section class="survivors" id="survivors">
      <div class="container">
        <div class="row">



      {# Sets a default value if not defined by `s-val:*` on the clicked element #}
      {% set page = page ?? 1 %}

      {% set relatedTo = ['and'] %}
      {% set relatedTo = experience ? relatedTo|merge([experience]) : relatedTo %}
      {% set relatedTo = geography ? relatedTo|merge([geography]) : relatedTo %}

      {# Reset to an empty array if no related elements were specified. #}
      {% set relatedTo = (relatedTo == ['and']) ? [] : relatedTo %}

      {% set entryQuery = craft.entries
        .section('sustainingMemoriesAuthors')
        .orderBy('lastName asc')
        .limit(limit)
        .relatedTo(relatedTo)
        .search(search) %}

        {# .relatedTo([ 'and', { targetElement: experience }, { targetElement: geography } ]) #}

      {# Paginates the entry query given the current page #}
      {% set pageInfo = sprig.paginate(entryQuery, page) %}
      {% set entries = pageInfo.pageResults %}



      {% if gridListView =="grid" %}
        {# grid view #}
        {% include 'exhibits/sustaining-memories/_includes/grid-view' %}
      {% else %}
        {# list view #}
        {% include 'exhibits/sustaining-memories/_includes/list-view' %}
      {% endif %}



        </div><!-- /.row -->

        {# {% set page = page ?? 1 %} #}
        {# pagination #}
        <div class="row">
          <div class="col-sm-12">

            {% if entries %}
              <p class="pagination-list">
                <span>{{ "Page"|t }}</span>
                {% for i in 1..pageInfo.totalPages %}
                  {% if i == page %}
                    {{ i }} /
                  {% else %}
                    {# Refreshes the component and pushes the new value into the URL #}
                    <a  href="#" sprig s-val:page="{{ i }}">{{ i }}</a> {{ loop.last ? '':' /'}} {# s-push-url="?page={{ i }}" #}
                  {% endif %}
                {% endfor %}
              </p>
            {% endif %}

            {% do sprig.pushUrl('?' ~ {page: page, gridListView: gridListView}|url_encode) %}

          </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
        {#  #}

      </div><!-- /.container -->
    </section><!-- /.survivors -->
0reactions
BrandKitscommented, Mar 4, 2021

@CreateSean Huge thanks for sharing your code, was struggling with categories, you helped me out enormously. Cheers.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Types of Filters - Different Kinds of Filters and How They Work
What are the different types of filters? We detail common filters by type, i.e. air, fuel, fluid, and hydraulic filters, and process filter...
Read more >
Category:Filters - Wikipedia
This main category pertains to mechanical devices that function to separate items or materials from a non-homogeneous mass or context.
Read more >
Filtering Categories - DNSFilter
Select from a wide variety of Filtering Categories to block or allow at ... Also includes educational facilities and related organizations.
Read more >
Category Filter - Salesforce Help
The Category Filter component lets users filter the article list based on selected data categories so that they can see articles from those...
Read more >
Categories, Filters & Dropdowns - CMU Web
Dropdown menus can be added to special index page types (Bio Index, News Index, Course Index) for category filtering by website visitors. Dropdown...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Sprig with Smart Map

Next page

Load more `if entries` still shows if there are no more to load, and requires one last click to remove the button...