{"_id":"58112e72ded0340f0085d04a","user":"551e85707ca3030d00be0c07","parentDoc":null,"__v":0,"project":"551e85be610f400d00837db7","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"},"category":{"_id":"58112e72ded0340f0085d02b","version":"58112e71ded0340f0085d02a","__v":0,"project":"551e85be610f400d00837db7","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-03T12:21:19.234Z","from_sync":false,"order":1,"slug":"overview","title":"Themes Overview"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-08T02:38:11.315Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"These are macros which are defined by the Cratejoy platform and are necessary to build specific pages in your theme.\n\n# Customer Helpers\n\nThese helpers are used in your theme to instruct Cratejoy to build certain subscriber-facing forms such as their active subscription listing or current billing address.\n\n## customer_helper.show_subscription_info()\n\nUsed in ``html/customer/account.html``\n\nBuilds a table with subscription information, such as Product name, Variants, Terms, Price, etc, provided they have 1 or more subscriptions.\n\n\n## customer_helper.show_basic_account_info()\n\nUsed in ``html/customer/account.html``\n\nBuilds a table with subscriber account settings information, such as subscriber name and email. Includes a link to edit subscriber account settings information.\n\n## customer_helper.show_shipping_address_info()\n\nUsed in ``html/customer/account.html``\n\nBuilds a table with subscriber shipping address information. Includes a link to edit subscriber shipping address information.\n\n## customer_helper.show_payment_info()\n\nUsed in ``html/customer/account.html``\n\nBuilds a table with subscriber payment information. Includes a link to edit subscriber payment information.\n\nThe above show_subscription_info, show_basic_account_info, show_shipping_address_info, and show_payment_info helpers are combined in ``html/customer/account.html`` in the following example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<section class=\\\"my-account\\\"> <!-- Begin my account section -->\\n    <div class=\\\"container form-container\\\">\\n        <div class=\\\"row content\\\">\\n            <div class=\\\"col-lg-4\\\"> <!-- Left column -->\\n                {#\\n                    Cratejoy renders the HTML that lists the subscriber's\\n                    subscriptions.\\n                    You can change the way it looks by editing the css,\\n                    there are examples in css/style.css.\\n                #}\\n                {{ customer_helper.show_subscription_info(vertical=True, btn_class=\\\"btn-primary\\\") }}\\n            </div>\\n            <div class=\\\"col-lg-8\\\"> <!-- Right column -->\\n                {#\\n                    Cratejoy renders the HTML for editing account,\\n                    shipping and payment information.\\n                    You can change the way it looks by editing the css,\\n                    there are examples in css/style.css.\\n                #}\\n                {{ customer_helper.show_basic_account_info(btn_class=\\\"btn-primary\\\") }}\\n                {{ customer_helper.show_shipping_address_info(btn_class=\\\"btn-primary\\\") }}\\n                {{ customer_helper.show_payment_info(btn_class=\\\"btn-primary\\\") }}\\n            </div>\\n        </div>\\n    </div>\\n</section> <!-- End my account section -->\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n## customer_helper.edit_basic_account_info()\n\nUsed in ``html/customer/edit.html``\n\nBuilds a form to edit subscriber account settings information.\n\n## customer_helper.edit_shipping_address_info()\n\nUsed in ``html/customer/edit.html``\n\nBuilds a form to edit subscriber shipping address information.\n\n## customer_helper.edit_payment_info()\n\nUsed in ``html/customer/edit.html``\n\nBuilds a form to edit subscriber payment information.\n\nThe above edit_basic_account_info, edit_shipping_address_info and edit_payment_info helpers combine in ``html/customer/edit.html`` to create the forms that a subscriber uses to update their account information:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<section class=\\\"my-account\\\">\\n    <div class=\\\"container form-container\\\">\\n        <div class=\\\"row content\\\">\\n            <div class=\\\"col-lg-8 col-lg-offset-2\\\">\\n                {{ customer_helper.edit_basic_account_info(btn_class=\\\"btn-primary\\\") }}\\n                {{ customer_helper.edit_payment_info(btn_class=\\\"btn-primary\\\") }}\\n                {{ customer_helper.edit_address_info(btn_class=\\\"btn-primary\\\") }}\\n            </div>\\n        </div>\\n    </div>\\n</section>\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n# Setting Helpers\n\n## setting_helpers.image_tag('setting_id', class_name='my-class')\n\nUsed on any page to get an image tag for an image setting in the designer. Only supported on version 4+ themes. [Learn more about theme settings](doc:settings).\n\n# Component Helpers\n\n## compnent_helpers.render_components('my_list')\n\nUsed on any page to render a list of components. Only supported on version 4+ themes. [Learn more about theme components](doc:components).\n\n# Other Helpers\n\n## checkout.page()\n\nUsed in ``html/checkout.html``\n\nBuilds the checkout page.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{% block page_content %}\\n\\n<!--\\nThe HTML for the checkout page is rendered automatically by Cratejoy and cannot be modified. You can change the way it looks by editing the css though. There are examples of this in css/style.css\\n-->\\n\\n{{ checkout.page() }}\\n\\n{% endblock %}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n\n## css.base()\n\nUsed in ``html/base.html``\n\nIncludes all Cratejoy platform bundled CSS. Called in the <head> element of base.html.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- \\ncss.base() puts in the base CSS used to style the checkout page, \\nmy account page, receipt page, etc \\n-->\\n{{ css.base() }}\\n{{ 'css/bootstrap.css' | asset_url | stylesheet_tag }}\\n{{ 'css/fontawesome.css' | asset_url | stylesheet_tag }}\\n{{ 'css/style.css' | asset_url | stylesheet_tag }}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n## js.base()\n\nUsed in ``html/base.html``\n\nIncludes all Cratejoy platform bundled Javascript. Called at the end of the <body> element of base.html. Do not remove this macro call! It injects the necessary scripts for many aspects of the site, including checkout (checking shipping and tax info), editing subscriptions, and more.\n\n## ga.base()\n\nUsed in ``html/base.html``\n\nIncludes the Cratejoy support for google analytics.\n\nCombined example for ``js.base()`` and ``ga.base()``:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- ga.base() sets up google analytics. -->\\n<!-- Configure the google analytics settings in the designer under Settings -->\\n{{ ga.base() }}\\n{{ js.base() }}\\n\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]","excerpt":"Helper macros are defined by the Cratejoy platform","slug":"theme-files","type":"basic","title":"Theme Helpers"}

