Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scaccogatto/vue-mailup
MailUp plugin for VueJS
https://github.com/scaccogatto/vue-mailup
mailup-plugin vue-mailup vuejs
Last synced: 28 days ago
JSON representation
MailUp plugin for VueJS
- Host: GitHub
- URL: https://github.com/scaccogatto/vue-mailup
- Owner: scaccogatto
- License: mit
- Created: 2017-10-17T15:21:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-19T13:11:10.000Z (about 7 years ago)
- Last Synced: 2024-11-19T17:01:52.662Z (about 1 month ago)
- Topics: mailup-plugin, vue-mailup, vuejs
- Language: JavaScript
- Size: 23.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-mailup
MailUp plugin for VueJS -> [official docs](http://help.mailup.com/display/mailupapi/HTTP+API+Specifications)
## Usage
### Vue entry point
`$ npm install vue-mailup`
```js
import Vue from 'vue';
import VueMailUp from 'vue-mailup';
const options = {
list: 1, // list ID
listGuid: 'xxxx-xxxx-xxxx', // list guid
key: 'k2z5.s01.it', // your console URL
confirm: 1 // confirmation email
};
Vue.use(VueMailUp, options)
```
### Vue Component - Subscribe
```js
export default {
...
methods: {
subscribeAction (formData) {
// first gather your basic data (if they're static for the whole app)
const baseNewsletterParams = this.$mailUp.NewsletterParameters
// gather necessary data
const formData = {
email: '[email protected]',
csvFldNames: ['campo1', 'campo2'].join(';'),
csvFldValues: ['field1Value', 'field2Value'].join(';')
}
// merge data
const subscribeData = Object.assign({}, baseNewsletterParams, formData)
// send data
this.$mailUp.subscribe(subscribeData)
.then(reply => { /* do things here */ })
.catch(reply => { /* error occurred here */ })
/**
* this will call:
* http://k2z5.s01.it/frontend/xmlsubscribe.aspx
* ?List=1
* &ListGuid=xxxx-xxxx-xxxx
* &Confirm=1
* &retCode=1
* &[email protected]
* &csvFldNames=campo1;campo2
* &csvFldValues=field1Value;field2Value
*/
}
}
...
}
```
### Vue Component - CheckSubscriber
```js
export default {
...
methods: {
checkSubscribeAction (formData) {
// first gather your basic data (if they're static for the whole app)
const baseNewsletterParams = this.$mailUp.NewsletterParameters
// gather necessary data
const formData = {
email: '[email protected]'
}
// merge data
const subscribeData = Object.assign({}, baseNewsletterParams, formData)
// send data
this.$mailUp.checkSubscriber(subscribeData)
.then(reply => { /* do things here */ })
.catch(reply => { /* error occurred here */ })
/**
* this will call:
* http://k2z5.s01.it/frontend/Xmlchksubscriber.aspx
* ?List=1
* &ListGuid=xxxx-xxxx-xxxx
* &Confirm=1
* &retCode=1
* &[email protected]
*/
}
}
...
}
```
### Vue Component - UpdateSubscriber
```js
export default {
...
methods: {
updateSubscribeAction (formData) {
// first gather your basic data (if they're static for the whole app)
const baseNewsletterParams = this.$mailUp.NewsletterParameters
// gather necessary data
const formData = {
email: '[email protected]',
csvFldNames: ['campo1', 'campo2'].join(';'),
csvFldValues: ['field1Value', 'field2Value'].join(';')
}
// merge data
const subscribeData = Object.assign({}, baseNewsletterParams, formData)
// send data
this.$mailUp.updateSubscriber(subscribeData)
.then(reply => { /* do things here */ })
.catch(reply => { /* error occurred here */ })
/**
* this will call:
* http://k2z5.s01.it/frontend/xmlUpdSubscriber.aspx
* ?List=1
* &ListGuid=xxxx-xxxx-xxxx
* &Confirm=1
* &retCode=1
* &[email protected]
* &csvFldNames=campo1;campo2
* &csvFldValues=field1Value;field2Value
*/
}
}
...
}
```
### Vue Component - Unsubscribe
```js
export default {
...
methods: {
unsubscribeAction (formData) {
// first gather your basic data (if they're static for the whole app)
const baseNewsletterParams = this.$mailUp.NewsletterParameters
// gather necessary data
const formData = {
email: '[email protected]'
}
// merge data
const unsubscribeData = Object.assign({}, baseNewsletterParams, formData)
// send data
this.$mailUp.unsubscribe(unsubscribeData)
.then(reply => { /* do things here */ })
.catch(reply => { /* error occurred here */ })
/**
* this will call:
* http://k2z5.s01.it/frontend/Xmlunsubscribe.aspx
* ?List=1
* &ListGuid=xxxx-xxxx-xxxx
* &Confirm=1
* &retCode=1
* &[email protected]
*/
}
}
...
}
```
## Options
Options are **mandatory**
```js
const options = {
list: 1, // list ID
listGuid: 'xxxx-xxxx-xxxx', // list guid
key: 'k2z5.s01.it', // your console URL
confirm: 1 // confirmation email
};
```
## Methods
- `subscribe (data, key)`: subscribes to a list
- `checkSubscriber (data, key)`: checks if a user is subscribed
- `updateSubscriber (data, key)`: update subscriber status
- `unsubscribe (data, key)`: unsubscribe a user
### Parameters
- `data` [object]: required, key => value, as sent to mailup
- `key` [string]: optional, if not set the "options" key will be used
## TODO
- Webpack bundle
- Test