Creating components and saved searches with Content Tags

[JordanPo1]

Our requirement is to allow for pages to include lists of article pages, and to allow for customers to filter the articles that show based on predefined lists of content tags. The more detailed requirement is we need to have a list of include tags, and a list of exclude tags, then get all the articles that have any of the include tags, and remove, from that list any of the articles that have any of the exclude tags. I understand if that cannot be done in one query, and we may have to do the exclude after getting back the results. Our main problem is finding a way to allow for authors to choose the tags for the filters, and saving those filters.

Example:

If we sell clothing, we may have a men's landing page that has articles about all the different types of clothing we market towards men. Our business would want all the most recent articles that have the men's tag pulled into this page by default, but the allow the customer to choose to filter down the list, and maybe one of the filters would be pants. The articles that need to be pulled in based on that may be things tagged men and pants, but not shorts.

Our thoughts are that we would build a component that incorporates some sort of tag picker, that allows the author to choose from all the predefined tags, as they build their filters, and the filters behind the scenes would take the list of tags they chose and do the business logic to search for and display the correct articles. 

TLDR: How would we best incorporate a tag picker in the authoring side of a component?

[arunpatidar]

HI @JordanPo1 

Utilizing a tag picker would be beneficial in this scenario, allowing the author to select predefined tags. This approach ensures that the backend code can read articles associated with those chosen tags.

We've already implemented a similar approach:

1. Articles pages have been tagged using predefined tags (utilizing page properties).

2. A list component has been created, enabling the author to define parameters such as the article source path and tags for filtering (inclusive/exclusive tags and article count). This component empowers the author to customize which articles are displayed.

[JordanPo1]

Is there any documentation for a tag picker? Tag picker is what we have been calling this, but I have not been able to see anywhere on how to do that?

[arunpatidar · Accepted solution]

Hi @JordanPo1 
here is the example https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/multiple-rootpath-in-tagfi... 

[Sudheer_Sundalam]

@JordanPo1 ,

We have implemented something mostly similar to your requirement. Please checkout this page and see how the results are filtered based on the options selected from the dropdowns positioned on the right side of the page.

https://www.silabs.com/blog

The dialog to choose the predefined list of tags looks like this.

This is the tag field dialog property

<tags
  jcr:primaryType="nt:unstructured"
  sling:resourceType="cq/gui/components/coral/common/form/tagfield"
  multiple="{Boolean}true"
  fieldLabel="Some Tags"
  name="./sometags"
  required="{Boolean}true"
  rootPath="/content/cq:tags/sometagspath"/>

We are using the combination of sling selectors and JSON responses to make this page very cache efficient. 

Hope you get the idea.

[kautuk_sahni]

@JordanPo1 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.