Collecting Additional Attendee Information

Hey Evey Users!

This guide will show you how to set up cart attributes in Shopify to collect additional attendee information for the Evey Shopify app. It will allow you to set up your checkout like the following:

 

Attendee Information using Cart Attributes
In general, to collect information about a specific attendee and ticket the format for the input name is:

attributes[attendee-{{ item.variant.id }}-{{ i }}-attrname]

Where attrname is the name of the attribute you want to collect, for example firstname, lastname, email. This can be collected for each ticket, so if quantity is 2 you can collect 2 sets of these attributes, for example:

{% for i in (1..item.quantity) %}
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-firstname]" placeholder="First Name" required style="display:inline-block;" />
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-lastname]" placeholder="Last Name" required style="display:inline-block;" />
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-email]" placeholder="Email" required style="display:inline-block;" />
{% endfor %}


This would normally be included in the cart.liquid file in the {% for item in cart.items %} block,
or the cart-template.liquid file found in "Sections" in the theme liquid code editor. 

The attribute names firstname, lastname, and email are special, when they’re used they replace the attendee ticket first name, last name, and email, respectively. Any other attributes will be added to the attendee as extra information.

Example: New Standard Theme

The screenshot at the beginning of this post is the result of adding these attributes to this theme. First we start by adding a more structured (and styled) version of the code we’ve already given inside the {% for item in cart.items %} block of the cart.liquid/cart-template.liquid file depending on the type of theme you have.

<tr class="cart-attributes">
<td colspan="100">
{% for i in (1..item.quantity) %}
<div class="col-attributes-row">
<span class="attribute-row-num">{{ i }}.</span>
<div class="col-attributes-inputs">
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-firstname]" placeholder="First Name" required style="display:inline-block;" />
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-lastname]" placeholder="Last Name" required style="display:inline-block;" />
<input type="text" name="attributes[attendee-{{ item.variant.id }}-{{ i }}-email]" placeholder="Email" required style="display:inline-block;" />
</div>
</div>
{% endfor %}
</td>
</tr>

Now to update some styles we need to add the following to the end of styles.css.liquid:

.cart-row { }
.cart-attributes { border-bottom: 1px solid {{ settings.primary_border }}; }
.col-attributes-row input { width:25%; }
.attribute-row-num { font-weight:bold; }
.col-attributes-inputs { display:inline-block;width:95%;text-align:center; }

You will now collect the first name, last name, and email on every cart page for each individual ticket that is being purchased.

Finally, you can expand this to provide more advanced functionality, such as more types of attributes or even a different set of attributes for different ticket types.

We hope this lets you collect all the information you need of the attendees for your event to be a success

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk