diff --git a/bedrock/base/templates/includes/banners/fundraiser.html b/bedrock/base/templates/includes/banners/fundraiser.html new file mode 100644 index 00000000000..305e14f01b7 --- /dev/null +++ b/bedrock/base/templates/includes/banners/fundraiser.html @@ -0,0 +1,65 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + 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/. +#} + +{% extends 'includes/banners/basic.html' %} + +{% block banner_id %}fundraising-banner{% endblock %} + +{% block banner_class %}c-banner-fundraising{% endblock %} + +{% 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 = 'Donate' %} +{% set banner_ga_label = 'Donate' %} +{% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner' %} + +{% if variant == "a" %} + {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-a' %} +{% elif variant == "b" %} + {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-b' %} + {% set banner_button = 'Give now' %} + {% set banner_ga_label = 'Give now' %} +{% elif variant == "c" %} + {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-c' %} + {% set banner_button = 'Contribute' %} + {% set banner_ga_label = 'Contribute' %} +{% endif %} + +{% block banner_content %} +
+ {{ picture( + url='img/banners/fundraiser/eoy-2024-photo-200.png', + sources=[ + { + 'media': '(min-width: 688px)', + 'srcset': { + 'img/banners/fundraiser/eoy-2024-photo-200.png': '200w', + 'img/banners/fundraiser/eoy-2024-photo-200.png': '400w', + } + }, + { + 'media': '(max-width: 687px)', + 'srcset': { + 'img/placeholder.png': 'default' + } + } + ], + optional_attributes={ + 'height': '200', + 'width': '200', + 'class': 'c-banner-media' + } + ) }} + +
+

{{ banner_title }}

+

{{ banner_tagline }}

+ + {{ banner_button }} + +
+
+{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/home/home-new.html b/bedrock/mozorg/templates/mozorg/home/home-new.html index 269e756cc90..d88be79ab25 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-new.html +++ b/bedrock/mozorg/templates/mozorg/home/home-new.html @@ -22,8 +22,15 @@ {% block page_desc %}{{ ftl('home-did-you-know-mozilla-the-maker') }}{% endblock %} +{% set show_fundraising_banner = switch('fundraising-banner-giving2024') and LANG in ['en-US', 'en-GB', 'en-CA', 'de', 'fr'] %} {% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %} +{% block experiments %} + {% if switch('fundraising-banner-giving2024') %} + {{ js_bundle('fundraising-banner-experiment') }} + {% endif %} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('protocol-picto') }} @@ -38,13 +45,17 @@ {{ css_bundle('ctd-promo') }} {% endif %} - {% if show_firefox_app_store_banner %} + {% if show_fundraising_banner %} + {{ css_bundle('fundraising-banner') }} + {% elif show_firefox_app_store_banner %} {{ css_bundle('firefox-app-store-banner') }} {% endif %} {% endblock %} {% block page_banner %} - {% if show_firefox_app_store_banner %} + {% if show_fundraising_banner %} + {% include 'includes/banners/fundraiser.html' %} + {% elif show_firefox_app_store_banner %} {% include 'includes/banners/mobile/firefox-app-store.html' %} {% endif %} {% endblock %} @@ -316,7 +327,9 @@

