carolineschnapp
8/13/2010 - 7:48 PM

Listing all collections in the shop

Listing all collections in the shop

<style>

#collections-listing ul {
list-style-type: none;
list-style-position: outside;
overflow: hidden; 
}

#collections-listing ul li {
float: left;
width: 200px;
height: 300px;
margin-right: 30px;
}

#collections-listing ul li:Last-child {
margin-right: 0;
}

</style>

<div id="collections-listing">{% if linklists.featured-collections.links.size > 0 %}
  <h2>Product Collections</h2>
  <ul>
  {% for link in linklists.featured-collections.links %}
  {% assign collection = link.object %}
  {% unless collection.handle == 'frontpage' %}
    <li class="{{ collection.handle }}-collection">      
    {% capture collection_title %}{{ collection.title | escape }}{% endcapture %}
      <div class="collection">
        <div class="collection-image">
          <a href="{{ collection.url }}" title="Browse our {{ collection_title }} collection">
            {{ collection.products.first.featured_image | product_img_url: 'medium' | img_tag: collection_title }}
          </a>
        </div><!-- end of .collection-image -->
        <div class="collection-description">
          <h3>
            <a href="{{ collection.url }}" title="Browse our {{ collection_title }} collection">
              {{ collection.title }}
            </a>
            <small class="hint">
              {{ collection.all_products_count }} {{ collection.all_products_count | pluralize: 'item', 'items' }}
            </small>
          </h3>
        </div><!-- end of .collection-description -->
      </div><!-- end of .collection -->
    </li>
  {% endunless %}
  {% endfor %}
  </ul>{% else %}
  <p>Please {{ 'create a link list' | link_to: '/admin/links' }} that contains links to all the collections you wish to feature on this page. The title of that link list must be <strong>Featured Collections</strong>. If you want your collections to be listed alphabetically, reorder them alphabetically on your {{ 'Navigation page' | link_to: '/admin/links' }}.</p>{% endif %}
</div><!-- end of #collection-listing -->