Task #9790 Add newsletter signup button

This commit is contained in:
amalelshihaby 2021-09-29 10:40:34 +02:00
parent 65b1241054
commit 0e3b52abc5
9 changed files with 187 additions and 2 deletions

1
.gitignore vendored
View file

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

View file

@ -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=''),
),
]

View file

@ -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=''),
),
]

View file

@ -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)'),
),
]

View file

@ -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):

View file

@ -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">

View file

@ -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>

View file

@ -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";

View file

@ -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 %}