solidus_liquid 0.0.1.alpha

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/collection-grid-item.liquid

@@ -0,0 +1,46 @@
+{% comment %}If no value is passed to the snippet, we will set the snippet variable to a sensible default.{% endcomment %}
+{% if collection-grid-item == '' %}{% assign collection-grid-item = 'three-per-row' %}{% endif %}
+
+<li class="{{ collection-grid-item }} centered">
+
+  <div class="coll-image-wrap">
+    <a href="{{ collection.url }}">
+      {% if collection.image %}
+      <img src="{{ collection | img_url: 'grande' }}" alt="{{ collection.image.alt | escape }}" />
+      {% else %}
+      <img src="{{ collection.products.first | img_url: 'grande' }}" alt="{{ collection.title | escape }}" />
+      {% endif %}
+    </a>
+  </div><!-- .coll-image-wrap -->
+  
+  <div class="coll-caption">
+      <a class="coll-title" href="{{ collection.url }}">
+        {{ collection.title }}
+      </a>
+      <span class="coll-item-count">
+        {{ collection.all_products_count }} {{ collection.all_products_count | pluralize:'item','items' }}
+      </span>
+  </div><!-- .coll-caption -->
+  
+</li>
+
+{% comment %}
+You don't need to use a clearing div. Use whatever it is you use to clear
+floated elements. The code that follows just just shows you how to use a cycle element.
+Notice that we named it ( 'clear' ). We need to name it because there's another cycle
+element in this file ( we called that other one 'last' ). If you have more than one
+cycle element in a rendered view, you'll need to name all of them.
+The cycle element is documented here: http://docs.shopify.com/themes/liquid-basics/logic#cycle
+{% endcomment %}
+
+{% if collection-grid-item == 'six-per-row' %}
+{% cycle 'clear': '', '', '', '', '', '<div style="clear:both"></div>' %}
+{% elsif collection-grid-item == 'five-per-row' %}
+{% cycle 'clear': '', '', '', '', '<div style="clear:both"></div>' %}
+{% elsif collection-grid-item == 'four-per-row' %}
+{% cycle 'clear': '', '', '', '<div style="clear:both"></div>' %}
+{% elsif collection-grid-item == 'three-per-row' %}
+{% cycle 'clear': '', '', '<div style="clear:both"></div>' %}
+{% elsif collection-grid-item == 'two-per-row' %}
+{% cycle 'clear': '', '<div style="clear:both"></div>' %}
+{% endif %}

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/collection-listing.liquid

@@ -0,0 +1,46 @@
+{% comment %}
+  Be prepared to use this snippet to showcase collections specified in a link list as per this solution here: 
+  "Featuring collections using a Link List" http://docs.shopify.com/support/your-store/collections/featuring-collections-using-link-lists
+  If this snippet is called with an argument, we'll assume it is the handle of a link list, and we will use that list.
+  If this snippet is not called with an argument, we'll assume we are on the /collections page and will list all collections in the shop, all except the 'frontpage' and 'all' collections.
+  Merchants often create an 'all' collection to control their Catalog page at /collections/all as per these instructions:
+  "Taking Control of your Catalog Page" http://docs.shopify.com/support/your-store/collections/taking-control-of-your-catalog-page
+  and don't want that collection to appear on their /collections page.
+{% endcomment %}
+
+{% assign products_per_page = settings.products_per_row | times: settings.number_of_rows %}
+{% assign numbers = 'one, two, three, four, five, six' | split: ',' %}
+{% assign products_per_row = settings.products_per_row | minus: 1 %}
+{% assign products_per_row = numbers[products_per_row] | strip | append: '-per-row' %}
+
+{% assign using_link_list = false %}
+
+{% if collection-listing != '' and linklists[collection-listing].handle == collection-listing and linklists[collection-listing].links.size > 0 %}
+  {% assign using_link_list = true %}
+{% endif %}
+
+<h1>{% if using_link_list %}{{ linklists[collection-listing].title }}{% else %}Collections{% endif %}</h1>
+
+{% if using_link_list %}
+<ul class="grid clearfix">
+{% for link in linklists[collection-listing].links %}
+  {% if link.type == 'collection_link' %}
+  {% assign collection = link.object %}
+  {% include 'collection-grid-item' with products_per_row %}
+  {% endif %}
+{% endfor %}
+</ul>
+{% else %}
+{% paginate collections by products_per_page %}
+<ul class="grid clearfix">
+{% for collection in collections %}
+  {% include 'collection-grid-item' with products_per_row %}
+{% endfor %}
+</ul>
+{% if paginate.pages > 1 %}
+<div id="pagination">
+  {{ paginate | default_pagination }}
+</div>
+{% endif %}
+{% endpaginate %}
+{% endif %}

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/open-graph-tags.liquid

