Skip to content

Instantly share code, notes, and snippets.

@tsmango

tsmango/gist:2271606

Created April 1, 2012 05:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tsmango/2271606 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tsmango/2271606 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.md

Theme API

Every Asset in a Theme supports Limited Run's Theme API and there are two main ways to use the API:

  1. Output - {{ }} for things like {{ store.name }}, which will output something, like Exit Records.
  2. Tags - {% %} for things like if, unless, for, and paginate.

Output

There are many objects that can be used to output data from your Store to your Storefront and each object's data can be output directly or sent through a filter.

A filter is structured like data, followed by a pipe, followed by the filter name and any options, like:

{{ item.published_at | date: "%B, %d %Y" }}

In the above example, the data item.published_at is piped into the date filter with the option "%B, %d %Y", which formats the date.

There are many filters available including:

asset_url

  • Stylesheet Usage: {{ 'default.css' | asset_url | stylesheet_tag: 'screen' }}
  • Javascript Usage: {{ 'default.js' | asset_url | script_tag }}
  • Generates a link or script tag for a stylesheet or javascript Theme Asset.

img_tag

  • Usage: {{ 'http://.../logo.png' | img_tag }}
  • Generates an img tag.

script_tag

  • Usage: {{ 'http://.../jquery.js' | script_tag }}
  • Generates a script tag.

stylesheet_tag

  • Usage: {{ 'http://.../main.css' | stylesheet_tag }}
  • Generates a stylesheet tag.

link_to

  • Usage: {{ 'Google' | link_to: 'http://google.com' }}
  • Generates an a tag.

link_to_javascript

  • Usage: {{ 'Alert!' | link_to_javascript: "alert('Hello, World!');" }}
  • Generates an a tag to inline javascript.

link_to_category

  • Usage: {{ category | link_to_category }}
  • This is a shortcut to generate a link to a category page, from a category object. Note this uses {{ category.name }} and {{ category.url }} to generate a simple a tag.

link_to_download

  • Usage: {{ download | link_to_download }}
  • This is a shortcut to generate a link to a download, from a download object. Note this uses {{ download.name }} to generate a special a tag that opens the download overlay.

link_to_news_item

  • Usage: {{ item | link_to_news_item }}
  • This is a shortcut to generate a link to a news item page, from a news item object. Note this uses {{ news_item.title }} and {{ news_item.url }} to generate a simple a tag.

link_to_page

  • Usage: {{ page | link_to_page }}
  • This is a shortcut to generate a link to a page page, from a page object. Note this uses {{ page.title }} and {{ page.url }} to generate a simple a tag.

link_to_product

  • Usage: {{ product | link_to_product }}
  • This is a shortcut to generate a link to a product page, from a product object. Note this uses {{ product.name }} and {{ product.url }} to generate a simple a tag.

ordinalize

  • Usage: {{ 2 | ordinalize }}
  • Generates: 2nd

simple_format

  • Usage: {{ product.description | simple_format }}
  • Converts text broken up with line breaks into HTML paragraphs.

money

  • Usage: {{ 10 | money }}
  • Generates $10.00, in your Storefront's currency.

money_with_currency

  • Usage: {{ 10 | money_with_currency }}
  • Generates $10.00 USD, in your Storefront's currency.

money_without_currency

  • Usage: {{ 10 | money_without_currency }}
  • Generates 10.00, without any currency symbols or codes.

capitalize

  • Usage: {{ 'hello there' | capitalize }}
  • Generates: Hello There

downcase

  • Usage: {{ 'Hello There' | downcase }}
  • Generates: hello there

upcase

  • Usage: {{ 'Hello There' | upcase }}
  • Generates: HELLO THERE

first

  • Usage: {{ store.products | first }}

last

  • Usage: {{ category.products | last }}

join

  • Usage: {{ product.price_range | money | join: ' - ' }}
  • Generates: $10.00 - $15.00

size

  • Usage: {{ category.products.size }}
  • Generates: 15

API

Aside from filters, there are objects that can be used to access data in your Store. The objects are as follows:

store:

  • Available in all Theme Assets.

attributes:

collections:

  • categories - {% for category in store.categories %} … {% endfor %}
  • products - {% for product in store.products %} … {% endfor %}
  • pages - {% for page in store.pages %} … {% endfor %}
  • news - {% for item in store.news.items %} … {% endfor %}
  • history - {% for item in store.history.items %} … {% endfor %}
  • gallery - {% for item in store.gallery.items %} … {% endfor %}

category:

  • Available alone, on a single category page, in the category.html template.
  • Available within a for loop of store.categories.

attributes:

  • name - {{ category.name }} ex: Vinyl
  • slug - {{ category.slug }} ex: vinyl
  • url - {{ category.url }} ex: /categories/vinyl

collections:

  • products - {% for product in category.products %} … {% endfor %}

product:

  • Available alone, on a single product page, in the product.html template.
  • Available within a for loop of category.products.

