Skip to content

E
edx-platform
Commit 7d184578 by Matthew Piatetsky
Options

move course upsell

parent a4fa04ec
Showing with 63 additions and 235 deletions
lms/static/sass/features/_course-upgrade-message.scss
/* /*
NOTE: If you make significant changes to the design, remember to update the Segment event properties and change NOTE: If you make significant changes to the design, remember to update the Segment event properties and change
the creative property. This will allow us to better track individual performance of each style of the message. the creative property. This will allow us to better track individual performance of each style of the message.
Search for the courseware_verified_certificate_upsell promotion ID. Search for the courseware_verified_certificate_upsell promotion ID.
*/ */
// Expanded upgrade message .section.section-upgrade {
.vc-message { border-left: solid 1px #d9d9d9;
background: $lms-hero-color; border-bottom: solid 1px #d9d9d9;
color: $white; border-right: solid 1px #d9d9d9;
padding: $baseline; border-top: 5px solid #008100;
position: relative; padding: 20px;
margin: 0 0 $baseline;
// CSS animation for smooth height transition
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
&::after {
content: "";
display: table;
clear: both;
}
// Message copy
.vc-title {
font-size: 1.25rem;
font-weight: $font-weight-light;
margin-bottom: 1rem;
width: calc(100% - 70px);
}
.vc-selling-points {
@include padding-left(0);
font-size: 0.825rem;
margin: 1rem 0;
display: table;
> .vc-selling-point {
list-style: none;
display: table-row;
&::before {
content: "\2022";
display: table-cell;
@include padding-right($baseline/2);
}
&::after {
content: "";
display: table-row;
height: 0.25rem;
}
}
}
// Upgrade button
.btn-upgrade {
color: theme-color("inverse");
background-color: theme-color("purchase");
font-size: $font-size-base;
-webkit-transition: $btn-transition;
transition: $btn-transition;
&:hover {
background-color: theme-color("success");
}
}
// Show/hide button
.vc-toggle {
@include right($baseline/2);
top: $baseline/2;
position: absolute;
color: theme-color("inverse");
&:hover {
cursor: pointer;
text-decoration: none;
color: theme-color("light");
}
}
// Cert image
.vc-hero {
@include float(right);
@include padding-left(1rem);
clear: both;
img {
@include float(right);
clear: both;
width: 250px;
}
}
} }
// Collapsed upgrade message .section.section-upgrade .btn-link {
.vc-message.polite { font-weight: normal;
@include padding($baseline/2, 0, $baseline/2, $baseline); }
padding-top: $baseline/2;
padding-bottom: $baseline/2;
min-height: 46px;
display: flex;
align-items: center;
.vc-title {
@include margin-right(auto);
margin: 0;
flex-grow: 1;
}
.vc-cta {
flex-grow: 1;
}
.vc-toggle {
@include right(0);
margin: 0 $baseline/2; .section.section-upgrade .btn-upgrade {
order: 99; background-color: #008100;
position: relative; border-color: #008100;
white-space: nowrap; }
width: $baseline*6;
top: 0;
}
.vc-fade:not(.vc-polite-only) { .section-upgrade .upgrade-container {
display: none; float: right;
} text-align: center;
}
@include media-breakpoint-down(sm) { .section.section-upgrade p {
flex-flow: row wrap; margin: 0.5em 0;
}
.vc-title { .btn-brand {
width: auto; color: white !important;
margin-bottom: $baseline/2;
}
}
} }
@media (max-width: $grid-breakpoints-sm) { .section.section-upgrade img {
.vc-message .vc-hero { width: 43%;
display: none !important;
}
} }
openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
...@@ -29,30 +29,6 @@ ...@@ -29,30 +29,6 @@
<div class="page-content"> <div class="page-content">
<div class="layout layout-1t2t"> <div class="layout layout-1t2t">
<main class="layout-col layout-col-b"> <main class="layout-col layout-col-b">
<div class="section">
<div class="vc-message tex2jax_ignore" role="group" aria-labelledby="vc-title" tabindex="-1" style="display: none;">
<h3 class="vc-title vc-fade vc-polite-only">Pursue a verified certificate</h3>
<button class="vc-toggle vc-fade vc-polite-only btn-link" type="button" aria-controls="moreinfo"
aria-expanded="true" aria-label="Show/Hide">Show less
</button>
<div class="vc-hero vc-fade">
<img src="img/sample-certificate.png"
alt="Sample verified certificate with your name, the course title, the logo of the institution and the signatures of the instructors for this course."/>
</div>
<ul class="vc-selling-points vc-fade">
<li class="vc-selling-point">Official proof of completion</li>
<li class="vc-selling-point">Easily shareable certificate</li>
<li class="vc-selling-point">Proven motivator to complete the course</li>
<li class="vc-selling-point">Certificate purchases help us continue to offer free courses</li>
</ul>
<div class="vc-cta vc-fade vc-polite-only">
<a class="btn btn-upgrade" data-creative="original_hero" data-position="hero" href="#">Upgrade ($100)</a>
</div>
</div>
</div>
<div class="section section-dates"> <div class="section section-dates">
<div class="welcome-message"> <div class="welcome-message">
<div class="dismiss-message"> <div class="dismiss-message">
...@@ -110,6 +86,21 @@ ...@@ -110,6 +86,21 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="section section-upgrade">
<h3 class="hd hd-6">Pursue a verified certificate</h3>
<div class="upgrade-container">
<p>
<a class="btn-brand btn-upgrade"
href="${upgrade_url}"
data-creative="variant_b"
data-position="sidebar_hero">
Upgrade $49
</a>
</p>
<p><button class="btn-link btn-small promo-learn-more">Learn More</button></p>
</div>
<img src="https://courses.edx.org/static/images/edx-verified-mini-cert.png" alt="">
</div>
<div class="section section-dates"> <div class="section section-dates">
<h3 class="hd hd-6 section-title handouts-header">Important Course Dates</h3> <h3 class="hd hd-6 section-title handouts-header">Important Course Dates</h3>
<div class="date-summary-container"> <div class="date-summary-container">
......
openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js
...@@ -67,37 +67,4 @@ describe('Course Home factory', () => { ...@@ -67,37 +67,4 @@ describe('Course Home factory', () => {
expect(Logger.log).toHaveBeenCalledWith('edx.course.enrollment.upgrade.clicked', { location: 'hero' }); expect(Logger.log).toHaveBeenCalledWith('edx.course.enrollment.upgrade.clicked', { location: 'hero' });
}); });
}); });
describe('upgrade message display toggle', () => {
let $message;
let $toggle;
beforeEach(() => {
$.fx.off = true;
$message = $('.vc-message');
$toggle = $('.vc-toggle', $message);
expect($message.length).toEqual(1);
expect($toggle.length).toEqual(1);
});
it('hides/shows the message and writes/removes a key from local storage', () => {
// NOTE (CCB): Ideally this should be two tests--one for collapse, another for expansion.
// After a couple hours I have been unable to make these two tests pass, probably due to
// issues with the initial state of local storage.
expect($message.is(':visible')).toBeTruthy();
expect($message.hasClass('polite')).toBeFalsy();
expect($toggle.text().trim()).toEqual('Show less');
$toggle.click();
expect($message.hasClass('polite')).toBeTruthy();
expect($toggle.text().trim()).toEqual('Show more');
expect(window.localStorage.getItem(home.msgStateStorageKey)).toEqual('true');
$toggle.click();
expect($message.hasClass('polite')).toBeFalsy();
expect($toggle.text().trim()).toEqual('Show less');
expect(window.localStorage.getItem(home.msgStateStorageKey)).toBeNull();
});
});
}); });
openedx/features/course_experience/templates/course_experience/course-home-fragment.html
...@@ -58,40 +58,6 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -58,40 +58,6 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
</header> </header>
<div class="page-content"> <div class="page-content">
<main class="page-content-main"> <main class="page-content-main">
% if upgrade_url and upgrade_price:
<div class="section">
<div class="vc-message tex2jax_ignore" role="group" aria-labelledby="vc-title" tabindex="-1" style="display: none;">
<h3 class="vc-title vc-fade vc-polite-only">Pursue a verified certificate</h3>
<button class="vc-toggle vc-fade vc-polite-only btn-link" type="button" aria-controls="moreinfo"
aria-expanded="true" aria-label="${_("Show/Hide")}">
${_("Show less")}
</button>
<div class="vc-hero vc-fade">
<img src="${static.url('course_experience/images/verified-cert.png')}"
alt="${_("Sample verified certificate with your name, the course title, the logo of the institution and the signatures of the instructors for this course.")}"/>
</div>
<ul class="vc-selling-points vc-fade">
<li class="vc-selling-point">${_("Official proof of completion")}</li>
<li class="vc-selling-point">${_("Easily shareable certificate")}</li>
<li class="vc-selling-point">${_("Proven motivator to complete the course")}</li>
<li class="vc-selling-point">${_("Certificate purchases help us continue to offer free courses")}</li>
</ul>
<div class="vc-cta vc-fade vc-polite-only">
<a class="btn btn-upgrade"
href="${ upgrade_url }"
data-creative="hero_matthew_smith"
data-position="hero">${_("Upgrade ({price})").format(price=upgrade_price)}</a>
</div>
</div>
</div>
% endif
% if course_home_message_fragment: % if course_home_message_fragment:
${HTML(course_home_message_fragment.body_html())} ${HTML(course_home_message_fragment.body_html())}
% endif % endif
...@@ -147,6 +113,23 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -147,6 +113,23 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
</ul> </ul>
</div> </div>
% endif % endif
% if upgrade_url and upgrade_price:
<div class="section section-upgrade">
<h3 class="hd hd-6">Pursue a verified certificate</h3>
<div class="upgrade-container">
<p>
<a class="btn-brand btn-upgrade"
href="${upgrade_url}"
data-creative="variant_b"
data-position="sidebar_hero">
${_("Upgrade ({price})").format(price=upgrade_price)}
</a>
</p>
<p><button class="btn-link btn-small promo-learn-more">${_('Learn More')}</button></p>
</div>
<img src="https://courses.edx.org/static/images/edx-verified-mini-cert.png" alt="">
</div>
% endif
% if dates_fragment: % if dates_fragment:
<div class="section section-dates"> <div class="section section-dates">
${HTML(dates_fragment.body_html())} ${HTML(dates_fragment.body_html())}
......
openedx/features/course_experience/tests/views/test_course_home.py
...@@ -512,11 +512,11 @@ class CourseHomeFragmentViewTests(ModuleStoreTestCase): ...@@ -512,11 +512,11 @@ class CourseHomeFragmentViewTests(ModuleStoreTestCase):
def assert_upgrade_message_not_displayed(self): def assert_upgrade_message_not_displayed(self):
response = self.client.get(self.url) response = self.client.get(self.url)
self.assertNotIn('vc-message', response.content) self.assertNotIn('section-upgrade', response.content)
def assert_upgrade_message_displayed(self): def assert_upgrade_message_displayed(self):
response = self.client.get(self.url) response = self.client.get(self.url)
self.assertIn('vc-message', response.content) self.assertIn('section-upgrade', response.content)
url = EcommerceService().get_checkout_page_url(self.verified_mode.sku) url = EcommerceService().get_checkout_page_url(self.verified_mode.sku)
self.assertIn('<a class="btn btn-upgrade"', response.content) self.assertIn('<a class="btn btn-upgrade"', response.content)
self.assertIn(url, response.content) self.assertIn(url, response.content)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment