Skip to content

Instantly share code, notes, and snippets.

@chrsgrffth
Last active July 10, 2020 14:34
Show Gist options
  • Save chrsgrffth/fa69fa9874871c8b52afc01d1a881e6d to your computer and use it in GitHub Desktop.
Save chrsgrffth/fa69fa9874871c8b52afc01d1a881e6d to your computer and use it in GitHub Desktop.
Vue – Mailchimp Subscribe Component
# To get the `action` prop:
#
# 1. Go to your dashboard on mailchimp.com and navigate
# to Lists > Signup Forms > Embedded Forms.
#
# 2. Copy the `<form>` action from the generated HTML code.
#
# 3. Pass that into the component via the prop, like so:
#
# <mailchimp-subscribe
# action="//yourname.us10.list-manage.com/subscribe/post?u=012345678910&id=ab12345
# ></mailchimp subscribe>
#
module.exports =
name: "MailchimpSubscribe"
props:
action:
required: true
type: String
data: ->
email: ''
response: {}
errorMessage: null
successMessage: null
ready: ->
# We need to receive jsonp from Mailchimp. So we update the
# action string.
@action = @action.replace('/post?', '/post-json?').concat('&c=?')
methods:
subscribe: (e) ->
params = $(e.currentTarget).serialize()
$.ajax(
type: 'POST'
url: @action
data: params
dataType: 'jsonp'
success: (res) =>
if res.result == 'success'
@successMessage = res.msg
else
@errorMessage = res.msg
# Mailchimp returns error messages prefixed with numbers (ie "0 - Message"), so we'll
# strip that out for the end user.
@errorMessage = @errorMessage.substring(@errorMessage.indexOf('-')+1, @errorMessage.length)
)
template: """
<form v-if="!successMessage" @submit.prevent="subscribe($event)">
<input v-model="email" name="EMAIL" type="text" placeholder="Email" id="email" />
<input type="submit" />
</form>
<p v-if="errorMessage && !successMessage" transition="fade">{{ errorMessage }}</p>
<p v-if="successMessage" transition="fade">{{ successMessage }}</p>
"""
@steveafrost
Copy link

Is this using jQuery within Vue.js for the $.ajax?

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