Skip to content

Commit dfd34d0

Browse files
author
Sid Doshi
committed
Language support
1 parent 6ce4b60 commit dfd34d0

File tree

3 files changed

+151
-29
lines changed

3 files changed

+151
-29
lines changed

‎README.md

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
AjaxChimp is a jQuery plugin that lets you ajaxify your mailchimp form.
44

5-
Use this if you hate the jarring transition to the mailchimp website on submitting a mailchimp.
5+
Use this if you hate the jarring transition to the mailchimp website upon submitting an email address to mailchimp.
66

77
**Note**: This relies on an undocumented feature at mailchimp that uses JSONP to allow cross-domain ajax to work. You have been warned. (It has however, been around for at least 3 years that I know of, and probably more.)
88

9+
910
## Install
1011

1112
Just add the script to your webpage (along with jQuery ofcourse). Get it here:
@@ -20,6 +21,7 @@ curl -O https://raw.github.com/scdoshi/jquery-ajaxchimp/master/jquery.ajaxchimp.
2021
bower install ajaxchimp
2122
```
2223

24+
2325
## Requirements
2426

2527
* jQuery
@@ -28,37 +30,48 @@ bower install ajaxchimp
2830

2931
## Use
3032

31-
#### Method 1: Use the mailchimp form
33+
#### On the mailchimp form element
3234

3335
```js
3436
$('form-selector').ajaxChimp();
3537
```
3638

37-
#### Method 2: Use a blank form with an input of type email
38-
3939
```js
40-
$('form-selector').ajaxChimp({
41-
url: 'mailchimp-post-url'
42-
});
40+
$.ajaxChimp.init('form-selector');
4341
```
4442

45-
The mailchimp post url will look like this:
4643

44+
## Label
45+
46+
If a label element is included in the form for the email input, then the success or error message will be displayed in it. A `valid` or `error` class will also be added accordingly.
47+
48+
#### Example Form
49+
50+
```html
51+
<form id="mc-form">
52+
<input id="mc-email" type="email" placeholder="email">
53+
<label for="mc-email"></label>
54+
<button type="submit">Submit</button>
55+
</form>
4756
```
48-
http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f
57+
58+
```js
59+
$('#mc-form').ajaxChimp({
60+
url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh9'
61+
});
4962
```
5063

51-
**Note**: The advantage of using method 1 is that even if ajax or javascript fails, the form will fallback and work as a normal mailchimp form.
5264

53-
## Callback
65+
## Options
66+
67+
### Callback
5468

5569
Optionally, you can specify a callback with either method to run after the
5670
ajax query to mailchimp succeeds or fails.
5771

5872
```js
5973
$('form-selector').ajaxChimp({
60-
callback: callbackfunction,
61-
url: 'mailchimp-post-url'
74+
callback: callbackfunction
6275
});
6376
```
6477

@@ -72,22 +85,58 @@ function callbackFunction (resp) {
7285
}
7386
```
7487

75-
## Label
88+
### URL
7689

77-
If a label element is included in the form for the email input, then the success or error message will be displayed in it. A `valid` or `error` class will also be added accordingly.
90+
You can specify the mailchimp URL to post to (or override the url provided on the form element)
91+
92+
```js
93+
$('form-selector').ajaxChimp({
94+
url: 'mailchimp-post-url'
95+
});
96+
```
7897

79-
## Example Form (method 2)
98+
The mailchimp post url will look like this:
8099

