Type, Vendor, and Tag lists for collections

assets/ajaxify.scss.liquid

@@ -344,7 +344,6 @@ form[action^="/cart/add"] {
     width: 100%;
     padding: 5px 25px;
     margin: 0;
-    @include box-shadow(none);
   }
 }
 

assets/timber.scss.liquid

@@ -37,7 +37,7 @@
   #Site Nav and Dropdowns
   #Site Footer
   #Product Grid and List Views
-  #Tag List
+  #Collection Filters
   #Breadcrumbs
   #Product Page
   #Notes and Form Feedback
@@ -905,8 +905,10 @@ input[type="email"],
 input[type="file"],
 input[type="number"],
 input[type="tel"],
-input[type="submit"] {
+input[type="submit"],
+textarea {
   -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 input,
@@ -1475,9 +1477,9 @@ a.btn-secondary {
 }
 
 // ==============================================================================
-// #Tag list
+// #Collection Filters
 // ==============================================================================
-.active-tag {
+.active-filter {
   font-weight: bold;
 }
 

snippets/collection-sidebar.liquid

@@ -0,0 +1,145 @@
+{% comment %}
+
+  Side navigation for the product types, vendors, and tags.
+  These can be based on the current collection or all products. Details in comments below.
+
+  Note: Clicking on a tag will filter the products within the current collection.
+  Clicking on a type or vendor link will take you out of the current collection
+  to a standalone collection page. E.g. /collections/vendors?q=Pepsi
+
+{% endcomment %}
+
+{% comment %}
+  Show the description for the current collection
+{% endcomment %}
+{% if collection.description.size > 0 %}
+<div class="rte">
+  {{ collection.description }}
+</div>
+{% endif %}
+
+{% comment %}
+  Product types in the current collection
+    - List all of the shop's types with collections.all.all_types
+    - List the current collection's types with collection.all_types
+{% endcomment %}
+<h3>Product Types</h3>
+{% if collection.all_types.size > 0 %}
+
+  <ul>
+    {% comment %}
+      And for the good stuff, loop through the tags themselves.
+    {% endcomment %}
+    {% for type in collection.all_types %}
+      {% if collection.current_type == type %}
+      <li class="active-filter">
+        {{ type | link_to_remove_type }}
+      </li>
+      {% else %}
+      <li>
+        {{ type | link_to_type }}
+      </li>
+      {% endif %}
+    {% endfor %}
+
+  </ul>
+
+{% else %}
+
+  <p>Add a type to your products for this list to build itself. All lists are created in <strong>collection-tags.liquid</strong>.</p>
+
+{% endif %}
+
+{% comment %}
+  Product vendors in the current collection
+    - List all of the shop's vendors with collections.all.all_vendors
+    - List the current collection's vendors with collection.all_vendors
+{% endcomment %}
+<h3>Vendors</h3>
+{% if collection.all_vendors.size > 0 %}
+
+  <ul>
+    {% comment %}
+      And for the good stuff, loop through the tags themselves.
+    {% endcomment %}
+    {% for vendor in collection.all_vendors %}
+      {% if collection.current_vendor == vendor %}
+      <li class="active-filter">
+        {{ vendor | link_to_remove_vendor }}
+      </li>
+      {% else %}
+      <li>
+        {{ vendor | link_to_vendor }}
+      </li>
+      {% endif %}
+    {% endfor %}
+
+  </ul>
+
+{% else %}
+
+  <p>Add a vendor to your product for this list to build itself.</p>
+
+{% endif %}
+
+{% comment %}
+  Product tags in the current collection
+{% endcomment %}
+<h3>Tags</h3>
+{% if collection.all_tags.size > 0 %}
+
+  {% comment %}
+    Say we want to provide a 'catch-all' link at the top of the list,
+    we'd check against the collection.handle, product type, and vendor.
+  {% endcomment %}
+
+  <ul>
+    <li{% unless current_tags %} class="active-filter"{% endunless %}>
+
+      {% comment %}
+        Good for /collections/all collection and regular collections
+      {% endcomment %}
+      {% if collection.handle %}
+        <a href="/collections/{{ collection.handle }}">Everything in {{ collection.title }}</a>
+
+      {% comment %}
+        Good for automatic type collections
+      {% endcomment %}
+      {% elsif collection.current_type %}
+      <a href="{{ collection.current_type | url_for_type }}">Everything in {{ collection.title }}</a>
+
+      {% comment %}
+        Good for automatic vendor collections
+      {% endcomment %}
+      {% elsif collection.current_vendor %}
+        <a href="{{ collection.current_vendor | url_for_vendor }}">Everything in {{ collection.title }}</a>
+
+      {% endif %}
+    </li>
+
+    {% comment %}
+      And for the good stuff, loop through the tags themselves.
+    {% endcomment %}
+    {% for tag in collection.all_tags %}
+      {% if current_tags contains tag %}
+      <li class="active-filter">
+        {{ tag | link_to_remove_tag: tag }}
+      </li>
+      {% else %}
+      <li>
+        {% comment %}
+          Use link_to_add_tag if you want to allow filtering
+          by multiple tags
+        {% endcomment %}
+        {{ tag | link_to_tag: tag }}
+      </li>
+      {% endif %}
+    {% endfor %}
+
+  </ul>
+
+{% else %}
+
+  <p>Add tags to your products for this list to build itself.</p>
+
+{% endif %}

templates/collection.liquid

@@ -13,10 +13,11 @@
   <h2>{{ collection.title }}</h2>
 </header>
 
-{% comment %}
-  Use .grid--rev so that the collection tags appear below the products on mobile
-{% endcomment %}
-<div class="grid--rev">
+<div class="grid">
+
+  <div class="grid-item large--one-third">
+    {% include 'collection-sidebar' %}
+  </div>
 
   <div class="grid-item large--two-thirds">
 
@@ -58,16 +59,6 @@
 
   </div>
 
-  <div class="grid-item large--one-third">
-
-    {% comment %}
-      Loop through the tags in the current collection.
-      See the snippet 'product-grid-item' for the layout.
-    {% endcomment %}
-    {% include 'collection-tags' %}
-
-  </div>
-
 </div>
 
 {% endpaginate %}

templates/collection.list.liquid

@@ -25,7 +25,11 @@
 {% comment %}
   Use .grid--rev so that the collection tags appear below the products on mobile
 {% endcomment %}
-<div class="grid--rev">
+<div class="grid">
+
+  <div class="grid-item large--one-third">
+    {% include 'collection-sidebar' %}
+  </div>
 
   <div class="grid-item large--two-thirds">
 
@@ -67,16 +71,6 @@
 
   </div>
 
-  <div class="grid-item large--one-third">
-
-    {% comment %}
-      Loop through the tags in the current collection.
-      See the snippet 'product-grid-item' for the layout.
-    {% endcomment %}
-    {% include 'collection-tags' %}
-
-  </div>
-
 </div>
 
 {% endpaginate %}