Skip to content

Commit

Permalink
EOY Donate Banner (Fix #15711)
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephaniehobson
stephaniehobson committed Dec 12, 2024
1 parent 7538148 commit e616e31
Show file tree
Hide file tree
Showing 9 changed files with 142 additions and 94 deletions.
99 changes: 49 additions & 50 deletions bedrock/base/templates/includes/banners/fundraiser.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,71 @@
{% block banner_class %}c-banner-fundraising{% endblock %}

{% if LANG =="de" %}
{% set banner_title = 'Giving Tuesday: Spende jetzt an Mozilla' %}
{% set banner_tagline = 'Gemeinsam können wir das Internet von Tech-Riesen zurückerobern. Jetzt spenden.' %}
{% set banner_button_a = 'Spenden' %}
{% set banner_button_b = 'Jetzt spenden' %}
{% set banner_button_c = 'Beitragen' %}
{% set banner_title = 'Bitte spende bis 31. Dez. an Mozilla' %}
{% set banner_tagline_a = 'Wir haben unser Spendenziel für 2024 fast geknackt, aber noch nicht ganz.' %}
{% set banner_tagline_b = 'Die Zeit läuft aus für unser Spendenziel 2024. Könntest du noch heute helfen?' %}
{% set banner_tagline_c = 'Gemeinsam müssen wir unsere Bewegung zur Rückeroberung des Internets ausbauen.' %}
{% set banner_button = 'Spenden' %}
{% elif LANG.startswith('es-') %}
{% set banner_title = 'Dona a Mozilla este Día para Dar' %}
{% set banner_tagline = 'Juntos rescatemos Internet de las grandes tecnológicas. Dona.' %}
{% set banner_button_a = 'Donar' %}
{% set banner_button_b = 'Dar ahora' %}
{% set banner_button_c = 'Contribuir' %}
{% set banner_title = 'Dona a Mozilla antes del 31/12' %}
{% set banner_tagline_a = 'Casi alcanzamos nuestra meta para 2024, pero aún nos falta.' %}
{% set banner_tagline_b = 'Nuestra fecha límite está próxima. ¿Puedes donar?' %}
{% set banner_tagline_c = 'Debemos construir juntos el movimiento para recuperar Internet.' %}
{% set banner_button = 'Dona' %}
{% elif LANG == "fr" %}
{% set banner_title = 'Soutenez Mozilla pour le Giving Tuesday' %}
{% set banner_tagline = 'Ensemble, nous pouvons empêcher les géants de la tech de s’accaparer Internet.' %}
{% set banner_button_a = 'Je fais un don' %}
{% set banner_button_b = 'Je fais un geste' %}
{% set banner_button_c = 'Je fais une contribution' %}
{% set banner_title = 'Faites un don à Mozilla avant le 31/12' %}
{% set banner_tagline_a = 'Nous approchons de notre objectif 2024 : aidez-nous à l’atteindre !' %}
{% set banner_tagline_b = 'Notre collecte de fonds touche à sa fin. Vite, soutenez notre action !' %}
{% set banner_tagline_c = 'Unissons nos forces pour reprendre ensemble la main sur Internet.' %}
{% set banner_button = 'Je fais un don' %}
{% elif LANG == "it" %}
{% set banner_title = 'Festeggia la giornata mondiale del dono con un’offerta a Mozilla' %}
{% set banner_tagline = 'Insieme, liberiamo internet dal controllo di Big Tech. Dona ora.' %}
{% set banner_button_a = 'Dona' %}
{% set banner_button_b = 'Fai un’offerta' %}
{% set banner_button_c = 'Offri il tuo contributo' %}
{% set banner_title = 'Dona a Mozilla entro il 31 dicembre' %}
{% set banner_tagline_a = 'Siamo vicini al nostro obiettivo del 2024, ma ci serve un ultimo sforzo.' %}
{% set banner_tagline_b = 'La scadenza del 2024 si avvicina a passo svelto. Puoi darci una mano?' %}
{% set banner_tagline_c = 'Insieme, dobbiamo creare un movimento per liberare il potenziale di internet.' %}
{% set banner_button = 'Dona' %}
{% elif LANG == "pl" %}
{% set banner_title = 'Przekaż datek Mozilli na Giving Tuesday' %}
{% set banner_tagline = 'Razem możemy odzyskać Internet z rąk gigantów technologicznych. Wpłać teraz.' %}
{% set banner_button_a = 'Wpłać datek' %}
{% set banner_button_b = 'Wpłać teraz' %}
{% set banner_button_c = 'Wspomóż nas' %}
{% set banner_title = 'Przekaż datek Mozilli do 31 grudnia' %}
{% set banner_tagline_a = 'Już prawie osiągnęliśmy cel na 2024 rok, ale jeszcze trochę brakuje.' %}
{% set banner_tagline_b = 'Już niedługo mija termin na 2024 rok. Czy możesz przekazać nam datek?' %}
{% set banner_tagline_c = 'Musimy razem stworzyć ruch, który odzyska Internet.' %}
{% set banner_button = 'Wpłać datek' %}
{% elif LANG == "pt-BR" %}
{% set banner_title = 'Doe para a Mozilla no Dia de Doar' %}
{% set banner_tagline = 'Juntos, podemos retomar a internet das big techs. Doe hoje mesmo.' %}
{% set banner_button_a = 'Doe agora' %}
{% set banner_button_b = 'Doe já' %}
{% set banner_button_c = 'Contribua' %}
{% set banner_title = 'Doe para a Mozilla até 31 de dezembro' %}
{% set banner_tagline_a = 'Falta pouco para atingirmos nossa meta para 2024.' %}
{% set banner_tagline_b = 'Nosso prazo para 2024 está quase no fim. Poderia fazer uma doação?' %}
{% set banner_tagline_c = 'Juntos, devemos promover o movimento para recuperar a internet.' %}
{% set banner_button = 'Doe agora' %}
{% else %}
{% set banner_title = 'Donate to Mozilla for Giving Tuesday' %}
{% set banner_tagline = 'Together we can reclaim the internet from Big Tech. Donate now.' %}
{% set banner_button_a = 'Donate' %}
{% set banner_button_b = 'Give now' %}
{% set banner_button_c = 'Contribute' %}
{% set banner_title = 'Donate to Mozilla by Dec 31' %}
{% set banner_tagline_a = 'We’re close to reaching our 2024 goal, but we’re not there yet.' %}
{% set banner_tagline_b = 'We’re quickly approaching our 2024 deadline. Can you donate?' %}
{% set banner_tagline_c = 'Together we must build the movement to reclaim the internet.' %}
{% set banner_button = 'Donate' %}
{% endif %}

{% if variant == "a" %}
{% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-a' %}
{% set banner_button = banner_button_a %}
{% set banner_ga_label = 'Donate' %}
{% set banner_link = 'https://foundation.mozilla.org/?form=eoy-final-a' %}
{% set banner_tagline = banner_tagline_a %}
{% elif variant == "b" %}
{% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-b' %}
{% set banner_button = banner_button_b %}
{% set banner_ga_label = 'Give now' %}
{% set banner_link = 'https://foundation.mozilla.org/?form=eoy-final-b' %}
{% set banner_tagline = banner_tagline_b %}
{% elif variant == "c" %}
{% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-c' %}
{% set banner_button = banner_button_c %}
{% set banner_ga_label = 'Contribute' %}
{% set banner_link = 'https://foundation.mozilla.org/?form=eoy-final-c' %}
{% set banner_tagline = banner_tagline_c %}
{% else %}
{% set banner_button = banner_button_a %}
{% set banner_ga_label = 'Donate' %}
{% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-d' %}
{# GPC/DNT #}
{% set banner_link = 'https://foundation.mozilla.org/?form=eoy-final-d' %}
{% set banner_tagline = banner_tagline_a %}
{% endif %}

{% set banner_ga_label = 'Donate' %}

{% block banner_content %}
<div class="mzp-l-content mzp-t-content-xl">
<div class="c-banner-outter">
<div class="c-banner-inner">
<div class="c-banner-copy">
<h2 class="c-banner-title">{{ banner_title }}</h2>
<h2 class="c-banner-title">{{ banner_title|safe }}</h2>
<p class="c-banner-tagline">{{ banner_tagline }}</p>
<a class="c-banner-button mzp-c-button mzp-t-lg" href="{{ banner_link }}" data-cta-text="{{ banner_ga_label }}">
{{ banner_button }}
Expand All @@ -89,7 +88,7 @@ <h2 class="c-banner-title">{{ banner_title }}</h2>
'media': '(min-width: 688px)',
'srcset': {
'img/banners/fundraiser/eoy-2024-photo-200.png': '200w',
'img/banners/fundraiser/eoy-2024-photo-200.png': '400w',
'img/banners/fundraiser/eoy-2024-photo-400.png': '400w',
}
},
{
Expand Down
20 changes: 11 additions & 9 deletions bedrock/base/templates/includes/banners/pencil-banner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% if not hide_pencil_banner and ftl_has_messages('m24-pencil-banner-donate-by'), %}
{# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
<aside class="m24-pencil-banner" aria-label="{{ ftl('ui-promo-label') }}" data-nosnippet="true">
<div class="m24-pencil-banner-copy">
{% set donate_url = 'href="https://foundation.mozilla.org/?form=eoy-pencil-aa" data-cta-type="link" data-cta-text="donate today"' %}
<p>{{ ftl('m24-pencil-banner-donate-by', donate=donate_url) }}</p>
</div>
<button class="m24-pencil-banner-close" type="button">{{ ftl('ui-close') }}</button>
</aside>
{% if switch('show-pencil-banner') and not hide_pencil_banner %}
{% if ftl_has_messages('m24-pencil-banner-donate-by') %}
{# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
<aside class="m24-pencil-banner" aria-label="{{ ftl('ui-promo-label') }}" data-nosnippet="true">
<div class="m24-pencil-banner-copy">
{% set donate_url = 'href="https://foundation.mozilla.org/?form=eoy-pencil-aa" data-cta-type="link" data-cta-text="donate today"' %}
<p>{{ ftl('m24-pencil-banner-donate-by', donate=donate_url) }}</p>
</div>
<button class="m24-pencil-banner-close" type="button">{{ ftl('ui-close') }}</button>
</aside>
{% endif %}
{% endif %}
1 change: 1 addition & 0 deletions bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% include 'includes/banners/pencil-banner.html' %}
<nav class="m24-navigation-refresh m24-mzp-is-sticky" role="navigation">
<div class="m24-c-navigation-l-content">
<div class="m24-c-navigation-container">
Expand Down
3 changes: 0 additions & 3 deletions bedrock/base/templates/includes/protocol/navigation/navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
#}

{% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
{% if switch('show-pencil-banner') %}
{% include 'includes/banners/pencil-banner.html' %}
{% endif %}
{% include 'includes/protocol/navigation/navigation-refresh.html' %}
{% else %}
{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
Expand Down
28 changes: 23 additions & 5 deletions bedrock/mozorg/templates/mozorg/home/home-m24.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,32 @@

{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}

{% set fundraising_banner_langs = ['en-US', 'en-GB', 'en-CA', 'es-AR', 'es-CL', 'es-ES', 'es-MX', 'de', 'fr', 'it', 'pl', 'pt-BR'] %}
{% set show_fundraising_banner = switch('fundraising-banner-2024eoy') and LANG in fundraising_banner_langs %}

{% block page_css %}
{{ css_bundle('m24-root') }}
{{ css_bundle('m24-base') }}
{% if show_fundraising_banner %}
{{ css_bundle('fundraising-banner') }}
{% endif %}
{% endblock %}

{% block site_header %}
{% with hide_pencil_banner=show_fundraising_banner %}
{% include 'includes/protocol/navigation/navigation.html' %}
{% endwith %}
{% endblock %}

{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=m24-homepage' %}

{% block content %}
{% block page_banner %}
{% if show_fundraising_banner %}
{% include 'includes/banners/fundraiser.html' %}
{% endif %}
{% endblock %}

{% block content %}
<main>

{% include 'mozorg/home/includes/m24/hero.html'%}
Expand All @@ -55,8 +68,13 @@
{% endwith %}
{% endblock %}

{% if switch('m24-hero-animation') %}
{% block js %}

{% block js %}
{% if switch('m24-hero-animation') %}
{{ js_bundle('m24-animation') }}
{% endblock %}
{% endif %}
{% endif %}
{% if show_fundraising_banner %}
{{ js_bundle('fundraising-banner-experiment') }}
{{ js_bundle('fundraising-banner') }}
{% endif %}
{% endblock %}
73 changes: 52 additions & 21 deletions media/css/base/banners/fundraiser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,97 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import 'includes/basic';
@use '../../m24/vars/lib' as *;

.c-banner-fundraising {
background: $color-green-20;
background: $m24-color-light-green;
color: $color-black;

.mzp-l-content {
padding-top: $spacing-md;
padding-bottom: $spacing-md;

.c-banner-outter {
@include container;
padding: $spacer-lg $container-padding;
}

.c-banner-title {
color: $color-black;
display: block;
font-size: 24px;
line-height: 1;
margin-bottom: 12px;
width: auto;
margin-bottom: $spacing-sm;
@include text-display-md;
}

.c-banner-tagline {
margin-bottom: $spacing-md;
@include text-body-md;
margin-bottom: 16px;
font-size: 16px;
}

.c-banner-media {
display: none;
}

.c-banner-button {
background-color: $color-green-80;
border-color: $color-green-80;
background-color: $m24-color-black;
border-color: $m24-color-black;
border-radius: 0;
color: $m24-color-white;
margin: 0;
width: 100%;
@include text-body-lg;
font-size: 18px;

&::after {
@include bidi(((content, ' ♥', '♥ '),));
}

&:hover,
&:focus {
background-color: $color-green-90;
border-color: $color-green-90;
color: $color-white;
background-color: $m24-color-white;
border-color: $m24-color-black;
color: $m24-color-black;
}
}

// Close button
.c-banner-close {
background-image: url('#{$image-path}/icons/close.svg');
@include image-replaced;
@include bidi(((right, $spacing-sm, auto), (left, auto, $spacing-sm)));
background: transparent url('/media/img/icons/m24-small/close.svg') center center / 20px 20px no-repeat;
border: $border-width solid transparent;
cursor: pointer;
height: 24px;
padding: var(--spacer-xs);
position: absolute;
top: $spacer-sm;
transition: border-color $fast $bezier;
width: 24px;
z-index: 1;
left: 50%;

&:hover,
&:focus {
border-color: $m24-color-green;
}
}


@media #{$mq-md} {
.c-banner-inner {
align-items: center;
display: flex;
flex-flow: row nowrap;
gap: 48px;
justify-content: space-between;
max-width: grid(10);
margin: 0 auto;
}

.c-banner-copy {
flex: 1 1 auto;
}

.c-banner-tagline {
@include text-body-lg;
font-size: 18px;
}

picture {
Expand All @@ -87,4 +108,14 @@ $image-path: '/media/protocol/img';
width: auto;
}
}

@media #{$mq-xl} {
.c-banner-title {
font-size: 48px;
}

.c-banner-tagline {
font-size: 24px;
}
}
}
Binary file modified media/img/banners/fundraiser/eoy-2024-photo-200.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified media/img/banners/fundraiser/eoy-2024-photo-400.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions media/js/base/banners/fundraiser-experiment.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,20 @@ const init = () => {
if (href.indexOf('v=a') !== -1) {
window.dataLayer.push({
event: 'experiment_view',
id: 'home-fundraiser-giving-tues-2024',
variant: 'home-fundraiser-giving-tues-2024-va'
id: 'home-fundraiser-eoy-2024',
variant: 'home-fundraiser-eoy-2024-va'
});
} else if (href.indexOf('v=b') !== -1) {
window.dataLayer.push({
event: 'experiment_view',
id: 'home-fundraiser-giving-tues-2024',
variant: 'home-fundraiser-giving-tues-2024-vb'
id: 'home-fundraiser-eoy-2024',
variant: 'home-fundraiser-eoy-2024-vb'
});
} else if (href.indexOf('v=c') !== -1) {
window.dataLayer.push({
event: 'experiment_view',
id: 'home-fundraiser-giving-tues-2024',
variant: 'home-fundraiser-giving-tues-2024-vc'
id: 'home-fundraiser-eoy-2024',
variant: 'home-fundraiser-eoy-2024-vc'
});
} else if (TrafficCop) {
if (isApprovedToRun()) {
Expand Down

0 comments on commit e616e31

Please sign in to comment.