Blog

Liquid Reference for Theme Developers

1 comment

The following article is intended for theme developers only. If you’re not familiar with HTML, CSS, and JavaScript, it might just look like gobbledygook.

As a theme developer, you need more than HTML, CSS, and JavaScript. You need access to campaign statistics (e.g. campaign goals vs amount actually raised), donation errors (e.g. invalid credit card), and receipt information (e.g. card expiration date). GiftFold gives you access to this data in the form of liquid objects.

Liquid is a template language developed and openly shared by the fine folks at Shopify. If you’re not already familiar with liquid, we suggest you check out Shopify’s article, Liquid Basics. If you’re already familiar with liquid, use the following reference to help you develop custom themes for GiftFold.

Theme Layout

Every theme layout (layouts/theme.liquid) requires the csrf and content_for_layout objects.

Liquid Reference for theme.liquid
Reference Liquid Code Required?
CSRF Meta Tags {% csrf %} X
Content for Layout {{ content_for_layout }} X
Page Title {% page_title %}
Hosted Assets {{ ‘filename.ext’ | asset_url }}

Form Template

Every form template (templates/form.liquid) requires the form object. Although not required, the errors object should also be used. For example,

{% if errors %}
{% for error in errors %}
<ul>
<li>{{ error }}</li>
<li>{% endfor %}</li>
</ul>
{% endif %}

In addition, the form (aka “campaign”) has its own attributes, such as name, description, goal, and total (i.e. amount raised so far).

Liquid Reference for form.liquid
Reference Liquid Code Required?
Form Tags {% form %}…{% endform %} X
Error Output {% errors %}
Campaign Name {{ form.name }}
Campaign Description {{ form.description }}
Campaign Goal {{ form.goal }}
Campaign Total {{ form.total }}

Receipt Template

Although receipt templates do not require any objects, receipts ought to confirm the donor’s input, and thus should include at least the following donation attributes: first_name, last_name, date, and amount.

Liquid Reference for receipt.liquid
Reference Liquid Code Required?
Campaign Name {{ donation.form.name }}
Campaign Description {{ donation.form.description }}
Campaign Goal {{ donation.form.goal }}
Campaign Total {{ donation.form.total }}
Donation Date {{ donation.date }}
Donation Amount {{ donation.amount }}
Card Type {{ donation.card_type }}
Card Expiration {{ donation.card_expires_on }}
Donor First Name {{ donation.first_name }}
Donor Last Name {{ donation.last_name }}
Donor Street Line 1 {{ donation.street_line1 }}
Donor Street Line 2 {{ donation.street_line2 }}
Donor City {{ donation.city }}
Donor State {{ donation.state }}
Donor Zip {{ donation.zip }}
Donor Country {{ donation.country }}
Donor Email {{ donation.email }}
Donor Phone {{ donation.phone }}
Recurring? {{ donation.recurring }}
Opted In? {{ donation.opted_in }}
Custom [Field] {{ donation.custom.[field] }}

 

JonLiquid Reference for Theme Developers

Related Posts

1 comment

Join the conversation

Leave a Reply

Your email address will not be published. Required fields are marked *