Involver Developer Network : Chapter 4 - Advanced for loops and Pagination

Adding pagination to a feature block is easy. All we need to do is wrap our for loop in the pagination loop and adjust the data set so for inherits its item set from paginate instead of calling them directly from the feature block.

{% rss_feed name:"my_feed" %}
     <h2>Latest deals from <a href="{{ rss_feed.url }}">DealNews.com Daily Feed</a></h2>

     {% paginate parent.content_items per_page:3 %}
          {% for item in feed_items %}
               <div>
                    <h3><a href="{{ item.origin_url }}">{{ item.title}}</a></h3>
                    <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
               </div>

               {% facebook_like item send:true %}
          {% endfor %}

          {{ pagination_links }}
     {% endpaginate %}
{% endrss_feed %}

Paginate now reads literally ”paginate through the set of feed items contained in the rss feed” and for reads “for each in in the set of feed items”. Where before for iterated through the entire set of items in the feed, it will now only iterate through the set of items passed to it by paginate, a few at a time.

Paying careful attention to which set of items you’re iterating through is very important in SML. It’s one of the most commonly made mistakes and one of the easiest to correct once you know what to look for.

You can customize the appearance of your pagination_links by applying attributes to the paginate block. Let’s do that now.

{% rss_feed name:"my_feed" %}
     <h2>Latest deals from <a href="{{ rss_feed.url }}">DealNews.com Daily Feed</a></h2>

     {% paginate parent.content_items next_label:"Forward >" previous_label:"< Back" page_links:false per_page:3 %}
          {% for item in content_items %}
               <div>
                    <h3><a href="{{ item.origin_url }}">{{ item.title}}</a></h3>
                    <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
               </div>

               {% facebook_like item send:true %}
          {% endfor %}

          {{ pagination_links }}
     {% endpaginate %}
{% endrss_feed %}

You can also embed a html image (<img src=”my_image” alt="">) inside the “next_label and previous_label attributes to use images instead of text strings for your labels. Even better, you can use capture to encode editable_images.

{% rss_feed name:"my_feed" %}
     <h2>Latest deals from <a href="{{ rss_feed.url }}">DealNews.com Daily Feed</a></h2>

     {% capture prev_arrow %}{% editable_image name:”previous_arrow” %}{% endcapture %}
     {% capture next_arrow %}{% editable_image name:”next_arrow” %}{% endcapture %}

     {% paginate parent.content_items next_label:next_arrow previous_label:prev_arrow page_links:false per_page:3 %}
          {% for item in content_items %}
               <div>
                    <h3><a href="{{ item.origin_url }}">{{ item.title }}</a></h3>
                    <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
               </div>

               {% facebook_like item send:true %}
          {% endfor %}

          {{ pagination_links }}
     {% endpaginate %}
{% endrss_feed %}

Nesting for Loops

We can also nest multiple for loops in order to pull attributes and sub-attributes independently. As an example in an ?rss_feed block with multiple feeds, you might need a way to iterate through the set of sources first and then iterate through the set of items associated with each source. To do that we simply nest two for loops, the outer one to sort through the sources and the inner one to sort through the items from each source.

{% rss_feed name:"my_feed" %}
     {% for source in rss_feed.sources %}
          <h3>{{ source.title }}</h3>
          <p><a href="{{source.origin_url}}">Subscribe to this Feed</a></p>

          {% paginate source.feed_items page_links:false per_page:3 %}
               {% for item in feed_items %}
                    <div>
                         <h4><a href="{{ item.origin_url }}">{{ item.title }}</a></h4>
                         <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
                    </div>

                    {% facebook_like item send:true %}
               {% endfor %}

               {{ pagination_links }}
          {% endpaginate %}
     {% endfor %}
{% endrss_feed %}

Using nested for loops to display complex items

Nested for loops are particularly handy when working with the ?content_list and [social_catalog} feature blocks. We'll use content_list as an example. This block allows you to manually create custom content items which may contain any arbitrary number of text and image attachments. Let's use this to create a table of contents for an online magazine with a list of issues and short summaries of all the articles in each of those issues.

This example illustrates an important data structure that you'll see throughout SML. Content items are stored as arrays within SML Feature Blocks. The for loop allows you to parse those arrays and pull their contents out. Complex content items, such as those generated by content_list and social_catalog, will often have attributes which also generate arrays. If those arrays only include a single item it may make sense to pull that item directly by using the Common Context Variable .first to call the first item in the array and then specifying what attribute of that variable you want.

{% content_list name:"my_list" %}
    <h2>Awesome Mag</h2>

    {% paginate parent.content_items per_page: 5 %}
        <ul class="data-list">
            {% for back_issue in content_items %}
                <li>
                    <h3>{{ back_issue.title }}</h3>
                    <p>{{back_issue.description}}</p>

                  {% if back_issue.text_attachments.size > 0 %}
                      <h4>{{ back_issue.text_attachments.first.name }}</h4>
                        {{ back_issue.text_attachments.first.value | truncate:240 }}
                  {% endif %}
                </li>
            {% endfor %}
        </ul>

        {{ pagination_links }}
    {% endpaginate %}
{% endcontent_list %}

If your sub-arrays include multiple items, a nested for loop provides an ideal tool for sorting through them.

{% content_list name:"my_list" %}
    <h2>Awesome Mag</h2>

    {% paginate parent.content_items per_page: 5 %}
        <ul class="data-list">
            {% for back_issue in content_items %}
                <li>
                    <h3>{{ back_issue.title }}</h3>

                  {% if back_issue.text_attachments.size > 0 %}
                    <ul class="block-list">
                      {% for article in back_issue.text_attachments %}
                        <li>{{ article.name }}<br>
                        {{ article.value | truncate:240 }}</li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </li>
            {% endfor %}
        </ul>

        {{ pagination_links }}
    {% endpaginate %}
{% endcontent_list %}

You can even combine the methods in order to provide unique styling to a featured or first item.

{% content_list name:"my_list" %}
    <h2>Awesome Mag</h2>

    {% paginate parent.content_items per_page: 5 %}
        <ul class="data-list">
            {% for back_issue in content_items %}
                <li>
                    <h3>{{ back_issue.title }}</h3>

                  {% if back_issue.text_attachments.size > 0 %}
                    <div class="featured">
                       <h4>{{ back_issue.text_attachments.first.name }}</h4>
                        {{ back_issue.text_attachments.first.value | truncate:240 }}
                    </div>
                    <ul class="block-list">
                      {% for article in back_issue.text_attachments offset:1 %}
                        <li>{{ article.name }}<br>
                        {{ article.value | truncate:240 }}</li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </li>
            {% endfor %}
        </ul>

        {{ pagination_links }}
    {% endpaginate %}
{% endcontent_list %}