Introduction to Theme Logic

Cratejoy supports a templating language called jinja to do this. You can read more about jinja on the jinja documentation page.

The major features used by the Cratejoy platform are well described in the following Jinja documentation:

Iteration – looping over object sets
Control Flow – control the flow of a program
Macros – reusable functions to prevent code duplication
Operators – math, comparisons, and logical operators

What is Jinja useful for?

Jinja is used to display any information about your store. So when looking at your storefront any time you see a product's name or price, or even your store's name - that is being selected by Jinja templates.

For instance, you can easily display your store name on your page like this:

<h1>
	{{ store.name }}
</h1>

Conditionals

You can use conditional logic to do more complex things. Here's how the Betterman theme changes the navigation to provide a Logout button when the user is already logged in.

{% if guest %}
	<!-- If the customer is not logged in, show a login link -->

	<li><a href="/customer/login" class="btn btn-default btn-login">Login</a></li>

{% else %}
	<!-- If the customer is logged in, show them a link to their account page and a sign out link -->
	<li>
		<ul class="nav navbar-right">
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ customer.name }} <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="/customer/account">My Account</a></li>
					<li><a href="/customer/logout">Sign Out</a></li>
				</ul>
			</li>
		</ul>
	</li>
{% endif %}

Loops

You can also loop through lists in Jinja. Here's how the Betterman theme loops over each of the products in the store and displays the subscription products:

{% for product in store.visible_subscription_products %}
    <div class="item product"> <!-- Begin product -->
        <div class="image-container">
            {#
                Creates an image tag if one is uploaded to the product 
                model. Otherwise it creates an image tag from
                the default image (images/product_placeholder.jpg
            #}
            {{ product | object_img_tag(
            		default_img_path="images/product_placeholder.jpg", 
                	css_class="") }}
        </div>

        <!-- Product Name -->
        <h4>{{ product.name | safe }}</h4>

        <div class="price">
            {#
                Creates a <p></p> containing either the actual price of 
                the product or a price range
                (in the case that there are terms to be chosen)
            #}
            {{ product | get_price_or_price_range }}
        </div>

        {#
            Creates a link which advances the subscribe flow to the next 
            step, choosing the current product
        #}
        <a type="button" href="{{ product | product_subscribe_url(
        	gift=gift) }}" class="btn btn-primary">Choose</a>

        <div class="description-container">
            <div class="description">
                {#
                    Renders the product description if one exists, 
                    otherwise uses the default string
                #}
                {{ product.description | default(
                		"Product description goes here.", True) }}
            </div>
        </div>
    </div> <!-- End product -->
{% endfor %}