Surrounding container

For Collections and smart collections (see [asa2_smart_collection]) it can be very useful to place HTML code around the list of items. For example if you want to display the list of items in a box or even more important, if you want to design a modern CSS list layout. For this purpose ASA2 has the option to define a “surrounding container” for each template. This container HTML will only get used for collections and smart collections.

{{ item_list }}

If you want to use a surrounding container, you have to set the placeholder {{ item_list }} in it. This will be replaced with the rendered item list.

Note

A surrounding container must contain the placeholder {{ item_list }} to be functional.

Example

Single item HTML:

<div class="pin">
        <a href="{{ AmazonURL }}" target="_blank"><img src="{{ LargeImageURL }}" /></a>
        <p><a href="{{ AmazonURL }}" target="_blank">{{ Title }}</a></p>
</div>

Surrounding container HTML:

<div id="wrapper">
        <div id="columns">
                {{ item_list }}
        </div>
</div>

Using the surrounding container with item lists, you are able to create dynamic item lists like the one in the following screenshot: