Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Conclude form design change AB test #1419

Merged
merged 1 commit into from Jan 7, 2019
Merged

Conclude form design change AB test #1419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 11 additions & 10 deletions app/config/archived_campaigns.yaml
View file
Open in desktop
@@ -1,16 +1,17 @@
# Move unused entries from campaigns.yml here

example:
description: Example campaign which was never run
reference: https://phabricator.wikimedia.org/T123456789
start: "2000-01-01"
end: "2099-12-31"
donation_form_design:
description: Test design changes to donation form
reference: "https://phabricator.wikimedia.org/T212203"
start: "2018-12-21 20:00:00"
end: "2019-01-07 23:00:00"
active: true
buckets:
- "test_bucket_01"
- "test_bucket_02"
default_bucket: "test_bucket_01"
url_key: sample_url_key
active: false
- default
- design_change
default_bucket: default
url_key: dsn


usability:
description: Change the user experience on the donation page by removing immediate scrolling, some subheaders and moving newsletter opt-in
Expand Down
4 changes: 0 additions & 4 deletions app/config/campaigns.dev.yml
View file
Open in desktop
Expand Up @@ -16,7 +16,3 @@ membership_call_to_action:
amount_options:
active: true
start: "2018-12-01"

donation_form_design:
start: "2018-12-18"
active: true
3 changes: 0 additions & 3 deletions app/config/campaigns.test.yml
View file
Open in desktop
Expand Up @@ -16,6 +16,3 @@ skins:

donation_address:
active: false

donation_form_design:
active: false
12 changes: 0 additions & 12 deletions app/config/campaigns.yml
View file
Open in desktop
Expand Up @@ -72,15 +72,3 @@ amount_options:
default_bucket: "5to300"
url_key: amtopt
active: true

donation_form_design:
description: Test design changes to donation form
reference: "https://phabricator.wikimedia.org/T212203"
start: "2018-12-21 20:00:00"
end: "2019-01-07 23:00:00"
active: true
buckets:
- default
- design_change
default_bucket: default
url_key: dsn
4 changes: 1 addition & 3 deletions skins/cat17/package.json
View file
Open in desktop
Expand Up @@ -18,9 +18,7 @@
"cs": "eslint --ext .js,.vue src/app faq-page use-of-funds",
"ci": "npm-run-all --parallel cs test build-assets",
"build-assets": "npm-run-all clean --parallel webpack-build-assets build-css build-faq build-funds",
"build-sass": "npm-run-all --parallel --parallel build-sass-main build-sass-variant",
"build-sass-main": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/main.scss",
"build-sass-variant": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/variant.scss",
"build-sass": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/main.scss",
"optimize-css": "postcss -r web/css",
"build-css": "npm run build-sass && npm run optimize-css",
"webpack-build-assets": "webpack --env production",
Expand Down
8 changes: 2 additions & 6 deletions skins/cat17/src/sass/common/_base.scss
View file
Open in desktop
Expand Up @@ -38,12 +38,8 @@ a {
}

h1, .h1 {
font-size: 32px;
line-height: 47px;
@include bkp(sm) {
font-size: 24px;
line-height: 36px;
}
font-size: 16px;
line-height: 32px;
}

h2, .h2 {
Expand Down
8 changes: 8 additions & 0 deletions skins/cat17/src/sass/components/_forms.scss
View file
Open in desktop
Expand Up @@ -58,6 +58,14 @@ input[type=submit] {
border-bottom: themed('border2pxfieldSelected');
}
}
&:after {
content: $icon-done;
position: absolute;
right: 12px;
top: 10px;
font-family: 'icomoonwikimedia';
font-size: 20px;
}
}
&.invalid {
.error-text {
Expand Down
33 changes: 0 additions & 33 deletions skins/cat17/src/sass/variant.scss
View file
Open in desktop

This file was deleted.

10 changes: 4 additions & 6 deletions skins/cat17/src/scripts/donationForm.js
View file
Open in desktop
Expand Up @@ -327,12 +327,10 @@ $( function () {
// Add scroll behaviors to links/input elements

WMDE.Scrolling.addScrollToLinkAnchors( $( 'a[href^="#"]' ), scroller);
var featureToggleScrollingForm = $('#form-donation').data( 'feature-toggle-scroll-form' );
if ( featureToggleScrollingForm ) {
WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="periode"]' ), $( '#recurrence' ), scroller );
WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="addressType"]' ), $( '#type-donor' ), scroller );
WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="zahlweise"]' ), $( '#donation-payment' ), scroller );
}

WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="periode"]' ), $( '#recurrence' ), scroller );
WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="addressType"]' ), $( '#type-donor' ), scroller );
WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="zahlweise"]' ), $( '#donation-payment' ), scroller );

