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
Next revision		Previous revision
v:2.0:checkout [2020/06/08 05:54] – [A checkbox example] adamv:2.0:checkout [2023/07/19 13:02] (current) – [A Dropdown Example] adam
Line 47: Line 47:
 <code html> <code html>
 <div class="fc-form-group "> <div class="fc-form-group ">
- <div class="col-md-8 col-md-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">+ <div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
  <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">  <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">  <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Line 61: Line 61:
  
 <div class="fc-form-group"> <div class="fc-form-group">
-    <div class="col-md-8 col-md-offset-3">+    <div class="col-sm-8 col-sm-offset-3">
         <div class="fc-input-group-container fc-input-group-container--textarea fc-input-group-container--active">         <div class="fc-input-group-container fc-input-group-container--textarea fc-input-group-container--active">
             <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">             <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Line 75: Line 75:
  
 This code will then be inserted in your checkout page, right under the "almost done" heading on the default checkout template (above the password entry, terms of service, and the main checkout button). Go ahead and load up your checkout to see what you just added. It should look something like this: This code will then be inserted in your checkout page, right under the "almost done" heading on the default checkout template (above the password entry, terms of service, and the main checkout button). Go ahead and load up your checkout to see what you just added. It should look something like this:
-{{ https://www.evernote.com/shard/s1/sh/1d29183a-c291-4284-9fc0-fdd72dc51a1a/ac39524686564fb6c5a43c60de7b1527/deep/0/Banners-and-Alerts-and-The-Man-Can!-Stuff-Secure-Checkout.png |Thanks to Corganics.com for beta testing 2.0. That's why they're on our screenshots :)}}+{{ https://i.ibb.co/5KLtPvy/foxycheckout.png |Thanks to Corganics.com for beta testing 2.0. That's why they're on our screenshots :)}}
  
 Note that the HTML we've entered here can be anything at all, but this example is using the same structure as the default template. That way it automatically gets the appropriate styling. Note that the HTML we've entered here can be anything at all, but this example is using the same structure as the default template. That way it automatically gets the appropriate styling.
Line 92: Line 92:
 {% set options = ["Social Media", "Advertising", "Online Search", "Word Of Mouth", "Other"] %} {% set options = ["Social Media", "Advertising", "Online Search", "Word Of Mouth", "Other"] %}
 <div class="fc-form-group "> <div class="fc-form-group ">
-    <div class="col-md-8 col-md-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">+    <div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
         <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">         <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">             <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
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>
Line 119: Line 147:
 <code html> <code html>
 <div class="fc-form-group"> <div class="fc-form-group">
-    <div class="col-md-8 col-md-offset-3 fc-checkout__additional-field--custom-checkbox">+    <div class="col-sm-8 col-sm-offset-3 fc-checkout__additional-field--custom-checkbox">
         <div class="fc-input-group-container fc-input-group-container--checkbox">         <div class="fc-input-group-container fc-input-group-container--checkbox">
             <label class="fc-input-group-container__title fc-form-label fc-form-label--custom-checkbox">             <label class="fc-input-group-container__title fc-form-label fc-form-label--custom-checkbox">
Line 133: Line 161:
         </div>         </div>
     </div>     </div>
 +</div>
 +</code>
 +
 +==== A Multilingual Example ====
 +
 +If your store is making use of [[..:template_sets|Template Sets]] to offer [[..:i18n|multilingual]] functionality on your store, you will also want to have your custom checkout fields show in the respective languages too. Here's a quick example of achieving that with the referral field from the first example above.
 +
 +You would obviously need to expand this to match the different languages you offer on your store, as selected in the template sets language dropdown. This example assumes that the default template set uses English, but there are also template sets using German and French.
 +
 +<code html>
 +{% set referral_label = "Referred by... (required)" %}
 +{% set referral_description = "Please let us know who referred you." %}
 +
 +{% if language == "german" %}
 + {% set referral_label = "Empfohlen von... (erforderlich)" %}
 + {% set referral_description = "Bitte teilen Sie uns mit, wer Sie empfohlen hat." %}
 +{% elseif language == "french" %}
 + {% set referral_label = "Référencé par... (obligatoire)" %}
 + {% set referral_description = "Veuillez nous indiquer qui vous a référé." %}
 +{% endif %}
 +
 +<div class="fc-form-group ">
 + <div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" 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">
 + {{ referral_label }}
 + </label>
 + <div class="fc-form-group">
 + <p>{{ referral_description }}</p>
 + <input type="text" id="referral_source" name="referral_source" placeholder="" autocomplete="off" class="fc-form-control" formnovalidate="" aria-required="true" value="{{ referral_source }}" data-fc-required>
 + </div>
 + </div>
 + </div>
 </div> </div>
 </code> </code>
Line 156: Line 217:
 <!-- 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.

Page Tools

Site Tools