Search code examples
liquidbusiness-catalyst

Filter Business Catalyst Web App Items by Category WITHIN Web App Item Detail Layout

I am trying to list web app items filtered by Category classification within the detail layout of another web app.

To explain further, I have Web App 1 (Learning Areas) which contains items like Science, English, Maths, etc. Each item is classified using BC's: Science, English, Maths, etc.

I also have Web App 2 (Resources) which will contain a wide range of teaching material. Each item will also be classified using BC's Categories.

I want to display items from Web App 2 inside the details layout of Web App 1 according to the Category classification of the "current" Web App 1 item.

BC by default allows you to output a list of web app items according to a Category ID, eg

{module_webapps id="Web App 2 ID" filter="classified" itemId="Category ID"}

This won't work because I'm going to be placing this inside the detail layout of Web App 1 so the Category ID needs to change depending on what Web App 1 item we are on.

For instance, on the Science page (Web App 1 item classified as Science), Web App 2 items that have been classified as Science will be displayed, on the English page (Web App 1 item classified as English), Web App 2 items that have been classified as English will be display, and so on for each of the different learning areas.

Is there a way to do this? I had hoped there might be a {tag_categoryId} available so that I could do something like:

{module_webapps id="Web App 2 ID" filter="classified" itemId="{tag_categoryId}"}

but there is only {tag_classifications} which outputs the Category name, NOT the ID which is what is required.

Is there some way to do this with Liquid perhaps?

Solution

  • It turns out this is possible using BC's Liquid markup.

    It's a bit of a workaround but it isn't difficult and it works.

    My solution requires:

    • the {{classifications}} tag (legacy syntax is {tag_classifications}), available inside web app detail layout
    • {module_categorylist} (when surrounded by <select> tags, this by default outputs a dropdown list of every Category on the website)

    You can suppress the default rendering of {module_categorylist} by using template="" and can assign the data to a collection which can be accessed with Liquid:

    {module_categorylist collection="gttCategories" render="collection" template=""}

    So my solution is as follows: (The following code is inserted into the Web App 1 detail layout.)

    {module_categorylist collection="myCategories" render="collection" template=""}

{% for item in myCategories.items -%}

    {% if item.name == {{this.classifications}} -%}

        {module_webapps id="Web App 2 ID" filter="classified" itemId="{{item.id}}"}

    {% endif -%}

{% endfor -%}

    The FOR statement iterates through the list of Categories outputted in the collection myCategories from the {module_categorylist}.

    The IF statement looks at the name of each Category item within the list and compares it to {{classifications}}. ({{classifications}} outputs the Category name of the "current" Web App 1 item.)

    For each match, it renders the Web App 2 module with the ID of that Category inserted into the itemId parameter.