Top

Creating Dropdown Menus as Custom Registration Fields

Overview

Currently (June 6th, 2016) our Memberships app only supports text and multi-line text inputs for custom registration fields such as size and color. While implementing these features is still underway, we do have a temporary work around available to theme developers.

In this tutorial you will learn how to use jQuery to further customize your registration fields to become dropdown fields (select tags). 

 

Step 1 (Start the Script)

Locate your development theme (Online Store -> Themes -> Your Theme to Edit) and navigate to the "Edit HTML/CSS" development panel for the theme.

On the left hand side find and open your page.liquid file within the "Templates" folder. At the bottom of this file add the following lines of code:

<!--Bold Membership Options-->
<script>

jQuery(window).load(function(){

//Registration Field Customization
setTimeout(function(){

}, 1000);

});

</script>
<!--End Membership Options-->

 

Step 2 (Choose a Plan and Field to Change)

Within the settings of the plan you are changing make sure there is a plan tag set and take note of this tag for the rest of this tutorial. For this tutorial I will use the tag "bronze" as an example. 

 

Just below the line of code "setTimeout(function(){" add the following code, and be sure to:

//script settings
var planTag = 'bronze';
var fieldNumber = 2;
var required = true;

  1. Add your unique planTag in place of the "bronze" example tag marked in bold.
  2. Replace the value of fieldNumber with the order of which your custom registration field was created. If Color Preference is my first custom field, it is represented by the fieldNumber of 1. In this case I want to change the second custom registration field I created, therefore I will use the fieldNumber of 2.
  3. Set required to either true or false based on whether or not you want the field to be mandatory in order to complete the registration.

 

Step 3 (Implement the Dropdown Menu)

Just below the code you added previously insert the following code and make no changes to it:

//create dropdown
var field = jQuery('#customFields_' + planTag).find('input').eq(fieldNumber - 1);
var field_id = field.attr('value_id');
field.replaceWith('<select id="field_' + field_id + '" value_id="' + field_id + '" name="n_' + field_id + '" class="answer' + (required == true?' required':'') + '"></select>');

 

Step 4 (Create Dropdown Options)

Just below the code you added previously for the dropdown, add the following code x number of times for x number of options you wish to add. If you have five options you will add in this code five times, each below the previous. 

//create dropdown option
jQuery('#field_' + field_id).append(jQuery('<option>', {

value: 'Silver',
text: 'I would like Silver!'

}));

For each option you create, modify the value and text appropriately. The text is simply what displays to your customer and the value is what is added to the registration properties.

 

Step 5 (Changing Multiple Fields) - Optional

If you have multiple fields you wish to change into dropdown menus you can follow the same format as the code below. This code (partially cut off) includes Step 5 in addition to all previous steps:

 

You're Finished! 

If you need further support feel free to contact our Support Wizards here and reference this article for assistance. 

Have a wonderful day! Great business wishes are sent!

Have more questions? Submit a request