Theme Helpers

Helper macros are defined by the Cratejoy platform

These are macros which are defined by the Cratejoy platform and are necessary to build specific pages in your theme. # Customer Helpers These helpers are used in your theme to instruct Cratejoy to build certain subscriber-facing forms such as their active subscription listing or current billing address. ## customer_helper.show_subscription_info() Used in ``html/customer/account.html`` Builds a table with subscription information, such as Product name, Variants, Terms, Price, etc, provided they have 1 or more subscriptions. ## customer_helper.show_basic_account_info() Used in ``html/customer/account.html`` Builds a table with subscriber account settings information, such as subscriber name and email. Includes a link to edit subscriber account settings information. ## customer_helper.show_shipping_address_info() Used in ``html/customer/account.html`` Builds a table with subscriber shipping address information. Includes a link to edit subscriber shipping address information. ## customer_helper.show_payment_info() Used in ``html/customer/account.html`` Builds a table with subscriber payment information. Includes a link to edit subscriber payment information. The above show_subscription_info, show_basic_account_info, show_shipping_address_info, and show_payment_info helpers are combined in ``html/customer/account.html`` in the following example: [block:code] { "codes": [ { "code": "<section class=\"my-account\"> <!-- Begin my account section -->\n <div class=\"container form-container\">\n <div class=\"row content\">\n <div class=\"col-lg-4\"> <!-- Left column -->\n {#\n Cratejoy renders the HTML that lists the subscriber's\n subscriptions.\n You can change the way it looks by editing the css,\n there are examples in css/style.css.\n #}\n {{ customer_helper.show_subscription_info(vertical=True, btn_class=\"btn-primary\") }}\n </div>\n <div class=\"col-lg-8\"> <!-- Right column -->\n {#\n Cratejoy renders the HTML for editing account,\n shipping and payment information.\n You can change the way it looks by editing the css,\n there are examples in css/style.css.\n #}\n {{ customer_helper.show_basic_account_info(btn_class=\"btn-primary\") }}\n {{ customer_helper.show_shipping_address_info(btn_class=\"btn-primary\") }}\n {{ customer_helper.show_payment_info(btn_class=\"btn-primary\") }}\n </div>\n </div>\n </div>\n</section> <!-- End my account section -->", "language": "jinja2" } ] } [/block] ## customer_helper.edit_basic_account_info() Used in ``html/customer/edit.html`` Builds a form to edit subscriber account settings information. ## customer_helper.edit_shipping_address_info() Used in ``html/customer/edit.html`` Builds a form to edit subscriber shipping address information. ## customer_helper.edit_payment_info() Used in ``html/customer/edit.html`` Builds a form to edit subscriber payment information. The above edit_basic_account_info, edit_shipping_address_info and edit_payment_info helpers combine in ``html/customer/edit.html`` to create the forms that a subscriber uses to update their account information: [block:code] { "codes": [ { "code": "<section class=\"my-account\">\n <div class=\"container form-container\">\n <div class=\"row content\">\n <div class=\"col-lg-8 col-lg-offset-2\">\n {{ customer_helper.edit_basic_account_info(btn_class=\"btn-primary\") }}\n {{ customer_helper.edit_payment_info(btn_class=\"btn-primary\") }}\n {{ customer_helper.edit_address_info(btn_class=\"btn-primary\") }}\n </div>\n </div>\n </div>\n</section>", "language": "jinja2" } ] } [/block] # Setting Helpers ## setting_helpers.image_tag('setting_id', class_name='my-class') Used on any page to get an image tag for an image setting in the designer. Only supported on version 4+ themes. [Learn more about theme settings](doc:settings). # Component Helpers ## compnent_helpers.render_components('my_list') Used on any page to render a list of components. Only supported on version 4+ themes. [Learn more about theme components](doc:components). # Other Helpers ## checkout.page() Used in ``html/checkout.html`` Builds the checkout page. [block:code] { "codes": [ { "code": "{% block page_content %}\n\n<!--\nThe HTML for the checkout page is rendered automatically by Cratejoy and cannot be modified. You can change the way it looks by editing the css though. There are examples of this in css/style.css\n-->\n\n{{ checkout.page() }}\n\n{% endblock %}", "language": "jinja2" } ] } [/block] ## css.base() Used in ``html/base.html`` Includes all Cratejoy platform bundled CSS. Called in the <head> element of base.html. [block:code] { "codes": [ { "code": "<!-- \ncss.base() puts in the base CSS used to style the checkout page, \nmy account page, receipt page, etc \n-->\n{{ css.base() }}\n{{ 'css/bootstrap.css' | asset_url | stylesheet_tag }}\n{{ 'css/fontawesome.css' | asset_url | stylesheet_tag }}\n{{ 'css/style.css' | asset_url | stylesheet_tag }}", "language": "jinja2" } ] } [/block] ## js.base() Used in ``html/base.html`` Includes all Cratejoy platform bundled Javascript. Called at the end of the <body> element of base.html. Do not remove this macro call! It injects the necessary scripts for many aspects of the site, including checkout (checking shipping and tax info), editing subscriptions, and more. ## ga.base() Used in ``html/base.html`` Includes the Cratejoy support for google analytics. Combined example for ``js.base()`` and ``ga.base()``: [block:code] { "codes": [ { "code": "<!-- ga.base() sets up google analytics. -->\n<!-- Configure the google analytics settings in the designer under Settings -->\n{{ ga.base() }}\n{{ js.base() }}\n", "language": "jinja2" } ] } [/block]