Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active June 21, 2021 20:44
Show Gist options
  • Save carolineschnapp/8746156 to your computer and use it in GitHub Desktop.
Save carolineschnapp/8746156 to your computer and use it in GitHub Desktop.
Asking a customer “how did you hear about us” on the cart page in Shopify
{% assign choices = "Facebook, Twitter, Google, Best Toys Bulletin, John Doe" %}
{% assign required = true %}
<div class="form-vertical">
<p>
<label for="how-did-you-hear-about-us">How did you hear about us?</label>
<select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
<option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
{% assign optionsArray = choices | split: ',' %}
{% for o in optionsArray %}
{% assign option = o | strip %}
<option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
{% endfor %}
<option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
</select>
</p>
<p style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none;{% endunless %}">
<label for="how-did-you-hear-about-us-other">Other:</label>
<input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}" />
</p>
</div>
<script>
jQuery(function($) {
$('#how-did-you-hear-about-us').change(function() {
if ($('#how-did-you-hear-about-us').val() == 'Other') {
$('#how-did-you-hear-about-us-other').parent('p').show();
} else {
$('#how-did-you-hear-about-us-other').val('').parent('p').hide();
}
});
{% if required %}
$('[name="checkout"], [name="goto_pp"], [name="goto_gc"]').click(function() {
var validated = true;
if ($('#how-did-you-hear-about-us').val() == '') {
validated = false;
}
else if ($('#how-did-you-hear-about-us').val() == 'Other') {
if ($('#how-did-you-hear-about-us-other').val() == '') {
validated = false;
$('#how-did-you-hear-about-us-other').addClass('error');
}
}
if(validated){
$(this).submit();
}
else{
alert("Please tell us how you heard about us.");
return false;
}
});
{% endif %}
});
</script>
@Sarahatt
Copy link

Sarahatt commented Jun 14, 2016

Hi Caroline,
Just a question, if I want to add another option like "Other" with the possibility to write a comment for the client, for exemple: "how did you heard about us" and below of "Other" a new selection like: "on a blog" and the customer can write on which blog she saw us. Do you have instructions and code for that ?

PS : sorry for my englidh and thanks a lot for your help :))))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment