Task #9790 Add newsletter signup button

.gitignore

@@ -18,3 +18,4 @@
 /node_modules/
 /publichealth/static/libs
 publichealth.home.json
+.history

publichealth/home/migrations/0030_auto_20210928_1850.py

@@ -0,0 +1,29 @@
+# Generated by Django 3.0.14 on 2021-09-28 16:50
+
+from django.db import migrations
+import wagtail.core.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0029_contactformfield_clean_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='articleindexpage',
+            name='subscribe_label_de',
+            field=wagtail.core.fields.RichTextField(blank=True, default=''),
+        ),
+        migrations.AddField(
+            model_name='articleindexpage',
+            name='subscribe_label_en',
+            field=wagtail.core.fields.RichTextField(blank=True, default=''),
+        ),
+        migrations.AddField(
+            model_name='articleindexpage',
+            name='subscribe_label_fr',
+            field=wagtail.core.fields.RichTextField(blank=True, default=''),
+        ),
+    ]

publichealth/home/migrations/0031_articleindexpage_subscribe_action.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.0.14 on 2021-09-28 16:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0030_auto_20210928_1850'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='articleindexpage',
+            name='subscribe_action',
+            field=models.URLField(blank=True, default=''),
+        ),
+    ]

publichealth/home/migrations/0032_auto_20210928_1858.py

@@ -0,0 +1,33 @@
+# Generated by Django 3.0.14 on 2021-09-28 16:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0031_articleindexpage_subscribe_action'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='articleindexpage',
+            name='subscribe_action',
+            field=models.URLField(blank=True, default='', verbose_name='Action'),
+        ),
+        migrations.AlterField(
+            model_name='articleindexpage',
+            name='subscribe_label_de',
+            field=models.CharField(blank=True, default='', max_length=250, verbose_name='Button Label (de)'),
+        ),
+        migrations.AlterField(
+            model_name='articleindexpage',
+            name='subscribe_label_en',
+            field=models.CharField(blank=True, default='', max_length=250, verbose_name='Button Label (en)'),
+        ),
+        migrations.AlterField(
+            model_name='articleindexpage',
+            name='subscribe_label_fr',
+            field=models.CharField(blank=True, default='', max_length=250, verbose_name='Button Label (fr)'),
+        ),
+    ]

publichealth/home/models/models.py

@@ -47,6 +47,17 @@ class ArticleIndexPage(Page):
         'intro_en',
     )
 
+    subscribe_label_de = models.CharField("Button Label (de)", default='', blank=True, max_length=250)
+    subscribe_label_fr = models.CharField("Button Label (fr)", default='', blank=True, max_length=250)
+    subscribe_label_en = models.CharField("Button Label (en)", default='', blank=True, max_length=250)
+    subscribe_action = models.URLField("Action", default='', blank=True)
+
+    trans_subscribe_label = TranslatedField(
+        'subscribe_label_de',
+        'subscribe_label_fr',
+        'subscribe_label_en',
+    )
+
     feed_image = models.ForeignKey(
         'wagtailimages.Image',
         null=True, blank=True,
@@ -61,6 +72,16 @@ class ArticleIndexPage(Page):
         FieldPanel('title_en'),
         FieldPanel('intro_en'),
         ImageChooserPanel('feed_image'),
+        MultiFieldPanel(
+        [
+            FieldPanel('subscribe_label_de'),
+            FieldPanel('subscribe_label_fr'),
+            FieldPanel('subscribe_label_en'),
+            FieldPanel('subscribe_action')
+                    ],
+        heading="Newsletters",
+        classname="collapsible collapsed"
+    )
     ]
 
     def get_context(self, request):

publichealth/home/templates/home/article_index_page.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load i18n wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
@@ -21,6 +21,9 @@
     <div class="container">
     	<h2>{{ page.trans_title }}</h2>
     	<p class="lead">{{ page.trans_intro|richtext }}</p>
+      {% if page.subscribe_action %}
+        {% include 'home/subscription_form.html' %}
+      {% endif %}
       <div class="article-body" role="main">
       {% for entry in articles %}
         <div class="item">

publichealth/home/templates/home/subscription_form.html