81-
```html
82-
<form id="mc-form">
83-
<input id="mc-email" type="email" placeholder="email">
84-
<label for="mc-email"></label>
85-
<button type="submit">Submit</button>
86-
</form>
87100
```
101+
http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f
102+
```
103+
104+
### Language Support
105+
106+
For success and error messages in different languages:
107+
108+
- Specify a language option and the translation dict.
109+
- Include `jquery.ajaxchimp.langs.js` in the html file
110+
88111

89112
```js
90-
$('#mc-form').ajaxChimp({
91-
url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh9'
113+
$('form-selector').ajaxChimp({
114+
language: 'es'
92115
});
116+
117+
118+
If the language you want is not supported out of the box, or the translations are wrong, open a pull request with the required language and I will add it in. You can also add translations to your js file as follows:
119+
120+
```js
121+
$.ajaxChimp.translations.es = {
122+
0: 'Te hemos enviado un email de confirmación',
123+
1: 'Por favor, introduzca un valor',
124+
2: 'Una dirección de correo electrónico debe contener una sola @',
125+
3: 'La parte de dominio de la dirección de correo electrónico no es válida (la parte después de la @:)',
126+
4: 'La parte de usuario de la dirección de correo electrónico no es válida (la parte antes de la @:)',
127+
5: 'Esta dirección de correo electrónico se ve falso o no válido. Por favor, introduce una dirección de correo electrónico real'
128+
}
93129
```
130+
131+
The response numbers are as follows:
132+
133+
```js
134+
// Responses
135+
// 0: 'We have sent you a confirmation email'
136+
// 1: 'Please enter a value'
137+
// 2: 'An email address must contain a single @'
138+
// 3: 'The domain portion of the email address is invalid (the portion after the @: )'
139+
// 4: 'The username portion of the email address is invalid (the portion before the @: )'
140+
// 5: 'This email address looks fake or invalid. Please enter a real email address'
141+
```
142+

‎jquery.ajaxchimp.js

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,33 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi
2727
(function ($) {
2828
'use strict';
2929

30+
$.ajaxChimp = {
31+
responses: {
32+
'We have sent you a confirmation email' : 0,
33+
'Please enter a value' : 1,
34+
'An email address must contain a single @' : 2,
35+
'The domain portion of the email address is invalid (the portion after the @: )' : 3,
36+
'The username portion of the email address is invalid (the portion before the @: )' : 4,
37+
'This email address looks fake or invalid. Please enter a real email address' : 5
38+
},
39+
translations: {
40+
'en': null
41+
},
42+
init: function (selector, options) {
43+
$(selector).ajaxChimp(options);
44+
}
45+
46+
};
47+
3048
$.fn.ajaxChimp = function (options) {
31-
$(this).each(function(i,el) {
32-
var form = $(el);
49+
$(this).each(function(i, elem) {
50+
var form = $(elem);
3351
var email = form.find('input[type=email]');
3452
var label = form.find('label[for=' + email.attr('id') + ']');
3553

3654
var settings = $.extend({
37-
'url': form.attr('action')
55+
'url': form.attr('action'),
56+
'language': 'en'
3857
}, options);
3958

4059
var url = settings.url.replace('/post?', '/post-json?').concat('&c=?');
@@ -45,7 +64,7 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi
4564
form.submit(function () {
4665
function successCallback(resp) {
4766
if (resp.result === 'success') {
48-
label.html('We have sent you a confirmation email.');
67+
msg = 'We have sent you a confirmation email';
4968
label.removeClass('error').addClass('valid');
5069
email.removeClass('error').addClass('valid');
5170
} else {
@@ -72,9 +91,20 @@ For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsi
7291
index = -1;
7392
msg = resp.msg;
7493
}
75-
label.html(msg);
7694
}
7795

96+
// Translate and display message
97+
if (
98+
settings.language !== 'en'
99+
&& $.ajaxChimp.responses[msg]
100+
&& $.ajaxChimp.translations
101+
&& $.ajaxChimp.translations[settings.language]
102+
&& $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]
103+
) {
104+
msg = $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]];
105+
}
106+
label.html(msg);
107+
78108
label.show(2000);
79109
if (settings.callback) {
80110
settings.callback(resp);

‎jquery.ajaxchimp.langs.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
(function ($) {
2+
'use strict';
3+
4+
// ISO-693-1 Language codes: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
5+
6+
// Responses
7+
// 0: 'We have sent you a confirmation email'
8+
// 1: 'Please enter a value'
9+
// 2: 'An email address must contain a single @'
10+
// 3: 'The domain portion of the email address is invalid (the portion after the @: )'
11+
// 4: 'The username portion of the email address is invalid (the portion before the @: )'
12+
// 5: 'This email address looks fake or invalid. Please enter a real email address'
13+
14+
// The translations below are from google translate, and may not be accurate.
15+
// Pull requests with translations for other languages as well as corrections are welcome.
16+
17+
$.ajaxChimp.translations = {
18+
'de': {
19+
0: 'Wir haben Ihnen eine Bestätigungs-E-Mail verschickt',
20+
1: 'Bitte geben Sie einen Wert',
21+
2: 'Eine E-Mail-Adresse muss ein einzelnes enthalten @',
22+
3: 'Der Domänenteil der E-Mail-Adresse ist ungültig (der Teil nach dem @:)',
23+
4: 'Der Benutzername Teil der E-Mail-Adresse ist ungültig (der Teil vor dem @:)',
24+
5: 'Diese E-Mail-Adresse sieht gefälscht oder ungültig. Bitte geben Sie eine echte E-Mail-Adresse'
25+
},
26+
'es': {
27+
0: 'Te hemos enviado un email de confirmación',
28+
1: 'Por favor, introduzca un valor',
29+
2: 'Una dirección de correo electrónico debe contener una sola @',
30+
3: 'La parte de dominio de la dirección de correo electrónico no es válida (la parte después de la @:)',
31+
4: 'La parte de usuario de la dirección de correo electrónico no es válida (la parte antes de la @:)',
32+
5: 'Esta dirección de correo electrónico se ve falso o no válido. Por favor, introduce una dirección de correo electrónico real'
33+
},
34+
'fr': {
35+
0: 'Nous vous avons envoyé un e-mail de confirmation',
36+
1: 'S\'il vous plaît entrer une valeur',
37+
2: 'Une adresse e-mail doit contenir un seul @',
38+
3: 'La partie domaine de l\'adresse e-mail n\'est pas valide (la partie après le @:)',
39+
4: 'La partie nom d\'utilisateur de l\'adresse email n\'est pas valide (la partie avant le signe @:)',
40+
5: 'Cette adresse e-mail semble faux ou non valides. S\'il vous plaît entrer une adresse email valide'
41+
}
42+
};
43+
})(jQuery);

0 commit comments

Comments
 (0)