var bankDataValidator = WMDE.FormValidation.createBankDataValidator(
initData.data( 'validate-iban-url' ),
Expand Down
3 changes: 1 addition & 2 deletions skins/cat17/templates/Donation_Form.html.twig
View file
Open in desktop
Expand Up @@ -20,8 +20,7 @@
</div>
</div>

<form id="form-donation" class="main-form" action="{$ basepath $}/donation/add" method="post" novalidate
data-feature-toggle-scroll-form="{$ featureToggle.formScrolling | json_encode $}">
<form id="form-donation" class="main-form" action="{$ basepath $}/donation/add" method="post" novalidate>
<div class="container">
<section class="state-bar state-overview col-xs-12 ">
<div class="wrap-bar container ">
Expand Down
23 changes: 18 additions & 5 deletions skins/cat17/templates/partials/Page_Header.html.twig
View file
Open in desktop
Expand Up @@ -20,13 +20,26 @@
</div>
<nav class="menu menu-main">
<ul class="list-unstyled list-inline">
{% for menu_item in main_menu %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rather liked the menu array constructed in PHP and rendered in the template as a loop. IMHO it made the template much cleaner added uniformity to the markup.
You could make the argument that the menu is skin-specific and does not belong in the PHP code. In that case I'd be fine with just reverting the template, as having "skin-specific template data" would be overkill.

If you revert the template, at least use the path function for the URL (with the route name) instead of hard-coding them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed, since we don't really have a good place to place the main_menu items right now, we're leaving the template as is (with the addition of the path function).

<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == menu_item.id %} selected{% endif %}">
<a href="{$ menu_item.url $}">
<span class="text">{$ menu_item.label | trans $}</span><i class="icon-keyboard_arrow_right"></i>
<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'comments-list' %} selected{% endif %}">
<a href="{$ path( 'list-comments.html' ) $}">
<span class="text">Spendenkommentare</span><i class="icon-keyboard_arrow_right"></i>
</a>
</li>
<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'faq' %} selected{% endif %}">
<a href="{$ path( 'faq' ) $}">
<span class="text">Häufige Fragen</span><i class="icon-keyboard_arrow_right"></i>
</a>
</li>
<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'use_of_resources' %} selected{% endif %}">
<a href="{$ path( 'use-of-funds' ) $}">
<span class="text">Mittelverwendung</span><i class="icon-keyboard_arrow_right"></i>
</a>
</li>
<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'donation' %} selected{% endif %}">
<a href="{$ path( 'show-donation-form' ) $}">
<span class="text">Spenden</span><i class="icon-keyboard_arrow_right"></i>
</a>
</li>
{% endfor %}
<li class="col-xs-12 col-sm-6 col-sm-offset-6 no-gutter clearfix">
<div class="other-info other-info-lateral">
<div class="other-text">
Expand Down
69 changes: 0 additions & 69 deletions src/Factories/ChoiceFactory.php
View file
Open in desktop
Expand Up @@ -71,75 +71,6 @@ public function getAmountOption(): array {
throw new UnknownChoiceDefinition( 'Amount option selection configuration failure.' );
}

public function getMainCss(): string {
if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
return '/skins/cat17/css/variant.css';
} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
return '/skins/cat17/css/main.css';
}
throw new UnknownChoiceDefinition( 'Design selection failure.' );
}

public function getMainMenuItems( UrlGenerator $urlGenerator ): array {
if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
return [
[
'url' => $urlGenerator->generateRelativeUrl( 'list-comments.html' ),
'id' => 'comments-list',
'label' => 'menu_item_donation_comments'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'faq' ),
'id' => 'faq',
'label' => 'menu_item_faq'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'use-of-funds' ),
'id' => 'use_of_resources',
'label' => 'menu_item_use_of_resources'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'show-donation-form' ),
'id' => 'donation',
'label' => 'menu_item_donate'
],
];
} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
return [
[
'url' => $urlGenerator->generateRelativeUrl( 'list-comments.html' ),
'id' => 'comments-list',
'label' => 'menu_item_donation_comments'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'faq' ),
'id' => 'faq',
'label' => 'menu_item_faq'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'use-of-funds' ),
'id' => 'use_of_resources',
'label' => 'menu_item_use_of_resources'
],
[
'url' => $urlGenerator->generateRelativeUrl( 'page', ['pageName' => 'Spendenquittung'] ),
'id' => 'donation_receipt',
'label' => 'menu_item_donation_receipt'
],
];
}
throw new UnknownChoiceDefinition( 'Design selection failure.' );
}

public function isFormScrollingActive(): bool {
if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
return false;
} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
return true;
}
throw new UnknownChoiceDefinition( 'Design selection failure.' );
}

private function getSkinDirectory( string $skin ): string {
return 'skins/' . $skin . '/templates';
}
Expand Down
7 changes: 1 addition & 6 deletions src/Factories/FunFunFactory.php
View file
Open in desktop
Expand Up @@ -712,9 +712,7 @@ private function getDefaultTwigVariables(): array {
return [
'honorifics' => $this->getHonorifics()->getList(),
'piwik' => $this->config['piwik'],
'locale' => $this->config['locale'],
'main_css' => $this->getChoiceFactory()->getMainCss(),
'main_menu' => $this->getChoiceFactory()->getMainMenuItems( $this->getUrlGenerator() )
'locale' => $this->config['locale']
];
}

Expand Down Expand Up @@ -1362,9 +1360,6 @@ private function getDonationFormTemplate(): TwigTemplate {
'paymentTypes' => $this->getPaymentTypesSettings()->getEnabledForDonation(),
'presetAmounts' => $this->getPresetAmountsSettings( 'donations' ),
'messages' => $this->getMessages(),
'featureToggle' => [
'formScrolling' => $this->getChoiceFactory()->isFormScrollingActive()
]
]
);
}
Expand Down