Permalink
Browse files

Implement Mailchimp integration to create subscriptions.

Changes
- Implement mailchimp integration by using the subbscribe library.
- Integrate subbscribe library into repo, this will be moved into a bower package later.
- Fix: show reading time on  mobile devices.
  • Loading branch information...
1 parent 3275a01 commit 558ed2f698d7a21b16e5c759566fd26c6055a7bc @kelyvin committed Mar 28, 2016
View
@@ -38,6 +38,7 @@
"globals": {
"$": true,
"CaffeineTheme": true,
- "ScrollReveal": true
+ "ScrollReveal": true,
+ "jQuery": true
}
}
View
@@ -161,6 +161,36 @@ var tag_names = ['code', 'career'];
</script>
```
+### Mailchimp
+
+This theme supports Mailchimp subscribing. We are using [Hello Byte's subbscribe](https://github.com/shlomnissan/subbscribe) library to create an opt-in popup form. Due to its lack of support for a package manager, I have included its assets as part of this project. I will try to keep that updated regularly.
+
+To enable this feature, you'll need to obtain your Mailchimp embed signup form action URL, which is documented [here](http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms). Then inject it into your blog header like the example below.
+
+Go to Ghost Admin panel → `Code Injection``Blog Header` and add:
+
+```html
+<script>
+var mailchimp_url = "//1bytebeta.us9.list-manage.com/subscribe/post?u=1c261e60d8259c0c636801494&amp;id=7fa99bf359";
+</script>
+```
+
+To modify its contents, go to `cover.js` and modify the code block below to your liking:
+
+```
+if (window.mailchimp_url) {
+ $("body").subbscribe({
+ title: "Never miss a post!",
+ text: "Stay up to the date with the latest posts from Caffeine Coding!",
+ name: "<a href='https://www.facebook.com/caffeinecoding' target='_blank'>@caffeinecoding</a>",
+ color: "#56817A",
+ thumbnail: "http://i.imgur.com/39erIwp.png",
+ list: "MailChimp",
+ url : window.mailchimp_url
+ });
+}
+```
+
### Colors
Edit the file `assets/scss/modules/_variables.scss`. Remember that before you deploy your changes to prod, it is necessary to compile the build to rebuild your new stylesheet, so keep running your gulp process in background.
View
@@ -20,6 +20,8 @@ Like the original Uno-zen theme that helped provide the skeleton for this projec
- Bigger emphasis on the splash page
- Smoother animations and style
- Masonry and scroll reveal support
+ - Mailchimp integration
+ - Use font-awesome to get the latest icons
## Installation
Oops, something went wrong.
View
6 assets/js/caffeine-theme.js 100644 → 100755
Oops, something went wrong.
@@ -54,7 +54,7 @@ $(function() {
_toggleTagsOverlay();
});
- $(".nav-blog > a").click(function(event) {
+ $(".home-link").click(function(event) {
if (CaffeineTheme.is("page", "home")) {
event.preventDefault();
CaffeineTheme.showIndexPage();
@@ -66,6 +66,22 @@ $(function() {
}
});
+ $(".subscribe-link").click(function(event) {
+ event.preventDefault();
+
+ if (window.mailchimp_url) {
+ $("body").subbscribe({
+ title: "Never miss a post!",
+ text: "Stay up to the date with the latest posts from Caffeine Coding!",
+ name: "<a href='https://www.facebook.com/caffeinecoding' target='_blank'>@caffeinecoding</a>",
+ color: "#56817A",
+ thumbnail: "http://i.imgur.com/39erIwp.png",
+ list: "MailChimp",
+ url : window.mailchimp_url
+ });
+ }
+ });
+
$homeButton.click(_defaultLogoNavEvent);
$(".open-link").click(_defaultLogoNavEvent);
@@ -0,0 +1,236 @@
+/**
+ * Subbscribe.js (http://www.subbscribe.com)
+ * Copyright (c) 2014 (v2.0) Shlomi Nissan, 1ByteBeta (http://www.1bytebeta.com)
+ * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ */
+"use strict";
+
+(function($) {
+ $.fn.subbscribe = function(options) {
+ // Default settings
+ var settings = $.extend({
+ list: "MailChimp",
+ url: "",
+ title: "Never miss a post!",
+ text: "Get our latest posts and announcements in your inbox. You won't regret it!",
+ name: "Subbscribe",
+ color: "#ee6262",
+ thumbnail: "https://s3-ap-southeast-2.amazonaws.com/subbscribe/img/avatar.png",
+ emailonly: false,
+ cm_mail_field: "",
+ delay: 0,
+
+ }, options);
+
+ /*
+ ===============================================================================
+ Helpers
+ ===============================================================================
+ */
+
+ function isError(data) {
+ console.log(data);
+
+ if (settings.list === "MailChimp") {
+ if (data.result !== "success") {
+ return true;
+ }
+
+ return false;
+ } else if (settings.list === "CampaignMonitor") {
+ if (data.Status === 400) {
+ return true;
+ }
+
+ return false;
+ }
+
+ return true;
+ }
+
+ function resetFormFields() {
+ $("#subbscribe input").each(function() {
+ $(this).val("");
+ });
+ }
+
+ function validateEmail(email) {
+ var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(email);
+ }
+
+ function formValidation() {
+ var valid = true;
+ var name = $("#subb-NAME");
+ var email = $("#subb-EMAIL");
+
+ if (!settings.emailonly) {
+ if (name.val().length < 2) {
+ valid = false;
+ name.addClass("error");
+ } else {
+ name.removeClass("error");
+ }
+ }
+
+ if (!validateEmail(email.val())) {
+ valid = false;
+ email.addClass("error");
+ } else {
+ email.removeClass("error");
+ }
+
+ return valid;
+ }
+
+ function setCookie(cname, cvalue, exdays) {
+ var d = new Date();
+ d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+ var expires = "expires=" + d.toUTCString();
+ document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
+ }
+
+ function getCookie(cname) {
+ var name = cname + "=";
+ var ca = document.cookie.split(";");
+ for (var i = 0; i < ca.length; i++) {
+ var c = ca[i];
+
+ while (c.charAt(0) === " ") {
+ c = c.substring(1);
+ }
+
+ if (c.indexOf(name) === 0) {
+ return c.substring(name.length, c.length);
+ }
+ }
+
+ return "";
+ }
+
+ // Make sure a URL has been passed through
+ if (settings.url === "") {
+ console.log("Subbscribe Error: You must provide a valid MailChimp form URL.");
+ return;
+ }
+
+ //make sure the cm_mail_field is set when using Campaign Monitor
+ if (settings.list === "CampaignMonitor" && !settings.cm_mail_field.length) {
+ console.log("You must provide the mail input name. Found in the form code from Campaign Monitor");
+ return;
+
+ }
+
+ var _name = "";
+ var _email = "";
+ var _url = "";
+ var _action = "";
+
+ // Make sure list is either set to MailChimp or CampaignMonitor
+ // Change field names if yours don’t match
+ if (settings.list === "MailChimp") {
+ _name = "NAME";
+ _email = "EMAIL";
+ _action = settings.url.replace("/post?", "/post-json?").concat("&c=?");
+ } else if (settings.list === "CampaignMonitor") {
+ _name = "cm-name";
+ _email = settings.cm_mail_field;
+ _action = settings.url + "?callback=?";
+ } else {
+ console.log("Subbscribe Error: list value must be set to MailChimp or CampaignMonitor");
+ return;
+
+ }
+
+ // Separate the input fields from the HTML
+ // if emailonly is set, nameInput should be blank
+ var nameInput = "";
+ var emailInput = '<input type="email" name="' + _email + '" id="subb-EMAIL" placeholder="Email Address" />';
+
+ if (!settings.emailonly) {
+ nameInput = ' <input type="text" name="' + _name + '" id="subb-NAME" placeholder="Name" />';
+ }
+
+ // HTML
+ var html = '<div id="subbscribe" style="display: none"><div class="subb-title">' + settings.title + ' <img class="close-x" src="https://s3-ap-southeast-2.amazonaws.com/subbscribe/img/close.svg" /> </div> <div class="subb-body"> <div class="subb-hidden"> <div class="subb-thumbnail"> <img style="width: 40px; height: 40px;" src="' + settings.thumbnail + '" /> </div> <div class="subb-hidden"> <div class="subb-site"> &nbsp;' + settings.name + ' </div> <button class="subb-button show-form">Subscribe</button> </div> </div> <div class="subb-form" style="display: none"> <p>' + settings.text + '</p> <form id="mc-embedded-subbscribe-form" method="post" action="' + settings.url + '"> <div class="subbscribe-alert subbscribe-error" style="display: none">Oops! Check your details and try again.</div> <div class="subbscribe-alert subbscribe-success" style="display: none">Thanks! Check your email for confirmation.</div> <div class="text-input"> ' + nameInput + ' </div> <div class="text-input"> ' + emailInput + ' </div> <button class="subb-button submit-form" type="submit" style="width: 100%; margin-bottom: 10px;">Subscribe</button></form></div> </div> </div>';
+
+ if (getCookie("subbscribe-hidden") !== 1 && $(this).find("#subbscribe").length === 0) {
+ this.append(html);
+
+ setTimeout(function() {
+ $("#subbscribe").css("display", "block");
+ $("#subbscribe").css("width", $(".subb-site").width() + 200);
+ $("#subbscribe").addClass("animated slideInRight");
+ }, settings.delay * 1000);
+ }
+
+ // Update CSS classes
+ $("#subbscribe .subb-button").css("background-color", settings.color);
+
+ /*
+ ===============================================================================
+ Events
+ ===============================================================================
+ */
+
+ $("#subbscribe .close-x").click(function() {
+ $("#subbscribe").toggleClass("slideInRight fadeOut");
+ $("#subbscribe").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
+
+ $("#subbscribe").remove();
+ // setCookie('subbscribe-hidden', 1, 1); // Hide for a day
+ });
+
+ if (typeof settings.onClose === "function") {
+ settings.onClose.call();
+ }
+ });
+
+ $("#subbscribe .show-form").click(function() {
+
+ $("#subbscribe .subb-hidden").hide();
+ $("#subbscribe .subb-form").show();
+
+ });
+
+ $("#mc-embedded-subbscribe-form").submit(function(e) {
+ e.preventDefault();
+
+ if (formValidation()) {
+ $("#subbscribe .subbscribe-error").slideUp();
+ $("#subbscribe .submit-form").attr("disabled", "disabled");
+
+ $.ajax({
+ url: _action,
+ type: "post",
+ data: $(this).serialize(),
+ dataType: "json",
+ contentType: "application/json; charset=utf-8",
+
+ success: function(data) {
+ if (isError(data)) {
+ console.log("Subbscribe Error: submission failed.");
+ } else {
+ //SUCCESS
+ resetFormFields();
+ $(".subbscribe-success").slideDown();
+
+ setTimeout(function() { $("#subbscribe").addClass("animated fadeOut"); }, 2000);
+ $("#subbscribe").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
+ $("#subbscribe").remove();
+ // setCookie('subbscribe-hidden', 1, 365); // Hide for a year
+
+ if (typeof settings.onSubbscribe === "function") {
+ settings.onSubbscribe.call();
+ }
+ });
+ }
+ }
+ });
+ } else {
+ $("#subbscribe .subbscribe-error").slideDown();
+ }
+ });
+ };
+
+}(jQuery));
@@ -39,6 +39,11 @@ $(function() {
}
}
+ // Subscribe button
+ if (window.mailchimp_url) {
+ $(".subscribe-button").removeClass("hide");
+ }
+
if (CaffeineTheme.is("page", "home")) {
if (!CaffeineTheme.isOpen()) {
CaffeineTheme.hideIndexPage();
@@ -4,6 +4,7 @@
@import '../vendor/bourbon/app/assets/stylesheets/bourbon.scss';
@import 'modules/mixins.scss';
+@import 'components/subbscribe.scss';
// ------------------------------
// MODULES
@@ -129,10 +129,14 @@
border: none;
}
+ &.hide {
+ display: none;
+ }
+
a {
display: block;
float: none;
- padding: 8px 20px;
+ padding: 8px 20px 8px 22px;
font-size: 18px;
color: $slate-white;
@@ -107,10 +107,6 @@
// ------------------------------
@media all and (max-width:600px) {
.post {
- .reading-time {
- display: none
- }
-
.post-related,
.post-card {
margin: 0 20px;
Oops, something went wrong.

0 comments on commit 558ed2f

Please sign in to comment.