CODEWITHSUNDEEP
apostrophe-cmsnunjucks
Brooklee
Brooklee

Reputation: 155

Apostrophe cms create a 'select all' button for filtering tags

I am trying to build a filter based on tags in apostrophe with check boxes so that multiple filters can be selected (this piece has been achieved). I also need a button to select all tags this is where I have not been able to find an answer. How can I use the build method to add multiple tags to the query? I have been referring to the apos docs here. https://docs.apostrophecms.org/reference/modules/apostrophe-urls.html#methods

current code bellow.

{# bellow link kind of works but does not allow me to pull the tags once selected #}
      <a href="{{  data.url | build({ tags: [data.page.filterTags] }) }}" id="select-all" >Select All</a>

{# bellow code works fine but I thought it might be relevent #}
      <br/> 
        {% for tag in data.page.filterTags %}
         {% set current = data.query.affinity == tag %}
          {% if apos.utils.contains(data.query.tags, tag) %}
            <a href="{{ data.url | build({ tags: { $pull: tag } }) }}" class="current">
            <label class="container"><input type="checkbox" name="tag" value="{{item}}" checked="">
          {% else %}
            <a href="{{ data.url | build({ tags: { $addToSet: tag } }) }}">
            <label class="container"><input type="checkbox" name="tag" value="{{item}}">
          {% endif %}
            <span class="text">{{tag | capitalize}}</span>
            <span class="checkmark"></span></label>
          </a>
        {% endfor %}

Upvotes: 1

Views: 72

Answers (1)

Brooklee
Brooklee

Reputation: 155

I have answered my own question in case anyone ever runs into the same issue. You should be able to set the tags without putting square brackets around the array (see below).

<a href="{{  data.url | build({ tags: data.page.filterTags }) }}" id="select-all" >Select All</a>

Upvotes: 1

Related Questions