@@ -0,0 +1,49 @@
+<a href="#" class="btn btn-sm btn-primary pull-right" style="text-transform: uppercase;" data-toggle="modal" data-target="#subscribeModal">{{ page.trans_subscribe_label }}</a>
+<div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModal" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel">{{ page.trans_subscribe_label }}</h4>
+            </div>
+            <div class="modal-body">
+                <div id="mc_embed_signup">
+                    <form action="{{page.subscribe_action}}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+                        <div id="mc_embed_signup_scroll">
+                        <div class="indicates-required"><span class="asterisk"></span> indicates required</div>
+                        <div class="mc-field-group">
+                        <label for="mce-EMAIL">Mailadresse/ Adresse e-mail <span class="asterisk">*</span>
+                        </label>
+                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
+                        </div>
+                        <div class="mc-field-group">
+                        <label for="mce-FNAME">Vorname/ Prénom <span class="asterisk">*</span>
+                        </label>
+                        <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
+                        </div>
+                        <div class="mc-field-group">
+                        <label for="mce-LNAME">Nachname/ Nom <span class="asterisk">*</span>
+                        </label>
+                        <input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
+                        </div>
+                        <div class="mc-field-group input-group">
+                        <strong>Sprache/ Langue <span class="asterisk">*</span>
+                        </strong>
+                        <ul><li><input class="pull-left" type="radio" value="Deutsch" name="MMERGE9" id="mce-MMERGE9-0"><label class="pull-left" for="mce-MMERGE9-0">Deutsch</label></li>
+                        <li class="clearfix"></li>
+                        <li><input class="pull-left" type="radio" value="Français" name="MMERGE9" id="mce-MMERGE9-1"><label class="pull-left" for="mce-MMERGE9-1">Français</label></li>
+                        </ul>
+                        </div>
+                        <div id="mce-responses" class="clear">
+                        <div class="response" id="mce-error-response" style="display:none"></div>
+                        <div class="response" id="mce-success-response" style="display:none"></div>
+                        </div> <!-- 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_8368e636ee0d8404d5452a0ef_77f535b64d" tabindex="-1" value=""></div>
+                        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

publichealth/static/css/main.scss

@@ -129,4 +129,11 @@ $slider-nav: 200px;
 // Fix Bootstrap 3 warning
 .media, .media-body { zoom: none !important; transform: scale(1); }
  
+#mc_embed_signup input[type=radio] {
+  -webkit-appearance: none; padding: 0px;margin-top: 0px;
+} 
+#mc_embed_signup {
+  background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; 
+}
+
 @import "subsites";

publichealth/templates/base.html

@@ -11,6 +11,9 @@
         <meta name="description" content="{% block description %}{% endblock %}">
 
         {% block extra_css %}{% endblock %}
+        {% if page.subscribe_action %}
+        <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
+        {% endif %}
         {% compress css %}
             <link rel="stylesheet" type="text/x-scss" href="{% static 'css/main.scss' %}">
         {% endcompress %}
@@ -35,7 +38,28 @@
         <script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
         <script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
         <script src="{% static 'libs/cookieconsent/build/cookieconsent.min.js' %}"></script>
-
+        {% if page.subscribe_action %}
+            <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
+            <script type='text/javascript'>(function($) {
+                window.fnames = new Array(); 
+                window.ftypes = new Array();
+                fnames0='EMAIL';
+                ftypes0='email';
+                fnames1='FNAME';
+                ftypes1='text';
+                fnames2='LNAME';
+                ftypes2='text';
+                fnames9='MMERGE9';
+                ftypes9='radio';
+                $.extend($.validator.messages, {
+                required: "Dieses Feld ist ein Pflichtfeld.",
+                maxlength: $.validator.format("Geben Sie bitte maximal {0} Zeichen ein."),
+                minlength: $.validator.format("Geben Sie bitte mindestens {0} Zeichen ein."),
+                email: "Geben Sie bitte eine gültige E-Mail Adresse ein.",
+                });}(jQuery));
+                var $mcj = jQuery.noConflict(true);
+            </script>
+        {% endif %} 
         {% block extra_js %}{% endblock %}
 
         {% compress js %}