Custom Module Item Limit unexpected behavior

1

Don’t know if anyone else has come across this.
If you have a custom module that you are using more than once on the same page the “limit” item behavior is for the whole component source and not the single component itself.

For example if I add this to my page
{% component source: “CModule”, layout: “List”, limit: “10”, emptyMessage: “No Items”, type: “module” %} type: “module” %}
and 10 items fill the output.

If I add a another component from the same source using a different layout but I only one to output 1 item.
For example
{% component source: “CModule”, layout: “Today List”, limit: “1”, emptyMessage: “No Items”,type: “module” %}

The result in the second component is nothing will show up. I have to change the “limit” to 11 before anything shows up. I assume it is because it is counting the 10 that are already being displayed form the first component tag.

This is also true for the Empty Message. If based on my layout conditions there shouldn’t be any data it will not display and Empty message because the other list displays data. Again behavior is based on module and not the individual component.

2

Hi @Rhatch. I can’t replicate this issue.
I’ve set up the same situation and both components work independently as expected.
I’ve tested on both Liquid 1.0 and 2.0 with same results.

Would you be able to paste your exact code from the page and the 2 layouts? or screenshot them?

3

Hi @Adam.Wilson, I looked into it deeper and it is a result of me using if statements in the list layout. The first two if statements are causing the issue and the limit has to be set to at least 9 for anything to display. Is there another way to get the results I am looking for. I am trying to filter the data 3 different ways.

Here is the list layout.

{% if this['HomeTeam_name'] == 'Grand Island Senior High' or this['AwayTeam_name'] == 'Grand Island Senior High' %}
{% if this['GameDate'] | date: '%m/%d/%y' == 'now' | date: '%m/%d/%y' %}
<div class="prep-post sports-border today-game">
    <div class="sports-game">
        <div class="sports-icon-today {% if this['Status'] != null %}update-color{% elsif this['Sport'] contains "Basketball" %}basketball{% elsif this['Sport'] contains "Football" %}football{% elsif this['Sport'] contains "Volleyball" %}volleyball{% elsif this['Sport'] contains "Baseball" %}baseball{% elsif this['Sport'] contains "Softball" %}softball{% endif %}">
            {% if this['Status'] != null %}
                <span>{{this['Status']}}</span>
                {% elsif this['Sport'] contains "Basketball" %}
                <span>Basketball</span>
                {% elsif this['Sport'] contains "Football" %}
                <span>Football</span>
                {% elsif this['Sport'] contains "Baseball" %}
                <span>Baseball</span>
                {% elsif this['Sport'] contains "Softball" %}
                <span>Softball</span>
                {% elsif this['Sport'] contains "Volleyball" %}
                <span>Volleyball</span>
            {% endif %}
        {% if this['Sport'] contains "Basketball" %}
        <img src="/content/images/icon/basketball.png">
        {% elsif this['Sport'] contains "Football" %}
        <img src="/content/images/icon/football.png">
        {% elsif this['Sport'] contains "Baseball" %}
        <img src="/content/images/icon/baseball.png">
        {% elsif this['Sport'] contains "Volleyball" %}
        <img src="/content/images/icon/volleyball.png">
        {% elsif this['Sport'] contains "Softball" %}
        <img src="/content/images/icon/baseball.png">
        {% endif %}
        {% if this['Sport'] contains "Boys" %}
        <span>BOYS</span>
        {% elsif this['Sport'] contains "Girls" %}
        <span>GIRLS</span>
        {% elsif this['Sport'] contains "Men" %}
        <span>MEN</span>
        {% elsif this['Sport'] contains "Women" %}
        <span>WOMEN</span>
        {% endif %}
        </div>
            {% if request.currentmember.securezones[0].id == '1' %}
            <form action="/public/api/module-items/delete/2890/{{this.id}}?redirectURL=" method="post" onsubmit="return confirm('Are you sure you want to delete this item?')">
            <button type="submit" class="edit-button" title="Delete">&#128465;</button></form>
            <a href="{{this['Url']}}#editform" target="_blank" class="edit-button">&#9998;</a>
            {% endif %}
        <p>
        {% capture hour %}{{"0:00" | date:'%l'}}{% endcapture %}
        {% if this['GameDate'] | date: '%l' == hour %}
        <span class="game-date">TODAY - Pregame TBD</span>
        {% else %}
        <span class="game-date">TODAY - {{this['GameDate'] | date: 'Pregame %l:%M %P'}}</span>
        {% endif %}
        </p>
        {% if this['TournamentLocation'] != null %}
        <p class="tournament">
        {{this['TournamentLocation']}}
        </p>
        {% endif %}
    {% if this['TournamentLocation'] != null %}
     <div class="sports-team">{% component source: "Sports Team", layout: "Website List", filterBy: "name", filterValue: "{{this['HomeTeam_name']}}", limit: "1", enablePagination: "false", type: "module" %}</div> <span class="matchup">Vs</span> <div class="sports-team">{% component source: "Sports Team", layout: "Website List", filterBy: "name", filterValue: "{{this['AwayTeam_name']}}", limit: "1", enablePagination: "false", type: "module" %}</div>
    {% else %}
    <div class="sports-team"><span class="sports-tag">HOME</span> {% component source: "Sports Team", layout: "Website List", filterBy: "name", filterValue: "{{this['HomeTeam_name']}}", limit: "1", enablePagination: "false", type: "module" %}</div> <span class="matchup">@</span> <div class="sports-team"><span class="sports-tag">AWAY</span> {% component source: "Sports Team", layout: "Website List", filterBy: "name", filterValue: "{{this['AwayTeam_name']}}", limit: "1", enablePagination: "false", type: "module" %}</div>
    {% endif%}
    </div>
