Mailchimp Integration

assets/js/src/i18n/en_ES.coffee

@@ -1,15 +1,15 @@
 window.i18n =
-  '.modal-title': 'Una vez a la semana, recibe lo último.'
-  '.modal-body p': '<strong>Política de Privacidad:</strong> No spam ni publicidad. Desunscríbete en cualquier momento.'
-  'fieldEmail': 'Tu correo electrónico'
-  '.poweredby': ' © 2016. Todos los derechos reservados. Construido con <a href="https://github.com/Kikobeats/bloggy" target="_blank">Bloggy</a> bajo <a href="https://ghost.org/" target="_blank">Ghost</a>.'
-  '.modal-body .button-add.wide': 'Subscribirse'
-  '.subscribe-banner': '¿Te gustaría recibir el contenido en tu correo mensualmente? &nbsp;<a class="button" data-toggle="modal" data-target="#blogsubscribe">Subscríbete</a>',
-  '.read-more': 'Leer Más'
-  '.newer-posts': '← Publicaciones recientes'
-  '.older-posts': 'Publicaciones antiguas →'
-  '.page-number': 'Página % de $'
-  'a.post-meta': '← Volver a la Portada'
-  '.prefix-date': 'el'
-  'footer .button-add.large.wide': 'Subscríbete y recíbelo semalmente en tu correo'
-  '.read-next-story .post:before': 'Leer siguiente publicación'
+  '.modal-title'                  : 'Una vez a la semana, recibe lo último.'
+  '.modal-body p'                 : '<strong>Política de Privacidad:</strong> No spam ni publicidad. Desunscríbete en cualquier momento.'
+  'fieldEmail'                    : 'Tu correo electrónico'
+  '.poweredby'                    : ' © 2016. Todos los derechos reservados. Construido con <a href="https://github.com/Kikobeats/bloggy" target="_blank">Bloggy</a> bajo <a href="https://ghost.org/" target="_blank">Ghost</a>.'
+  'newsletter_subscribe'          : 'Subscribirse'
+  '.subscribe-banner'             : '¿Te gustaría recibir el contenido en tu correo mensualmente? &nbsp;<a class="button" data-toggle="modal" data-target="#blogsubscribe">Subscríbete</a>',
+  '.read-more'                    : 'Leer Más'
+  '.newer-posts'                  : '← Publicaciones recientes'
+  '.older-posts'                  : 'Publicaciones antiguas →'
+  '.page-number'                  : 'Página % de $'
+  'a.post-meta'                   : '← Volver a la Portada'
+  '.prefix-date'                  : 'el'
+  'footer .button-add.large.wide' : 'Subscríbete y recíbelo semalmente en tu correo'
+  '.read-next-story .post:before' : 'Leer siguiente publicación'

assets/js/src/i18n/index.coffee

@@ -16,24 +16,20 @@ $ ->
     '.prefix-date'
   ]
 
-  for selector in selectors when i18n[selector]
-    $(selector).html(i18n[selector])
+  $(selector).html(i18n[selector]) for selector in selectors when i18n[selector]
 
   # inline css
-
-  css_selector = '.read-next-story .post:before'
-  property = "<style>.read-next-story .post:before{ content: '#{i18n[css_selector]}' }</style>"
+  selector = '.read-next-story .post:before'
+  property = "<style>.read-next-story .post:before{ content: '#{i18n[selector]}' }</style>"
   $('head').append(property)
 
   # pagination
-
   selector = '.page-number'
   pageNumber = $(selector).html().split(' ')
   pageNumberi18n = i18n[selector].split(' ')
   pageNumber[n] = pageNumberi18n[n] for n in [0, 2]
   $(selector).html(pageNumber.join(' '))
 
   # forms
-
-  selector = 'fieldEmail'
-  window[selector].placeholder = i18n[selector]
+  window.fieldEmail.placeholder = i18n.fieldEmail
+  window.newsletter_subscribe.value = i18n.newsletter_subscribe

assets/js/src/main.coffee

@@ -11,7 +11,8 @@ $(window).load ->
       method = if imageWidth >= contentWidth then 'addClass' else 'removeClass'
       $(this)[method] 'full-img'
 
-  $(window).smartresize casperFullImg
+    $(this).smartresize casperFullImg
+    $('#newsletter_form').attr('action', window.newsletter_form) if (window.newsletter_form)
 
 $ ->
   el = Bloggy.app

assets/scss/widgets/blog-subscribe.scss

@@ -1,3 +1,5 @@
+/*  Widget */
+
 .blog-subscribe {
   padding: 0;
 
@@ -17,9 +19,10 @@
 
     color: $brown;
   }
-}//.blog-subscribe
+}
+
+/* Main Modal */
 
-//the modal
 #blogsubscribe {
   .modal-header {
     padding: 50px 50px 0 50px;
@@ -58,20 +61,21 @@
     height: 50px;
     padding: 0 15px;
     margin-bottom: 1rem;
-  }
-  button {
-    min-height: 50px;
 
-    font-size: 1.8rem;
-    line-height: 1;
+    &:last-of-type {
+        min-height: 50px;
+        font-size: 1.8rem;
+        line-height: 1;
+
+        @include breakpoint(450px) {
+          font-size: 1.3rem;
+        }
+      }
 
-    @include breakpoint(450px) {
-      font-size: 1.3rem;
-    }
   }
   p {
     margin: 1rem 0;
 
     color: $brown;
   }
-}//#blogsubscribe
+}

default.hbs

@@ -27,9 +27,11 @@
           <a class="modal-close" data-dismiss="modal" aria-hidden="true" href="#"><span class="hidden">Close</span></a>
         </header>
         <div class="modal-body">
-          <form action="{{! populated via code injection}}" method="post">
-            <input id="fieldEmail" name="{{! populated via code injection}}" type="email" placeholder="Your email address" required />
-            <button class="button-add wide" type="submit">Send me good stuff</button>
+          <form id="newsletter_form" action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+            <input id="fieldEmail" type="email" value="" placeholder="Your email address" name="EMAIL" required>
+            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c6323ba5f5f4afeec2c624d39_0ee0695955" tabindex="-1" value=""></div>
+            <div class="clear"><input type="submit" value="Send me good stuff" name="subscribe" id="newsletter_subscribe" class="button-add wide"></div>
             <p><strong>Privacy policy:</strong> No spam. No jibber jabber. Unsubscribe any time.</p>
           </form>
         </div>