{{ ftl('newsletter-form-join-the-community', fallback='newsletter-form-get-f {% block js %} {{ js_bundle('newsletter') }} - {% if show_firefox_app_store_banner %} + {% if show_fundraising_banner %} + {{ js_bundle('fundraising-banner') }} + {% elif show_firefox_app_store_banner %} {{ js_bundle('firefox-app-store-banner') }} {% endif %} {% endblock %} diff --git a/bedrock/mozorg/views.py b/bedrock/mozorg/views.py index a6c951eb711..2211edf867d 100644 --- a/bedrock/mozorg/views.py +++ b/bedrock/mozorg/views.py @@ -133,9 +133,19 @@ class HomeView(L10nTemplateView): ftl_files_map = {old_template_name: ["mozorg/home"], template_name: ["mozorg/home-new"]} + # place expected ?v= values in this list + variations = ["a", "b", "c"] + def get_context_data(self, **kwargs): ctx = super().get_context_data(**kwargs) ctx.update({"is_homepage": True}) + variant = self.request.GET.get("v", None) + + # ensure variant matches pre-defined value + if variant not in self.variations: + variant = None + + ctx["variant"] = variant return ctx def get_template_names(self): diff --git a/media/css/base/banners/fundraiser.scss b/media/css/base/banners/fundraiser.scss new file mode 100644 index 00000000000..600bb4e392a --- /dev/null +++ b/media/css/base/banners/fundraiser.scss @@ -0,0 +1,71 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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'; + +.c-banner-fundraising { + background: $color-green-20; + color: $color-black; + + .mzp-l-content { + padding-top: $spacing-md; + padding-bottom: $spacing-md; + } + + .c-banner-title { + color: $color-black; + display: block; + width: auto; + margin-bottom: $spacing-sm; + @include text-display-md; + } + + .c-banner-tagline { + margin-bottom: $spacing-md; + @include text-body-md; + } + + .c-banner-media { + display: none; + } + + .c-banner-button { + background-color: $color-green-80; + border-color: $color-green-80; + margin: 0; + width: 100%; + @include text-body-lg; + + &::after { + @include bidi(((content, ' ♥', '♥ '),)); + } + } + + .c-banner-close { + background-image: url('#{$image-path}/icons/close.svg'); + } + + @media #{$mq-md} { + .c-banner-tagline { + @include text-body-lg; + } + + .c-banner-media { + display: block; + @include bidi(((float, right, left),)); + } + + .c-banner-copy { + @include bidi(((padding-right, 280px, padding-left, 0),)); + } + + .c-banner-button { + width: auto; + } + } +} diff --git a/media/img/banners/fundraiser/eoy-2024-photo-200.png b/media/img/banners/fundraiser/eoy-2024-photo-200.png new file mode 100644 index 00000000000..f46be8510c3 Binary files /dev/null and b/media/img/banners/fundraiser/eoy-2024-photo-200.png differ diff --git a/media/img/banners/fundraiser/eoy-2024-photo-400.png b/media/img/banners/fundraiser/eoy-2024-photo-400.png new file mode 100644 index 00000000000..ad039d515c8 Binary files /dev/null and b/media/img/banners/fundraiser/eoy-2024-photo-400.png differ diff --git a/media/js/base/banners/fundraiser-experiment.es6.js b/media/js/base/banners/fundraiser-experiment.es6.js new file mode 100644 index 00000000000..7e84ba46cad --- /dev/null +++ b/media/js/base/banners/fundraiser-experiment.es6.js @@ -0,0 +1,49 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * 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/. + */ + +import TrafficCop from '@mozmeao/trafficcop'; +import { isApprovedToRun } from '../experiment-utils.es6'; + +const href = window.location.href; + +if (typeof window.dataLayer === 'undefined') { + window.dataLayer = []; +} + +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' + }); + } 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' + }); + } 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' + }); + } else if (TrafficCop) { + if (isApprovedToRun()) { + const cop = new TrafficCop({ + variations: { + 'v=a': 33, + 'v=b': 33, + 'v=c': 33 + } + }); + cop.init(); + } + } +}; + +init(); diff --git a/media/js/base/banners/fundraiser.es6.js b/media/js/base/banners/fundraiser.es6.js new file mode 100644 index 00000000000..10afa070d7b --- /dev/null +++ b/media/js/base/banners/fundraiser.es6.js @@ -0,0 +1,13 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * 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/. + */ + +import MozBanner from './mozilla-banner.es6'; + +function onLoad() { + MozBanner.init('fundraising-banner', true); +} + +window.Mozilla.run(onLoad); diff --git a/media/static-bundles.json b/media/static-bundles.json index f86ce0fd5b1..37f2b56dd41 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -201,6 +201,12 @@ ], "name": "home-new" }, + { + "files": [ + "css/base/banners/fundraiser.scss" + ], + "name": "fundraising-banner" + }, { "files": [ "css/mozorg/home/includes/monitor-banner.scss" @@ -1807,6 +1813,18 @@ "js/firefox/share-page.es6.js" ], "name": "firefox_share" + }, + { + "files": [ + "js/base/banners/fundraiser.es6.js" + ], + "name": "fundraising-banner" + }, + { + "files": [ + "js/base/banners/fundraiser-experiment.es6.js" + ], + "name": "fundraising-banner-experiment" } ] }