Support
API Reference

Filters

Filters are basic methods for modifying strings, numbers, variables, and objects. Using a filter is as simple as adding | filter_name after whatever you want to filter

<!-- product.name = "great subscription box" -->
{{ product.name | title }}

Output:

Great Subscription Box

The title filter is a Jinja built-in filter

Themes have access to all the Jinja2 built-in filters, plus some Cratejoy defined filters, described below.

FORMATTING

currency

The currency filter formats a currency according to your store’s configured currency. It defaults to 2 decimal places, but you can also specify different values.

<!-- price = 500 -->
{{ price | currency }}
{{ price | currency(0) }}

Output:

$5.00
$5

tojson

We also expose a tojson filter, which converts an object into JSON. If used inside a script tag, disable escaping with jinja2’s ‘safe’ filter.

<!-- store.name = "My Store"  -->  
<script type="text/javascript">
    runExampleCode({{ store.name | tojson | safe }});
</script>

Output:

<script type="text/javascript">
    runExampleCode("My Store");
</script>

TAGS

Tag filters create HTML tags from Jinja variables.

img_tag

Creates an <img> tag from a URL

{{ 'images/man_with_hat.jpg' | asset_url | img_tag("A dapper gentleman wearing a top hat", "thumbnail") }}
{{ 'images/man_with_hat.jpg' | asset_url | img_tag }}

Output:

<img src="//cdn.cratejoy.com/storename/designname/images/man_with_hat.jpg" alt="A dapper gentleman wearing a top hat" class="thumbnail" />
<img src="//cdn.cratejoy.com/storename/designname/images/man_with_hat.jpg" />

icon_tag

Creates an icon <link> from a URL

{{ 'images/favicon.ico' | asset_url | icon_tag }}

Output:

<link href="//cdn.cratejoy.com/storename/designname/images/favicon.ico" rel="icon" type="image/x-icon">

stylesheet_tag

Creates a stylesheet <link> from a URL

{{ 'css/style.css' | asset_url | stylesheet_tag }}

Output:

<link rel="stylesheet" href="//cdn.cratejoy.com/storename/designname/css/style.css" type="text/css" />

javascript_tag

Creates a javascript <script> tag from a URL

{{ 'js/store.js' | asset_url | javascript_tag }}

Output:

<script type="text/javascript" src="//cdn.cratejoy.com/storename/designname/js/store.js"></script>

URL

URL filters help create URLs to files in your store's themes. It is important to use URL filters or you may be referencing your files in a way which bypasses our content distribution network and slows down your storefront's loading for customers.

asset_url

Returns a URL from a file asset which is part of a design

<a href="{{ 'images/big.jpg' | asset_url }}">Big Image</a>

Output:

<a href="//cdn.cratejoy.com/storename/designname/images/big.jpg">Big Image</a>

global_asset_url

Returns a URL from a file asset which is part of the Cratejoy provided platform

{{ 'css/store.css' | global_asset_url | stylesheet_tag }}

Output:

<link rel="stylesheet" href="//cdn.cratejoy.com/css/store.css" type="text/css" />

product

Return a product object for a given product id.

{% set product = 12345678 | get_product %}
{{ product.name }}

Output:

My Little Box

product_subscribe_url

Returns the URL that corresponds to a product subscription choice, for example a variant or a term

<a class="btn btn-default" href="{{ product | product_subscribe_url(chosen_values,"large-box") }}">Select Large Box</a>

Output:

<a class="btn btn-default" href="//teststore.cratejoy.com/subscribe/1111_My+Box/1111_large-box">Select Large Box</a>

product_ecom_url

Returns the URL that corresponds to an e-commerce product

<a href="{{ product | product_ecom_url }}">{{ product.name | safe}}</a>

Output:

<a href="//teststore.cratejoy.com/shop/product/1111_Dapper+Hat">Dapper Hat</a>

cratejoy_domain

Returns a store’s cratejoy domain