attributes:

  • state - {{ product.state }} ex: available
  • name - {{ product.name }} ex: Silent Majority - Life of a Spectator
  • slug - {{ product.slug }} ex: 1-silent-majority-life-of-a-spectator
  • description - {{ product.description }} ex: This is a great record!
  • unlisted? - {% if product.unlisted? %}Unlisted{% endif %}
  • announced? - {% if product.announced? %}Announced{% endif %}
  • available? - {% if product.available? %}Available{% endif %}
  • unavailable? - {% if product.unavailable? %}Unavailable{% endif %}
  • url - {{ product.url }} ex: /products/1-silent-majority-life-of-a-spectator
  • price_range - {{ product.price_range | money | join: ' - ' }} ex: $5.00 - $10.00
  • soundcloud_playlist_id - {{ product.soundcloud_playlist_id }} ex: 0123456789
  • music_catalog_number - {{ product.music_catalog_number }} ex: EX-001
  • music_pressing_information - {{ product.music_pressing_information }} ex: 500 / White

collections:

  • images - {% for image in product.images %} … {% endfor %}
  • variations - {% for variation in product.variations %} … {% endfor %}
  • music_track_listings - {% for track in product.music_track_listings %} … {% endfor %}

image

  • Available within a for loop of product.images.

attributes:

  • url - Full Size
  • v075_url - Max. 75px x 75px
  • v150_url - Max. 150px x 150px
  • v200_url - Max. 200px x 200px
  • v300_url - Max. 300px x 300px
  • v600_url - Max. 600px x 600px

variation

  • Available within a for loop of product.variations.

attributes:

  • name
  • description
  • price
  • weight
  • requires_exact_payment
  • remaining_inventory
  • available?

track listing

  • Available within a for loop of product.music_track_listings.

attributes:

  • id3_track_number
  • id3_track_artist
  • id3_track_name

order

  • Available on a single order page, in the order.html template.

attributes:

  • key
  • paypal_pay_key
  • number
  • state
  • status
  • attempted?
  • transaction_id
  • pending_reason
  • customer - Customer object
  • shipping_address - Address object
  • item_count
  • digital - Digital only?
  • subtotal
  • shipping
  • total_price
  • total_weight

collections:

  • items - {% for item in order.items %} … {% endfor %}
  • downloads - {% for download in order.downloads %} … {% endfor %}

order item

  • Available within a for loop of order.items.

attributes:

  • name
  • digital - Digital only?
  • unit_price
  • unit_weight
  • quantity
  • total_price
  • total_weight

download

  • Available within a for loop of order.downloads.

attributes:

  • name

usage:

<ul>
  {% for download in order.downloads %}
    <li>{{ download | link_to_download }}</li>
  {% endfor %}
</ul>

customer

  • Available from an order, like order.customer.

attributes:

  • email
  • first_name
  • last_name

address

  • Available from an order, like order.shipping_address.

attributes:

  • first_name
  • last_name
  • street_address_1
  • street_address_2
  • city
  • state
  • postal_code
  • country

page

  • Available within a for loop of store.pages.

attributes:

  • title
  • path
  • url

news

Note: This requires the News Module.

  • Available from a store, like store.news.
  • Available on the news page, in the news.html template.

attributes:

  • title
  • path
  • url

collections:

  • items

news item

Note: This requires the News Module.

  • Available alone, on a single news item page, in the news-item.html template.
  • Available within a for loop of store.news.items.
  • Available within a for loop of news.items.

attributes:

  • title
  • slug
  • url
  • body
  • published_at

history

Note: This requires the History Module.

  • Available from a store, like store.history.
  • Available on the history page, in the history.html template.

attributes:

  • title
  • path
  • url

collections:

  • items

history item

Note: This requires the History Module.

  • Available within a for loop of store.history.items.
  • Available within a for loop of history.items.

attributes:

  • released_on
  • released_by
  • catalog_number
  • name
  • description
  • release_information - Array of released_on, released_by and catalog_number.

collections:

  • images
  • links

link

  • Available within a for loop of history items like item.links.

attributes:

  • name
  • url

gallery

Note: This requires the Gallery Module.

  • Available from a store, like store.gallery.
  • Available on the gallery page, in the gallery.html template.

attributes:

  • title
  • path
  • url

collections:

  • items

gallery item

Note: This requires the Gallery Module.

  • Available within a for loop of store.gallery.items.
  • Available within a for loop of gallery.items.

attributes:

  • url - Full Size
  • v075_url - Max. 75px x 75px
  • v150_url - Max. 150px x 150px
  • v200_url - Max. 200px x 200px
  • v300_url - Max. 300px x 300px
  • v600_url - Max. 600px x 600px

Tags

There are various tags available, including:

  • if
  • unless
  • for
  • paginate

An example using if and for tags:

{% if store.pages.size > 0 %}
  <h4>Info</h4>
  <ul>
    {% for page in store.pages %}
      <li>{{ page | link_to_page }}</li>
    {% endfor %}
  </ul>
{% endif %}

An example of pagination:

{% paginate store.products by 30 %}
  {% for product in store.products %}
    <div class="product">
      <a class="info" href="{{ product.url }}">
        {{ product.name }} - {{ product.price_range | money | join: ' - ' }}
      </a>
    </div>
  {% endfor %}

  {{ store.products_pagination }}
{% endpaginate %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment