How can we help?

Theme language

To generate dynamic HTML, Enstore uses the Django theme language. This language let's you implement simple logic for example to display product prices, loop through a list of product variations or capitalize a customer name. This keeps the internal logic to generate the page information separated from the design in the theme, allowing you to build designs that can adapt to different content.

Language introduction Back to top

Variables

Variables are placeholders for information that is inserted to the page by the server the moment a page is sent to a browser by the server. They can contain any info, for example the product name:

The name of this product is [[ product.name ]]. There are [[ cart.totalProducts ]] products in your cart.

If we run the above sample code with an iPhone 32GB and 9 items in the cart, the output will be:

The name of this product is iPhone 32GB. There are 9 products in your cart.

The information a theme can display is defined in a context. For example, a browse page contains a list of products based on the current selection. Every theme page in Enstore has a different context, based on what it needs to display.

Logic

Logic is what makes your themes "smart". It allows, a theme, for example to see if a product name is empty, loop through a list of products or count the number of menu items in a menu. theme logic is defined by tags (not to confuse with product labels) that look a bit like variables. Let's start with a simple example that displays the product title if it's available and "No Name Available" if not.

[% if product.name %]
    [[ product.name ]]
[% else %]
    No Name Available
[% endif %]

Next to conditions, tags also allow us to step through lists of items. The example below prints the name and price for a list of products.

[% for product in products %]
    The name is [[ product.name ]] and costs [[ product.price ]].
[% endfor %]

Example output with three products:

The name is iPod 40GB and costs 20.00.
The name is Zune 40GB and costs 30.00.
The name is Nomad 40GB and costs 40.00.

Theme Filters Back to top

Theme filters allow you to adjust variables in a certain way. Django has lots of built-in filters that you can use. Next to these, Enstore defines a list of custom filters listed below.

For instance, capfirst capitalizes the first letter of a word or sentence:

[[ value|capfirst ]]

If value is "enstore", the output will be "Enstore".

The Imagelink filter / Displaying product images

Images for products are added in Checkout. When you're looping through a list of products you can display their images by using the following code:

[% for image in product.images %]
        <img src="[[ image.url|imagelink ]]">
[% endfor %]

The imagelink filter determines the path for you, so you don't have to worry about linking to the right file. You can scale your images to make thumbnails, or just to make images fit in your design by adding the following code:

<img src="[[ product.images.0.url|imagelink ]]?width=100&height=100&crop=1">

You can either use crop=0 or crop=1. crop=0 which will resize the image to the specified dimensions, which could result in a distortion of the image. It's used when you want to proportionally resize an image without cutting anything off. crop=1 will scale down the largest side of the image to the specified dimensions and cut off the rest to fit the specified height and width. The webstore allows you to use images for products up to 800kb per image.

The images below shows the difference between crop=0 (left) and crop=1 (right):

Crop0 Crop1

The Assets Filter/Linking to files in the assets folder

Other images you might want to use, like banners and such, can be put in the assets folder. In this case you'll have to use the asset filter. Like so:

<img src="[[ "banner.gif"|asset ]]" >

The Textile filter

If you want to offer the people using your theme the possibility to markup their product descriptions and homepage intros using Textile you'll need to use the Textile filter. Basically the Textile filter tells the theme to interpret the value of the variable as Textile markup. More on Textile.

[[ product.description|textile ]]

Striptags filter

In some cases you don't want html tags in variables influencing your design. You can use the striptags filter to strip all HTML tags from text.

[[ product.description|textile|striptags ]]

Truncate Words filter

You can truncate variables to a certain number of words using this filter.

[[ product.description|truncatewords:"28" ]]

Using filters sequential

You can use multiple filters on one value. For instance, maybe you want to display a product description, interpret the textile characters, then strip away the HTML tags and lastly truncate the text to 28 words.

[[ product.description|textile|striptags|truncatewords:"28" ]]