Ahmed Guesmi
Ahmed Guesmi

Reputation: 370

I want to avoid button repetition

I display the content of the category and I display the button "displays more" if I have other content but the button has been marked according to the number of ads in the category, and when I paste the button outside "for" I get always this button even when the category content is empty

 <div class="pedagogical pedagogical--category js-pedagogical-items" data-type="category" data-nbdisplayed="4">
        {% for categoryId in questionCategories %}
            <div class="row pedagogical__items" data-type="category" data-value="{{ categoryId }}">
                {% for tool in tools if tool.questionCategory == categoryId %}
                    <div class="col-12 col-md-6 pedagogical__item__wrapper">
                        {% include 'components/tool-preview-item.html.twig' with {'tool' : tool} %}
                    </div>
                    <div class="col-12 text-center">
                        <button class="btn btn-outline-secondary js-show-more" data-type="category" data-value="{{ categoryId }}">{{ 'show-more'|trans({}, 'action') }}</button>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>

Upvotes: 0

Views: 37

Answers (1)

mrbm
mrbm

Reputation: 2194

I think you just need to add a check before rendering your button:

<div class="pedagogical pedagogical--category js-pedagogical-items" data-type="category" data-nbdisplayed="4">
    {% for categoryId in questionCategories %}
        <div class="row pedagogical__items" data-type="category" data-value="{{ categoryId }}">
            {% set has_items = 'false' %}
            {% for tool in tools if tool.questionCategory == categoryId %}
                {% set has_items = 'true' %}
                <div class="col-12 col-md-6 pedagogical__item__wrapper">
                    {% include 'components/tool-preview-item.html.twig' with {'tool' : tool} %}
                </div>
            {% endfor %}
            {% if has_items == 'true' %}
                <div class="col-12 text-center">
                    <button class="btn btn-outline-secondary js-show-more" data-type="category" data-value="{{ categoryId }}">{{ 'show-more'|trans({}, 'action') }}</button>
                </div>
            {% endif %}
        </div>
    {% endfor %}
</div>

Upvotes: 1

Related Questions