Documentation You are here: start » v » 2.0 » checkout

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
v:2.0:checkout [2021/05/12 13:33] – [Maintaining custom field values] adamv:2.0:checkout [2023/07/19 13:02] (current) – [A Dropdown Example] adam
Line 105: Line 105:
                         {% 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>

Page Tools

Site Tools