| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| v:2.0:checkout [2020/11/19 20:52] – [An Example] kauress | v:2.0:checkout [2023/07/19 13:02] (current) – [A Dropdown Example] adam |
|---|
| {% endfor %} | {% endfor %} |
| </select> | </select> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </code> |
| | |
| | ==== A Radio Inputs Example ==== |
| | This example uses a similar approach as above, using a line of twig code at the top to set the values of the radio buttons as an array: |
| | <code>{% set options = {"Monday": "Monday - First Delivery", "Wednesday": "Wednesday - Second Delivery", "Friday": "Friday - Third Delivery"} %}</code> |
| | |
| | This array sets out what options are present in the radio inputs - setting both the value for the input ("Monday") and the label shown to the customer ("Monday - First Delivery") - so can be edited to add or remove options as required. |
| | |
| | <code html> |
| | {% set options = {"Monday": "Monday - First Delivery", "Wednesday": "Wednesday - Second Delivery", "Friday": "Friday - Third Delivery"} %} |
| | <div class="fc-form-group "> |
| | <div class="col-sm-8 col-sm-offset-3" data-fc-error-for="{% for option in options %}Delivery_{{ loop.index }} {% endfor %}" data-fc-error-class="fc-alert-container--error"> |
| | <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active"> |
| | <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label"> |
| | Delivery Day (required) |
| | </label> |
| | <div class="fc-form-group"> |
| | <p>What day would you like to receive your delivery?</p> |
| | {% for option, label in options %} |
| | <div class="fc-input-group-container--radio"> |
| | <label class="fc-form-label" for="Delivery_{{ loop.index }}"><input class="fc-form-control" type="radio" name="Delivery" value="{{ option }}" id="Delivery_{{ loop.index }}" {% if Delivery == option %}checked{% endif %} aria-required="true" data-fc-required /> |
| | {{ label }}</label> |
| | </div> |
| | {% endfor %} |
| </div> | </div> |
| </div> | </div> |
| <!-- Radio --> | <!-- Radio --> |
| <input type="radio" name="Delivery" value="Monday" {% if Delivery == "Monday" %}checked{% endif %} /> | <input type="radio" name="Delivery" value="Monday" {% if Delivery == "Monday" %}checked{% endif %} /> |
| <input type="radio" name="Delivery" value="Tuesday" {% if Delivery == "Tuesday" %}checked{% endif %} /></code> | <input type="radio" name="Delivery" value="Tuesday" {% if Delivery == "Tuesday" %}checked{% endif %} /> |
| | |
| | <!-- Select Dropdown --> |
| | {% set options = ["Social Media", "Advertising", "Online Search", "Word Of Mouth", "Other"] %} |
| | <select name="referral_source" id="referral_source" class="fc-form-control" aria-required="true" data-fc-required> |
| | <option value="">Please select</option> |
| | {% for option in options %} |
| | <option value="{{ option }}" {% if referral_source == option %}selected{% endif %}>{{ option }}</option> |
| | {% endfor %} |
| | </select> |
| | </code> |
| |
| **If your field name includes accented characters, or if you're setting it up as a hidden field (one prepended with ''h:'')**, then you'll need to access it in a slightly different way using Twig's global ''_context'' object. This is because the colon or accented characters in the field name changes how it needs to be referenced, as a string rather than an object. If you had a field with a ''name'' of ''h:hidden_field'', you would access it as ''_context['h:hidden_field']'' in Twig. | **If your field name includes accented characters, or if you're setting it up as a hidden field (one prepended with ''h:'')**, then you'll need to access it in a slightly different way using Twig's global ''_context'' object. This is because the colon or accented characters in the field name changes how it needs to be referenced, as a string rather than an object. If you had a field with a ''name'' of ''h:hidden_field'', you would access it as ''_context['h:hidden_field']'' in Twig. |
