7.0 Computed Twig Example

This event is very similar to the Paid Event example, but instead of using Javascript to configure the Participant Fee, this example uses Computed Twig Elements.

In addition to asking for the standard, first name, last name and email address, we ask for the participant's date of birth. The Participant's age is calculated and then the Participation Fee is calculated, based on their age. The Participation fee is $99. If the participant is over age 65, their fee is $80.

This is done in the source code. The Participant Fee field type is changed to a Computed Twig Element. Next the Computed Twig Element is edited to add the logic.

These two elements (particant's age and participation fee) are Computed Elements and are resource heavy. If you have more than 2 computed elements, it is best to use Javascript.

View

This is what the form looks like

Build

Test

Form YAML

participant:
  '#type': wizard_page
  '#title': Participant
  civicrm_1_contact_1_fieldset_fieldset:
    '#type': fieldset
    '#title': 'Contact 1'
    '#form_key': civicrm_1_contact_1_fieldset_fieldset
    civicrm_1_contact_1_contact_first_name:
      '#type': textfield
      '#contact_type': individual
      '#form_key': civicrm_1_contact_1_contact_first_name
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': 'First Name'
    civicrm_1_contact_1_contact_last_name:
      '#type': textfield
      '#contact_type': individual
      '#form_key': civicrm_1_contact_1_contact_last_name
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': 'Last Name'
    civicrm_1_contact_1_email_email:
      '#type': email
      '#form_key': civicrm_1_contact_1_email_email
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': Email
    civicrm_1_contact_1_contact_birth_date:
      '#type': date
      '#title': 'Birth Date'
      '#datepicker': true
      '#extra':
        start_date: '-100 years'
        end_date: now
      '#contact_type': individual
      '#form_key': civicrm_1_contact_1_contact_birth_date
      '#parent': civicrm_1_contact_1_fieldset_fieldset
    age:
      '#type': computed_twig
      '#title': Age
      '#template': '{{ (''now''|date(''Y'')) - (data.civicrm_1_contact_1_contact_birth_date|date(''Y'')) }}'
      '#store': true
      '#ajax': true
    civicrm_1_participant_1_participant_event_id:
      '#type': civicrm_options
      '#title': Event(s)
      '#civicrm_live_options': 0
      '#options':
        4-6: Workshop
      '#format_items': ul
      '#format_items_html': ''
      '#format_items_text': ''
      '#extra':
        aslist: 0
        multiple: 1
      '#form_key': civicrm_1_participant_1_participant_event_id
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#default_option': false
      '#default_value': false
    civicrm_1_participant_1_participant_fee_amount:
      '#type': computed_twig
      '#title': 'Participant Fee'
      '#template': '{% if data.civicrm_1_participant_1_participant_event_id != 0 %}{% if data.age.__toString > 65 %}{{ 80 }}{% else %}{{ 99 }}{% endif %}{% else %}{{ 0 }}{% endif %}'
      '#store': true
      '#ajax': true
      '#form_key': civicrm_1_participant_1_participant_fee_amount
      '#parent': civicrm_1_contact_1_fieldset_fieldset
contribution_pagebreak:
  '#type': wizard_page
  '#form_key': contribution_pagebreak
  '#title': Payment
  civicrm_1_contribution_1_contribution_contribution_page_id:
    '#type': hidden
    '#expose_list': true
    '#empty_option': None
    '#extra':
      hidden_type: hidden
    '#parent': contribution_pagebreak
    '#form_key': civicrm_1_contribution_1_contribution_contribution_page_id
    '#value': '2'
    '#title': 'Contribution Page'