{"_id":"58112e73ded0340f0085d06a","user":"551e85707ca3030d00be0c07","parentDoc":null,"category":{"_id":"58112e72ded0340f0085d02c","project":"551e85be610f400d00837db7","__v":0,"version":"58112e71ded0340f0085d02a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-07T18:58:09.521Z","from_sync":false,"order":2,"slug":"theme-logic","title":"Theme Logic & Components"},"version":{"_id":"58112e71ded0340f0085d02a","project":"551e85be610f400d00837db7","__v":4,"createdAt":"2016-10-26T22:30:09.862Z","releaseDate":"2016-10-26T22:30:09.862Z","categories":["58112e72ded0340f0085d02b","58112e72ded0340f0085d02c","58112e72ded0340f0085d02d","58112e72ded0340f0085d02e","58112e72ded0340f0085d02f","58112e72ded0340f0085d030","58112e72ded0340f0085d031","58112e72ded0340f0085d032","58112e72ded0340f0085d033","58112e72ded0340f0085d034","581137cc604d3c230048b7e4","58dc367221742d0f00a73f98","590768e54669da0f00db5c0b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"new designer","version_clean":"2.0.0","version":"2.0"},"__v":0,"project":"551e85be610f400d00837db7","updates":["56f7ccfed31f6a0e003223c2"],"next":{"pages":[],"description":""},"createdAt":"2015-04-07T18:58:45.911Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Cratejoy supports a templating language called [jinja](http://jinja.pocoo.org/docs/dev/) to do this. You can read more about jinja on the [jinja documentation page.](http://jinja.pocoo.org/docs/dev/templates)\n\nThe major features used by the Cratejoy platform are well described in the following Jinja documentation:\n\n* [Iteration](http://jinja.pocoo.org/docs/dev/templates/#for) – looping over object sets\n* [Control Flow](http://jinja.pocoo.org/docs/dev/templates/#list-of-control-structures) – control the flow of a program\n* [Macros](http://jinja.pocoo.org/docs/dev/templates/#macros) – reusable functions to prevent code duplication\n* [Operators](http://jinja.pocoo.org/docs/dev/templates/#math) – math, comparisons, and logical operators\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"What is Jinja useful for?\"\n}\n[/block]\nJinja 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.\n\nFor instance, you can easily display your store name on your page like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1>\\n\\t{{ store.name }}\\n</h1>\",\n      \"language\": \"jinja2\",\n      \"name\": \"Store Name\"\n    }\n  ]\n}\n[/block]\n## Conditionals\n\nYou 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{% if guest %}\\n\\t<!-- If the customer is not logged in, show a login link -->\\n\\n\\t<li><a href=\\\"/customer/login\\\" class=\\\"btn btn-default btn-login\\\">Login</a></li>\\n\\n{% else %}\\n\\t<!-- If the customer is logged in, show them a link to their account page and a sign out link -->\\n\\t<li>\\n\\t\\t<ul class=\\\"nav navbar-right\\\">\\n\\t\\t\\t<li class=\\\"dropdown\\\">\\n\\t\\t\\t\\t<a href=\\\"#\\\" class=\\\"dropdown-toggle\\\" data-toggle=\\\"dropdown\\\">{{ customer.name }} <b class=\\\"caret\\\"></b></a>\\n\\t\\t\\t\\t<ul class=\\\"dropdown-menu\\\">\\n\\t\\t\\t\\t\\t<li><a href=\\\"/customer/account\\\">My Account</a></li>\\n\\t\\t\\t\\t\\t<li><a href=\\\"/customer/logout\\\">Sign Out</a></li>\\n\\t\\t\\t\\t</ul>\\n\\t\\t\\t</li>\\n\\t\\t</ul>\\n\\t</li>\\n{% endif %}\",\n      \"language\": \"jinja2\",\n      \"name\": \"Betterman Nav\"\n    }\n  ]\n}\n[/block]\n## Loops\n\nYou 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{% for product in store.visible_subscription_products %}\\n    <div class=\\\"item product\\\"> <!-- Begin product -->\\n        <div class=\\\"image-container\\\">\\n            {#\\n                Creates an image tag if one is uploaded to the product \\n                model. Otherwise it creates an image tag from\\n                the default image (images/product_placeholder.jpg\\n            #}\\n            {{ product | object_img_tag(\\n            \\t\\tdefault_img_path=\\\"images/product_placeholder.jpg\\\", \\n                \\tcss_class=\\\"\\\") }}\\n        </div>\\n\\n        <!-- Product Name -->\\n        <h4>{{ product.name | safe }}</h4>\\n\\n        <div class=\\\"price\\\">\\n            {#\\n                Creates a <p></p> containing either the actual price of \\n                the product or a price range\\n                (in the case that there are terms to be chosen)\\n            #}\\n            {{ product | get_price_or_price_range }}\\n        </div>\\n\\n        {#\\n            Creates a link which advances the subscribe flow to the next \\n            step, choosing the current product\\n        #}\\n        <a type=\\\"button\\\" href=\\\"{{ product | product_subscribe_url(\\n        \\tgift=gift) }}\\\" class=\\\"btn btn-primary\\\">Choose</a>\\n\\n        <div class=\\\"description-container\\\">\\n            <div class=\\\"description\\\">\\n                {#\\n                    Renders the product description if one exists, \\n                    otherwise uses the default string\\n                #}\\n                {{ product.description | default(\\n                \\t\\t\\\"Product description goes here.\\\", True) }}\\n            </div>\\n        </div>\\n    </div> <!-- End product -->\\n{% endfor %}\",\n      \"language\": \"jinja2\",\n      \"name\": \"Betterman product list\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"introduction-to-jinja","type":"basic","title":"Introduction to Theme Logic"}

Introduction to Theme Logic


Cratejoy supports a templating language called [jinja](http://jinja.pocoo.org/docs/dev/) to do this. You can read more about jinja on the [jinja documentation page.](http://jinja.pocoo.org/docs/dev/templates) The major features used by the Cratejoy platform are well described in the following Jinja documentation: * [Iteration](http://jinja.pocoo.org/docs/dev/templates/#for) – looping over object sets * [Control Flow](http://jinja.pocoo.org/docs/dev/templates/#list-of-control-structures) – control the flow of a program * [Macros](http://jinja.pocoo.org/docs/dev/templates/#macros) – reusable functions to prevent code duplication * [Operators](http://jinja.pocoo.org/docs/dev/templates/#math) – math, comparisons, and logical operators [block:api-header] { "type": "basic", "title": "What is Jinja useful for?" } [/block] 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: [block:code] { "codes": [ { "code": "<h1>\n\t{{ store.name }}\n</h1>", "language": "jinja2", "name": "Store Name" } ] } [/block] ## 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. [block:code] { "codes": [ { "code": "{% if guest %}\n\t<!-- If the customer is not logged in, show a login link -->\n\n\t<li><a href=\"/customer/login\" class=\"btn btn-default btn-login\">Login</a></li>\n\n{% else %}\n\t<!-- If the customer is logged in, show them a link to their account page and a sign out link -->\n\t<li>\n\t\t<ul class=\"nav navbar-right\">\n\t\t\t<li class=\"dropdown\">\n\t\t\t\t<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">{{ customer.name }} <b class=\"caret\"></b></a>\n\t\t\t\t<ul class=\"dropdown-menu\">\n\t\t\t\t\t<li><a href=\"/customer/account\">My Account</a></li>\n\t\t\t\t\t<li><a href=\"/customer/logout\">Sign Out</a></li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</ul>\n\t</li>\n{% endif %}", "language": "jinja2", "name": "Betterman Nav" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{% for product in store.visible_subscription_products %}\n <div class=\"item product\"> <!-- Begin product -->\n <div class=\"image-container\">\n {#\n Creates an image tag if one is uploaded to the product \n model. Otherwise it creates an image tag from\n the default image (images/product_placeholder.jpg\n #}\n {{ product | object_img_tag(\n \t\tdefault_img_path=\"images/product_placeholder.jpg\", \n \tcss_class=\"\") }}\n </div>\n\n <!-- Product Name -->\n <h4>{{ product.name | safe }}</h4>\n\n <div class=\"price\">\n {#\n Creates a <p></p> containing either the actual price of \n the product or a price range\n (in the case that there are terms to be chosen)\n #}\n {{ product | get_price_or_price_range }}\n </div>\n\n {#\n Creates a link which advances the subscribe flow to the next \n step, choosing the current product\n #}\n <a type=\"button\" href=\"{{ product | product_subscribe_url(\n \tgift=gift) }}\" class=\"btn btn-primary\">Choose</a>\n\n <div class=\"description-container\">\n <div class=\"description\">\n {#\n Renders the product description if one exists, \n otherwise uses the default string\n #}\n {{ product.description | default(\n \t\t\"Product description goes here.\", True) }}\n </div>\n </div>\n </div> <!-- End product -->\n{% endfor %}", "language": "jinja2", "name": "Betterman product list" } ] } [/block]