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:

<section class="my-account"> <!-- Begin my account section -->
    <div class="container form-container">
        <div class="row content">
            <div class="col-lg-4"> <!-- Left column -->
                {#
                    Cratejoy renders the HTML that lists the subscriber's
                    subscriptions.
                    You can change the way it looks by editing the css,
                    there are examples in css/style.css.
                #}
                {{ customer_helper.show_subscription_info(vertical=True, btn_class="btn-primary") }}
            </div>
            <div class="col-lg-8"> <!-- Right column -->
                {#
                    Cratejoy renders the HTML for editing account,
                    shipping and payment information.
                    You can change the way it looks by editing the css,
                    there are examples in css/style.css.
                #}
                {{ customer_helper.show_basic_account_info(btn_class="btn-primary") }}
                {{ customer_helper.show_shipping_address_info(btn_class="btn-primary") }}
                {{ customer_helper.show_payment_info(btn_class="btn-primary") }}
            </div>
        </div>
    </div>
</section> <!-- End my account section -->

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:

<section class="my-account">
    <div class="container form-container">
        <div class="row content">
            <div class="col-lg-8 col-lg-offset-2">
                {{ customer_helper.edit_basic_account_info(btn_class="btn-primary") }}
                {{ customer_helper.edit_payment_info(btn_class="btn-primary") }}
                {{ customer_helper.edit_address_info(btn_class="btn-primary") }}
            </div>
        </div>
    </div>
</section>

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.

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.

Other Helpers

checkout.page()

Used in html/checkout.html

Builds the checkout page.

{% block page_content %}

<!--
The 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
-->

{{ checkout.page() }}

{% endblock %}

css.base()

Used in html/base.html

Includes all Cratejoy platform bundled CSS. Called in the element of base.html.

<!-- 
css.base() puts in the base CSS used to style the checkout page, 
my account page, receipt page, etc 
-->
{{ css.base() }}
{{ 'css/bootstrap.css' | asset_url | stylesheet_tag }}
{{ 'css/fontawesome.css' | asset_url | stylesheet_tag }}
{{ 'css/style.css' | asset_url | stylesheet_tag }}

js.base()

Used in html/base.html

Includes all Cratejoy platform bundled Javascript. Called at the end of the 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():

<!-- ga.base() sets up google analytics. -->
<!-- Configure the google analytics settings in the designer under Settings -->
{{ ga.base() }}
{{ js.base() }}