</div>
{% endif %}
{% endif %}
4

Hi @Rhatch. Perhaps the easiest way is to create 3 different list layouts, each with their specific IF logic.
Then each 3 module components call the relevant layout.
Although, you did mention you were using different layouts so I’m not sure why the logic from one would affect the other?

Alternatively, and to perhaps use only one Layout, you’d have to rework you Liquid logic to allow for the different conditions.
One way you might achieve this is to pass a custom parameter in each component with a unique/descriptive value so you can use that in your layout logic.

For example:

{% component source: “CModule”, ......, listType: "list1", type: “module” %}
{% component source: “CModule”, ......, listType: "list2", type: “module” %}
{% component source: “CModule”, ......, listType: "list3", type: “module” %}

Then in your layout/s:

{% if params.listType == "list1" %}
     <!-- LIST 1 -->
{% elsif params.listType == "list2" %}
     <!-- LIST 2 -->
{% elsif params.listType == "list3" %}
     <!-- LIST 3 -->
{% else %}
     <!-- FALLBACK LIST -->
{% endif %}
5

I thought I had this worked out but It keeps haunting me.

I have one custom module with a parameter that has an option of news or sports. I have a list layout for each.
The News List contains the following if statement to only display the items marked as “news”

{% if this['ArticleType'] == "News" %} "content" {% endif %}

The Sports List contains this if statement

{% if this['ArticleType'] == "Sports" %} "content" {% endif %}`

Placing the following component tag on a page works but instead of displaying 25 items to a page it is only displaying 22 then pagination to the next.

{% component source: "News", layout: "Website News List", filterBy: "ItemCategories", filterValue: "{{Call_Letters}}", sortBy: "releasedate", sortOrder: "DESC", limit: "25", enablePagination: "true", type: "module" %}

When I place them both on the same page and limit them to 5 each it is even worse.

{% component source: "News", layout: "Website News List", filterBy: "ItemCategories", filterValue: "{{Call_Letters}}", sortBy: "releasedate", sortOrder: "DESC", limit: "5", emptyMessage: "No News", enablePagination: "true", type: "module" %}
   
{% component source: "News", layout: "Website Sports List", filterBy: "ItemCategories", filterValue: "{{Call_Letters}}", sortBy: "releasedate", sortOrder: "DESC", limit: "5", emptyMessage: "No News", enablePagination: "true", type: "module" %}

It does NOT display any “news” (first component) Items but does display 5 Sports items (second component).

If I increase the limit eventually I will get news items displayed. but eventually it is more than I want. Is there a different way to limit my results to 5?

My only other option is to create seperate custom modules.

6

Hi @Rhatch.
Firstly, if you are using the filterBy: "ItemCategories" then you don’t need the IF statements in your list layouts.

The other problem then seems to be that you are using the same filterValue for both component tags.
One should be “News” and the other should be “Sports”.

7

The filterby: “ItemCategories” is for a different parameter. The IF statement is for a second parameter. Testing more I find that the if statements are processed after the data is loaded from the component tag. I tried with a FOR loop and limit:X switch but that gives me the same results. Any other way to filter multiple times and control the limit of how many are shown.

8

Ah I see.
Yes there are other ways to this.
The most straight-forward way would probably be to use the searchScope parameter instead of filtering and using Liquid in the layout.

eg:

{% component source: "News", layout: "Website News List", searchScope: "{'prop_ItemCategories':'{{Call_Letters}}', 'prop_ArticleType':'News'}", sortBy: "releasedate", sortOrder: "DESC", limit: "5", emptyMessage: "No News", enablePagination: "true", type: "module" %}

I think that should work.

9

Send me the bill, that was what I was missing. That worked wonderfully, and I only need one list layout now. I kept looking over it in the documentation because I didn’t’ think that was what I needed here.

1 Like
10

@Adam.Wilson Using SearchScope is there a way to have more than one item in a prop? For example if I want to pull two item categories. I tried “{‘prop_ItemCategories’:[‘PROP1’, ‘PROP2’]}” but it didn’t seam to work. And will something like his work with properties that other than categories?

And the last question is dates the example in the documentation uses an exact date how do I do I search from “now” or between now and 7 days from now?

Thanks

11

For multiple values in a property the syntax you have is correct, but this is currently only an AND operation. So it’s looking for items with BOTH those values present, not either/or.

For the date values (using prop_ReleaseDate_Min and prop_ReleaseDate_Max) you could populate the value with Liquid using date filters, eg:

{ ... 'prod_ReleaseDate_max':'{{ "now" | date: "%Y-%m-%d" }}', 'prod_ReleaseDate_max':'{{ "now" | date_add: 7, "day" | date: "%Y-%m-%d" }}' ... }

Docs for date filters: https://docs.treepl.co/liquid/liquid-filters#secDateAdd

12

Thanks again Adam.

Note for others you need to replace your double " with single ’ for this to work.
{{ ‘now’ | date: ‘%Y-%m-%d’ }}

1 Like