@@ -0,0 +1,35 @@
+{% if template contains 'product' %}
+  <meta property="og:type" content="product" />
+  <meta property="og:title" content="{{ product.title | strip_html | escape }}" />
+  {% for image in product.images %}
+  <meta property="og:image" content="http:{{ image | img_url: 'grande' }}" />
+  <meta property="og:image:secure_url" content="https:{{ image | img_url: 'grande' }}" />
+  {% endfor %}
+  <meta property="og:price:amount" content="{{ product.price | money_without_currency }}" />
+  <meta property="og:price:currency" content="{{ shop.currency }}" />
+{% elsif template contains 'article' %}
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content="{{ article.title | strip_html | escape }}" />  
+  {% assign img_tag = '<' | append: 'img' %}
+  {% if article.content contains img_tag %}
+    {% assign src = article.content | split: 'src="' %}
+    {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
+    {% if src %}
+      <meta property="og:image" content="http:{{ src }}" />
+      <meta property="og:image:secure_url" content="https:{{ src }}" />
+    {% endif %}
+  {% endif %}
+{% else %}
+  {% if settings.use_logo %}
+    <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
+    <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
+  {% endif %}  
+  <meta property="og:title" content="{{ page_title | escape }}" />
+  <meta property="og:type" content="website" />
+{% endif %}
+
+{% if page_description %}
+<meta property="og:description" content="{{ page_description }}" />
+{% endif %}
+<meta property="og:url" content="{{ canonical_url }}" />
+<meta property="og:site_name" content="{{ shop.name }}" />

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/product-grid-item.liquid

@@ -0,0 +1,70 @@
+{% comment %}
+It may be a good idea to provide a theme setting that lets a merchant decide how many products to show per row
+on collection pages. Or, it may be a good idea to provide a control on the store front which lets a shopper decide 
+whether items be presented in a grid or in a list.
+That information about the presentation can be passed on to the product-grid-item.liquid snippet via the 'with' argument.
+Use of the 'with' argument is explained here: http://docs.shopify.com/themes/theme-templates/snippets.
+The information can then be referred to by accessing the variable which goes by the same name as the snippet,
+in this case product-grid-item. If the 'with' argument is not used, the snippet variable is set to an empty string.
+Here, for the sake of teaching, we will use 2 presentation options:
+- 3 products per row, when passing the value 'three-per-row' to the snippet
+- 4 products per row, when passing the value 'four-per-row' to the snippet
+{% endcomment %}
+
+{% comment %}If no value is passed to the snippet, we will set the snippet variable to a sensible default.{% endcomment %}
+{% if product-grid-item == '' %}{% assign product-grid-item = 'three-per-row' %}{% endif %}
+
+{% comment %}Is this product on sale?{% endcomment %}
+{% assign on_sale = false %}
+{% if product.compare_at_price > product.price %}
+  {% assign on_sale = true %}
+{% endif %}
+
+<li class="{{ product-grid-item }}{% unless product.available %} sold-out{% endunless %}{% if on_sale %} on-sale{% endif %}{% if product-grid-item == 'four-per-row' %}{% cycle 'last': '', '', '', ' last-in-row' %}{% elsif product-grid-item == 'three-per-row' %}{% cycle 'last': '', '', ' last-in-row' %}{% endif %} centered">
+
+  <div class="prod-image-wrap">  
+    <a href="{{ product.url | within: collection }}">
+      <img src="{{ product | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
+    </a>
+  </div><!-- .prod-image-wrap -->
+  
+  <div class="prod-caption">
+      <a href="{{ product.url | within: collection }}">
+        {{ product.title }}
+      </a>
+      <span class="prod-price">
+        {% if product.price_varies %}From{% endif %}
+        {{ product.price | money }}
+        {% if on_sale %}
+        <s class="compare-at-price">{{ product.compare_at_price | money }}</s>
+        {% endif %}
+      </span>
+      {% comment %}
+        All themes by Shopify should support the Product Reviews app out of the box.
+        https://apps.shopify.com/product-reviews
+      {% endcomment %}
+      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
+  </div><!-- .prod-caption -->
+  
+</li>
+
+{% comment %}
+You don't need to use a clearing div. Use whatever it is you use to clear
+floated elements. The code that follows just just shows you how to use a cycle element.
+Notice that we named it ( 'clear' ). We need to name it because there's another cycle
+element in this file ( we called that other one 'last' ). If you have more than one
+cycle element in a rendered view, you'll need to name all of them.
+The cycle element is documented here: http://docs.shopify.com/themes/liquid-basics/logic#cycle
+{% endcomment %}
+
+{% if product-grid-item == 'six-per-row' %}
+{% cycle 'clear': '', '', '', '', '', '<div style="clear:both"></div>' %}
+{% elsif product-grid-item == 'five-per-row' %}
+{% cycle 'clear': '', '', '', '', '<div style="clear:both"></div>' %}
+{% elsif product-grid-item == 'four-per-row' %}
+{% cycle 'clear': '', '', '', '<div style="clear:both"></div>' %}
+{% elsif product-grid-item == 'three-per-row' %}
+{% cycle 'clear': '', '', '<div style="clear:both"></div>' %}
+{% elsif product-grid-item == 'two-per-row' %}
+{% cycle 'clear': '', '<div style="clear:both"></div>' %}
+{% endif %}

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/site-nav.liquid

@@ -0,0 +1,57 @@
+{% comment %}
+  A word on drop-down menus: Shopify has no concept of them.
+  Drop-down menus in Shopify themes are a hack that relies on a naming convention.
+  To create a drop-down menu, the merchant must create a link list that has the same name as the link he wants the drop-down for.
+  For example, if he wants a drop-down under a 'Shop by brand' link (say, he has such link in his Main Menu), he needs to create a linklist called 'Shop by brand', and populate it with links. Once he has done that, there'll be a drop-down under 'Shop by brand'.
+  Shopify has a visual how-to guide here: http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu.
+  The naming convention hack won't work well if a shop's navigation uses non-English characters. There's a much more verbose coding solution that handles non-English characters here: http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/translations/can-i-have-drop-down-menus-that-use-non-english-characters.
+  A word on sub-categories: Shopify manages sub-categories using product tags: http://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/subcategories
+{% endcomment %}
+
+<nav role="navigation" class="left">
+  <ul class="nav">
+    {% for link in linklists.main-menu.links %}
+    {% assign has_sub_menu = false %}
+    {% assign has_sub_categories = false %}
+    {% assign parent_link_active = false %}
+    {% assign child_list_handle = link.title | handle %}
+    {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
+      {% assign has_sub_menu = true %}
+      {% for l in linklists[child_list_handle].links %}
+        {% if handle != blank and handle == l.object.handle %}
+          {% assign parent_link_active = true %}
+        {% elsif page_title == l.title %}
+          {% assign parent_link_active = true %}
+        {% endif %}
+      {% endfor %}
+    {% elsif link.type == 'collection_link' and link.object.all_tags.size > 0 %}
+      {% assign has_sub_categories = true %}
+    {% endif %}
+    <li class="{% if link.active or parent_link_active %} active{% endif %}{% if has_sub_menu or has_sub_categories %} has-dropdown{% endif %}{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}">
+      <a href="{{ link.url }}">{{ link.title }}{% if has_sub_menu or has_sub_categories %} <i class="fa fa-angle-down"></i>{% endif %}</a> 
+      {% if has_sub_menu or has_sub_categories %}
+      <ul class="sub-nav">
+        {% if has_sub_menu %}
+          {% for l in linklists[child_list_handle].links %}
+          <li class="{% if l.active %} active{% endif %}">
+            <a href="{{ l.url }}">{{ l.title }}</a>
+          </li>
+          {% endfor %}
+        {% elsif has_sub_categories %}
+          {% for tag in link.object.all_tags %}
+          <li class="{% if current_tags contains tag %} active{% endif %}">
+            <a href="{{ link.url }}/{{ tag | handle }}">{{ tag }}</a>
+          </li>
+          {% endfor %}
+        {% endif %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+    <li class="show-on-small{% if template == 'search' %} active{% endif %}">
+      <a href="/search">
+        <i class="fa fa-search"></i>
+      </a>
+    </li>
+  </ul>
+</nav>

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/social-links.liquid

@@ -0,0 +1,42 @@
+{% unless settings.facebook_url == blank %}
+<a href="{{ settings.facebook_url }}" title="Follow us on Facebook" target="_blank"><span class="shopify-social-icon-facebook{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.twitter_url == blank %}
+<a href="{{ settings.twitter_url }}" title="Follow us on Twitter" target="_blank"><span class="shopify-social-icon-twitter{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.pinterest_url == blank %}
+<a href="{{ settings.pinterest_url }}" title="Follow us on Pinterest" target="_blank"><span class="shopify-social-icon-pinterest{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.googleplus_url == blank %}
+<a href="{{ settings.googleplus_url }}" title="Follow us on Google+" target="_blank"><span class="shopify-social-icon-googleplus{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.instagram_url == blank %}
+<a href="{{ settings.instagram_url }}" title="Follow us on Instagram" target="_blank"><span class="shopify-social-icon-instagram{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.linkedin_url == blank %}
+<a href="{{ settings.linkedin_url }}" title="Follow us on linkedin" target="_blank"><span class="shopify-social-icon-linkedin{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.flickr_url == blank %}
+<a href="{{ settings.flickr_url }}" title="Follow us on Flickr" target="_blank"><span class="shopify-social-icon-flickr{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.yelp_url == blank %}
+<a href="{{ settings.yelp_url }}" title="Look us up on Yelp" target="_blank"><span class="shopify-social-icon-yelp{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.vimeo_url == blank %}
+<a href="{{ settings.vimeo_url }}" title="Follow us on Vimeo" target="_blank"><span class="shopify-social-icon-vimeo{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.youtube_url == blank %}
+<a href="{{ settings.youtube_url }}" title="Follow us on YouTube" target="_blank"><span class="shopify-social-icon-youtube{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.tumblr_url == blank %}
+<a href="{{ settings.tumblr_url }}" title="Come visit our blog" target="_blank"><span class="shopify-social-icon-tumblr{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.wordpress_url == blank %}
+<a href="{{ settings.wordpress_url }}" title="Come visit our blog" target="_blank"><span class="shopify-social-icon-wordpress{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.featured_blog == blank %}
+<a href="/blogs/{{ settings.featured_blog }}.atom" title="Subscribe to our blog" target="_blank"><span class="shopify-social-icon-feed{{ settings.social_icons_style }}"></span></a>
+{% endunless %}
+{% unless settings.contact_email == blank %}
+<a href="mailto:{{ settings.contact_email }}" title="Email us" target="_blank"><span class="shopify-social-icon-email{{ settings.social_icons_style }}"></span></a>
+{% endunless %}

data/app/views/solidus_liquid/themes/skeleton-theme/snippets/twitter-card.liquid

@@ -0,0 +1,41 @@
+{% comment %}
+
+  This snippet renders meta data needed to create a Twitter card
+  for products and articles.
+
+  Your cards must be approved by Twitter to be activated
+   - https://dev.twitter.com/docs/cards/validation/validator
+
+  More information:
+   - https://dev.twitter.com/docs/cards/types/product-card
+   - https://dev.twitter.com/docs/cards/types/summary-card
+
+{% endcomment %}
+ 
+{% if template contains 'product' %}
+  <meta name="twitter:card" content="product" />
+  <meta name="twitter:title" content="{{ product.title | escape }}" />
+  <meta name="twitter:description" content="{{ product.description | strip_html | strip_newlines | truncatewords: 60, '' | escape }}" />
+  <meta name="twitter:image" content="http:{{ product | img_url: 'large' }}" />
+  <meta name="twitter:label1" content="Price" />
+  <meta name="twitter:data1" content="{% if product.price_varies %}From {% endif %}{{ product.price | money_with_currency | strip_html }}" />
+  {% if product.vendor == blank %}
+  <meta name="twitter:label2" content="Availability" />
+  <meta name="twitter:data2" content="In stock" />  
+  {% else %}
+  <meta name="twitter:label2" content="Brand" />
+  <meta name="twitter:data2" content="{{ product.vendor | escape }}" />
+  {% endif %}
+{% elsif template contains 'article' %}
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="{{ article.title | escape }}" />
+  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 60, '' | escape }}" />
+  {% assign img_tag = '<' | append: 'img' %}
+  {% if article.content contains img_tag %}
+    {% assign src = article.content | split: 'src="' %}
+    {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
+    {% if src %}
+    <meta property="twitter:image" content="http:{{ src }}" />
+    {% endif %}
+ {% endif %}
+{% endif %}

data/app/views/solidus_liquid/themes/skeleton-theme/templates/404.liquid

@@ -0,0 +1,2 @@
+<h1 class="centered">404 Page Not Found</h1>
+<h2 class="delta centered">The page you requested does not exist. Click <a href="/collections/all">here</a> to continue shopping.</h2>

data/app/views/solidus_liquid/themes/skeleton-theme/templates/article.liquid

@@ -0,0 +1,160 @@
+{% paginate article.comments by 50 %}
+
+{% comment %}
+When a comment has just been submitted, it's not shown right away.
+Shopify needs to wait until it knows for sure that it is not spam to publish it.
+We can still show right away *to its author* the comment he just submitted 
+— although that comment may not have been published yet.
+When a comment is submitted, the browser is redirected to a page that 
+includes the new comment id in its URL. Example:
+http://shopname.myshopify.com/blogs/news/2022072-my-post?comment=3721372
+When a comment ID is specified in an article URL, that comment is accessible in the 
+template through a Liquid object called comment. 
+That comment is a full-fledged comment variable that has all the regular comment properties: 
+http://docs.shopify.com/themes/liquid-variables/comment.
+Note that comment.created_at will only be defined if the comment did not have any blank field 
+— was posted without error.
+{% endcomment %}
+
+{% assign number_of_comments = article.comments_count %}
+
+{% comment %}If a comment was just submitted, and it has no blank fields.{% endcomment %}
+{% if comment and comment.created_at %}
+  {% assign number_of_comments = article.comments_count | plus: 1 %}
+{% endif %}
+
+<h2 class="delta"><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
+
+<div class="article">
+  <h1 class="title">
+    {{ article.title }}
+  </h1>
+  <h3 class="date">
+    <time pubdate datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: '%b %d, %Y' }}</time>
+  </h3>
+  <div class="rte">
+    {{ article.content }}
+  </div>
+  <div class="meta">
+    {% if blog.comments_enabled? and article.comments_count > 0 %}
+    <span class="meta-comments">
+      <a href="#comments"><i class="fa fa-comment"></i> {{ article.comments_count }} {{ article.comments_count | pluralize: 'comment','comments' }}</a>
+    </span>
+    {% endif %}
+    {% if article.tags.size > 0 %}
+    <span class="tags">
+      {% for tag in article.tags %} 
+      <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{% if forloop.first %}<i class="fa fa-tag"></i> {% endif %}{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
+      {% endfor %}
+    </span>
+    {% endif %}
+  </div>
+</div>
+
+{% if blog.comments_enabled? %}
+<div id="comments">
+
+  {% comment %}If a comment was just submitted with no blank field.{% endcomment %}
+  {% if comment and comment.created_at %}
+  <p class="success feedback">
+    {% if blog.moderated? %}
+    Your comment was posted successfully. We will publish it in a little while, as our blog is moderated.
+    {% else %}
+    Your comment was posted successfully! Thank you!
+    {% endif %}
+  </p>
+  {% endif %}
+
+  {% if number_of_comments > 0 %}
+  <ul>
+    {% comment %}If a comment was just submitted with no blank field, let's show it.{% endcomment %}
+    {% if comment and comment.created_at %}
+    <li id="{{ comment.id }}" class="comment first{% if article.comments_count == 0 %} last{% endif %}">
+      <h3 class="comment-author">{{ comment.author }} says...</h3>
+      <div class="comment-content">
+        {{ comment.content }}
+      </div>
+      <p class="comment-date">
+        On {{ comment.created_at | date: "%B %d, %Y" }}
+      </p>
+    </li>
+    {% endif %}
+    {% comment %}Showing the rest of the comments.{% endcomment %}
+    {% for comment in article.comments %}
+    <li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
+      <h3 class="comment-author">{{ comment.author }} says...</h3>
+      <div class="comment-content">
+        {{ comment.content }}
+      </div>
+      <p class="comment-date">
+        On {{ comment.created_at | date: "%B %d, %Y" }}
+      </p>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+  
+  {% comment %}Comments are paginated.{% endcomment %}
+  {% if paginate.pages > 1 %}
+  <div id="pagination">
+    {{ paginate | default_pagination }}
+  </div>
+  {% endif %}
+  
+  {% comment %}Comment submission form.{% endcomment %}
+  {% form "new_comment", article %}
+  
+  <h3 id="add-comment-title">Leave a comment</h3>
+  
+  {% if form.errors %}
+  <div class="feedback error">
+  {{ form.errors | default_errors }}
+  </div>
+  {% endif %}
+
+  <p>
+    <label for="comment-author">Name</label>
+    <input required{% if form.errors contains "author" %} class="error"{% endif %} type="text" name="comment[author]" placeholder="Your name" id="comment-author" value="{{ form.author }}" />
+  </p>
+
+  <p>
+    <label for="comment-email">Email</label>
+    <input required{% if form.errors contains "email" %} class="error"{% endif %} type="email" name="comment[email]" placeholder="your@email.com" id="comment-email" value="{{ form.email }}" />
+  </p>
+
+  <p>
+    <label for="comment-body">Message</label>
+    <textarea required{% if form.errors contains "body" %} class="error"{% endif %} name="comment[body]" id="comment-body">{{ form.body }}</textarea>
+  </p>
+
+  <input type="submit" value="Post Comment" /> 
+  
+  {% if form.errors %}
+    <script>
+      window.location.hash = '#add-comment-title';
+    </script>
+  {% endif %}
+  
+  {% if form.posted_successfully? %}
+    <script>
+      window.location.hash = '#comments';
+    </script>
+  {% endif %} 
+  
+  {% endform %}
+  
+</div>
+{% endif %}
+
+{% if blog.next_article or blog.previous_article %}
+<p class="clearfix"> 
+  {% if blog.next_article %}
+  <span class="left">{{ '&larr; Next Post' | link_to: blog.next_article }}</span>
+  {% endif %}    
+  {% if blog.previous_article %}
+  <span class="right">{{ 'Previous Post &rarr;' | link_to: blog.previous_article }}</span>
+  {% endif %}
+</p>
+{% endif %}
+
+{% endpaginate %}