<a href="https://{{ store | cratejoy_domain }}/subscribe/">Subscribe Now!</a>

Output:

<a href="https://teststore.cratejoy.com/subscribe/">Subscribe Now!</a>

custom_domain

Returns a store’s custom domain

<a href="https://{{ store | custom_domain }}/subscribe/">Subscribe Now!</a>

Output:

<a href="https://teststore.com/subscribe/">Subscribe Now!</a>

UTILITY

These filters are time saver functions.

get_price_or_price_range

Returns a price or min-max price range for a product and optional variants. Since products can have a range of prices based on variant choices and term options, this method is a convenient way of seamlessly handling a single price or price range without any template side logic.

<span class="price">{{ product | get_price_or_price_range }}</span>

Output:

If the product has multiple pre-payment terms it may return a range like this:

<span class="price"><p>$10-$25</p></span>

If the product has just a single pre-payment term (such as month to month) it would return a single price:

<span class="price"><p>$25</p></span>

Variant values may also be specified

<!-- value is the variant value we're getting the price for -->
<span class="price">{{ product | get_price_or_price_range(value.variant_type, values = chosen_values + [value]) }}</span>

SubscriptionTypeTerms may also be specified

{{ product | get_price_or_price_range(term = selected_term ) }}

Both Variant values and SubscriptionTypeTerms can be provide to give the highest specific price or price range.

If you would like the prices as plain numbers, in cents, you can specify rawand manipulate the output to your liking

{% set prices = product | get_price_or_price_range(raw=True) %}
{% if prices.min == prices.max %}
 {{ prices.min | currency }}
{% else %}
 {{ (prices.max/6) | currency }} - {{ prices.min | currency }} / month
{% endif %}

append_kvp

Returns a URL with a Key-Value pair appended to it. Used to select variants in subscribe flow

<!-- base_url = "http://teststore.cratejoy.com/subscribe/" -->
<a href="{{ base_url | append_kvp('box-size', 'small') }}">Select Small Box</a>

Output:

<a href="http://teststore.cratejoy.com/subscribe/box-size_small">Select Small Box</a>

category

Returns products matching passed in taxonomies.

<!--
store.ecom_products contains
name - taxonomies
"Bird Necklacke" - ['birds']
"Pith Helmet" - ['helmets']
"Snow Shoes" - ['shoes', 'snow']
"Hawk Headdress" - ['helmets', 'birds']
-->
{% for p in store.ecom_products | category('birds', 'helmets') %}
    {{ p.name }}
{% endfor %}

Output:

Bird Necklace
Pith Helmet
Hawk Headdress

meta_value

Returns the meta field value for the passed in key

<!-- If your subscription had a meta field key value pair {"flavor_preference": "Savory"}-->
Your Flavor Preference: {{ subscription | meta_value("flavor_preference") }}

Output:

Your Flavor Preference: Savory

get_meta_dict

Returns a dictionary of all meta fields attached to the filtered object

<!-- If your subscription had a meta field key value pair {"flavor_preference": "Savory", "send_day":"Friday"}-->
{% set meta = subscription|get_meta_dict %}
Your Flavor Preference: {{ meta.flavor_preference }}
Your Send Day: {{ meta.send_day }}

Output:

Your Flavor Preference: Savory
Your Send Day: Friday

is_sold_out

Returns a boolean for an individual product's sold_out status. Returns False if the product is available and True if the product is sold_out.

{% if product | is_sold_out %}
	<a type="button" class="disabled btn btn-large btn-primary">
		SOLD OUT
	</a>
{% else %}
	<a type="button" class="btn btn-large btn-primary">
		NOT SOLD OUT
	</a>
{% endif %}

Output:

If the product is sold out:

<a type="button" class="disabled btn btn-large btn-primary">
    SOLD OUT
</a>

If the product is available:

<a type="button" "class="btn btn-large btn-primary">
    NOT SOLD OUT
</a>