V 2.0 Custom Checkout Fields

CliffSCliffS Member
I'm sure this is easy, it's probably even covered in the documentation.
But, as usual, I'm lost in the documentation, and cannot find an example to guide me.

I'm upgrading from Foxycart V1.1 to 2.0

My old checkout template had custom fields that looked like this:
<div>
Number of dimensions in your universe: <input type="text" name="Number_of_Dimensions"size="5" value="3"><br>
</div>

<div class="form_field">
<select name="Home_or_Business"
id="Home_or_Business"
onchange="">
<option value='Home' >Deliver to house, residence, apartment, hacienda, cottage, hovel, or wigwam</option><option value='Business' >Deliver to office, college, business, company, embassy, jail, or pickle factory</option> </select>
</div>


??? How do I add this functionality into the V2.0 checkout template ???

MANY THANKS!
Comments
  • CliffSCliffS Member
    Hmmm ... I am studying the document "The Most Efficient One-Page Checkout Available" which says:

    "simply use the “Add custom form fields to your checkout” template config option"

    Progress, though that word "Simply" warns me that it ain't simple...

  • CliffSCliffS Member
    Making progress!

    Starting to understand the template configuration settings on the admin.foxycart.com/admin page, under menu TEMPLATES > configuration
  • AdeelAdeel Member
    Hi @Cliffs,

    Did you get a chance to read this page ? https://wiki.foxycart.com/v/2.0/checkout#adding_custom_checkout_fields

    You would want to add custom field code in admin->configuration. Check " Add custom form fields to your checkout" option under checkout and paste your html their.

    For text input field html will look something like:

    <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">
    Referred by… (required)
    </label>
    <div class="fc-form-group">
    <p>Please let us know who referred you.</p>
    <input type="text" id="referral_source" name="referral_source" placeholder="" autocomplete="off" class="fc-form-control" formnovalidate="" autofocus="" aria-required="true" value="{{ referral_source }}" data-fc-required>
    </div>
    </div>
    </div>
    </div>
  • CliffSCliffS Member
    YIPPEE! Got it!

    Here's my cheatsheet (I'm posting here, so I don't have to re-learn this next year)

    In Foxycart V2.0, to include your own special custom fields, do this:

    1) The special, super-powerful, secret-agent menu item is on the Foxycart Admin page.
    Look for "configuration" on the big maroon banner under the TEMPLATES column.

    2) That configuration menu has lots of wonderful goodies, like how to configure Google Analytics, how to blacklist countries, and how to create your own customized form fields

    3) After clicking on the configuration menu, scroll down most of the way to "Add custom from fields to your checkout". Check the checkbox, and go into the custom checkout fields edit box, and enter standard html.

    4) For example, to let your customer enter her age, with a default of 21, enter code that looks like this:

    <div class="fc-form-field">
    My age is: <input type="text" name="Customer_Age"size="5" value="21"><br>
    </div>


    5) For text field from your customer, like a sentiment for a gift, enter something like this:

    <div class="fc-form-group ">
    <div class="col-sm-8 col-sm-offset-3">
    <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">
    If a gift, sentiment or message to write on packing slip:
    </label>
    <div class="fc-form-group">
    <textarea name="Gift_Sentiment" id="Gift_Sentiment" aria-required="false" autocomplete="off" class="fc-form-control" placeholder="?" style="background:#fff; height:5em;">{{ Gift_Sentiment}}</textarea>
    </div>
    </div>
    </div>
    </div>



    6) When you're finished, click on the green update button at the bottom of the screen.
  • brettbrett FoxyCart Team
    @cliffs, glad you got it, and thanks for sharing :)
  • Thanks very much CliffS. Brett it would have been helpful to have this information in the Docs
  • fc_adamfc_adam FoxyCart Team
    edited June 27
    @simonclay - I'm glad this thread was helpful for you! We do have some details on our wiki for adding custom checkout fields in a 2.0 store here if you need some more details: https://wiki.foxycart.com/v/2.0/checkout#adding_custom_checkout_fields
Sign In or Register to comment.