Skip to content

E
ecommerce
Commit c605f62a by tasawernawaz
Options

Merge pull request #202 from edx/tasawer/story/ecom-1881-update-design-of-checkout-page 

ECOM-1881 backbone view added for showing provider details on checkout page.
parents 96e2f77d 9983b3a7
Showing with 211 additions and 56 deletions
ecommerce/credit/views.py
...@@ -37,14 +37,21 @@ class Checkout(TemplateView): ...@@ -37,14 +37,21 @@ class Checkout(TemplateView):
else: else:
processors_dict[processor] = 'Checkout with {}'.format(processor) processors_dict[processor] = 'Checkout with {}'.format(processor)
credit_seats = [
seat for seat in course.seat_products if seat.attr.certificate_type == self.CREDIT_MODE
]
provider_ids = None
if credit_seats:
provider_ids = ",".join([seat.attr.credit_provider for seat in credit_seats if seat.attr.credit_provider])
context.update({ context.update({
'request': self.request, 'request': self.request,
'user': self.request.user, 'user': self.request.user,
'course': course, 'course': course,
'payment_processors': processors_dict, 'payment_processors': processors_dict,
'credit_seats': [ 'credit_seats': credit_seats,
seat for seat in course.seat_products if seat.attr.certificate_type == self.CREDIT_MODE 'lms_url_root': settings.LMS_URL_ROOT,
], 'providers_ids': provider_ids,
'analytics_data': json.dumps({ 'analytics_data': json.dumps({
'course': { 'course': {
'courseId': course.id 'courseId': course.id
......
ecommerce/static/js/pages/credit_checkout.js
...@@ -7,12 +7,17 @@ require([ ...@@ -7,12 +7,17 @@ require([
'js/views/clickable-view', 'js/views/clickable-view',
'js/views/analytics_view', 'js/views/analytics_view',
'js/views/payment_button_view', 'js/views/payment_button_view',
'js/utils/utils' 'js/utils/utils',
'js/views/provider_view'
], ],
function( $,Backbone, UserModel, TrackingModel, CourseModel, ClickableView, AnalyticsView, PaymentButtonView, Utils ) { function( $,Backbone, UserModel, TrackingModel, CourseModel, ClickableView, AnalyticsView, PaymentButtonView, Utils, ProviderView ) {
new PaymentButtonView({ new PaymentButtonView({
el: $( '#payment-buttons') el: $( '#payment-buttons' )
});
new ProviderView({
el: $( '.provider-details' )
}); });
var courseModel = new CourseModel(), var courseModel = new CourseModel(),
......
ecommerce/static/js/views/provider_view.js 0 → 100644
define([
'jquery',
'underscore',
'backbone'
],
function( $, _, Backbone ) {
return Backbone.View.extend({
initialize: function() {
this.template = _.template($('#provider-details-tpl').text());
this.getProviders();
this.checkEligibility();
},
getProviders: function () {
var providersIds = this.$el[0].dataset.providersIds;
var url = lmsRootUrl + '/api/credit/v1/providers/?provider_id=' + providersIds;
var self = this;
$.ajax({
url: url,
method: 'GET',
success: function(response) {
if (response.length) {
var html = self.template(response[0]); //currently we are assuming only one provider
self.$el.html(html);
self.toggleProviderContent(true);
} else {
self.toggleProviderContent(false);
}
},
error: function() {
self.toggleProviderContent(false);
}
})
},
checkEligibility: function () {
var $courseDetails = $("#course-name");
var username = $courseDetails.data("username");
var courseKey = $courseDetails.data("course_key");
var url = lmsRootUrl + '/api/credit/v1/eligibility/?username=' + username + '&course_key=' + courseKey;
var self = this;
$.ajax({
url: url,
method: 'GET',
success: function(response) {
if (response.length) {
var deadline = new Date(response[0]["deadline"]);
var formattedDate = deadline.getMonth() + "/" + deadline.getDay() + "/" + deadline.getFullYear();
$(".eligibility-details").find(".deadline-date").text(formattedDate);
self.toggleProviderContent(true);
} else {
self.toggleProviderContent(false);
}
},
error: function() {
self.toggleProviderContent(false);
}
})
},
toggleProviderContent: function( isEnabled ) {
// On request failure hide provider panel and show error message.
$( '.provider-panel' ).toggleClass('hide', !isEnabled);
$( '.error-message').toggleClass('hide', isEnabled );
}
});
});
ecommerce/static/sass/views/_credit.scss
...@@ -7,11 +7,15 @@ ...@@ -7,11 +7,15 @@
// ==================== // ====================
.credit-checkout { .credit-checkout {
color: gray;
padding-bottom: 30px; padding-bottom: 30px;
.header-title {
padding-left: 20px;
}
.title { .title {
color: $text-color; color: $text-color;
margin: 0;
margin-bottom: 20px;
span.course-title { span.course-title {
color: $brand-primary; color: $brand-primary;
...@@ -20,19 +24,26 @@ ...@@ -20,19 +24,26 @@
.course-details .course-image, .course-details .course-image,
.provider-details .provider-image { .provider-details .provider-image {
max-width: 100%; width: 200px;
} }
.course-details, .course-details,
.provider-details { .provider-details {
border-bottom: 1px solid palette(grayscale, light);
margin-bottom: 20px;
padding: 20px 0; padding: 20px 0;
} }
.provider-details { .provider-details {
.eligibility-details{ .show-instructions {
margin-top: 10px; padding-left: initial;
}
}
.eligibility-details {
border-bottom: 1px solid $gray-light;
margin-bottom: 20px;
.date {
margin-bottom: 20px;
} }
} }
...@@ -48,6 +59,22 @@ ...@@ -48,6 +59,22 @@
width: 100%; width: 100%;
} }
} }
.course-details {
.row {
overflow: hidden;
.advantages {
background-color: white;
padding: 10px 15px;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
}
}
div.advantages p {
color: $gray;
}
} }
/* Small devices (tablets, 768px and up) */ /* Small devices (tablets, 768px and up) */
......
ecommerce/templates/edx/credit/checkout.html
...@@ -6,62 +6,100 @@ ...@@ -6,62 +6,100 @@
{% block content %} {% block content %}
<div class="container credit-checkout"> <div class="container credit-checkout">
<div class="row center-block course-details"> <div class="course-details well">
<div class="col-sm-3 hidden-xs"> <div class="row center-block ">
<img class="course-image" alt="{{ course.name }}" src="{{ course.thumbnail_url }}"> <h4 class="header-title title">
</div>
<div class="col-sm-9">
<h3 class="title">
{% blocktrans count hours=credit_seats.0.attr.credit_hours %} {% blocktrans count hours=credit_seats.0.attr.credit_hours %}
You are purchasing 1 credit hour for: You are purchasing 1 credit hour for:
{% plural %} {% plural %}
You are purchasing {{ hours }} credit hours for: You are purchasing {{ hours }} credit hours for:
{% endblocktrans %} {% endblocktrans %}
<span class="course-title text-nowrap">{{ course.name }}</span> <span id="course-name" data-course_key="{{ course }}" data-username="{{ request.user }}"
</h3> class="course-title text-nowrap">{{ course.name }}</span>
Congratulations, you are eligible to purchase credit from {{ credit_seats.0.attr.credit_provider }} by Feb 05, 2013. </h4>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "You deserved it." %}</strong>
<p>
{% trans "The hard work is over; you passed the course. Now get the credit you deserve to start or complete a degree." %}
</p>
</div>
</div>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "It's affordable." %}</strong>
<p>
{% trans "The credit offered on edX is generally lower than for-credit courses on campus." %}
</p>
</div>
</div>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "It opens doors." %}</strong>
<p>
{% trans "It is estimated that most job openings by 2018 will require a college degree. Start your path to success." %}
</p>
</div>
</div>
</div> </div>
</div> </div>
<div class="provider-container">
<div class="row center-block provider-details"> <div class="alert alert-danger error-message hide" role="alert">
<div class="col-sm-3 hidden-xs"> {% trans "Something went wrong! Please try again later." %}
<img alt="{{ credit_seats.0.attr.credit_provider }}" class="provider-image" src="http://img2.findthebest.com/sites/default/files/10/media/images/Arizona_State_University_at_the_West_Campus_226828.jpg">
</div> </div>
<div class="col-sm-9"> <div class="provider-panel hide">
<h3 class="title">{{ credit_seats.0.attr.credit_provider }}</h3> <div data-providers-ids="{{ providers_ids }}" class="row center-block provider-details">
A new model for the American Research University, creating an institution that is committed to {# data will be loaded with underscore template #}
excellence, access and impact.
<div class="row eligibility-details">
<div class="col-sm-6 pull-left">Eligible until Feb 05, 2013</div>
<div class="col-sm-6 text-right price">Price: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
</div> </div>
</div>
</div>
<div class="row center-block text-right total-price"> <div class="row center-block eligibility-details">
<div class="col-sm-12">Total: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div> <div class="col-sm-3"></div>
</div> <div class="col-sm-9 date">
<div id="payment-buttons" class="row center-block checkout-controls"> {# date will be added with ajax call #}
{% for processor_name, button_text in payment_processors.items %} {% blocktrans with date='<span class="deadline-date"></span>' %}
<div class="col-xs-6 "> Credit eligibility expires on {{ date }}
<button data-track-type="click" {% endblocktrans %}
data-track-event="edx.bi.ecommerce.credit.payment_selected" <span class="price pull-right">
data-track-category="{{ processor_name }}" {% trans "Price" %}: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}
data-processor-name="{{ processor_name }}" </span>
data-sku="{{ credit_seats.0.stockrecords.first.partner_sku }}" </div>
data-course-id="{{ course.id }}" </div>
class="btn btn-primary payment-button"
> <div class="row center-block text-right total-price">
{{ button_text }} <div class="col-sm-12">{% trans "Total:" %} ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
</button> </div>
<div id="payment-buttons" class="row center-block checkout-controls">
{% for processor_name, button_text in payment_processors.items %}
<div class="col-xs-6 ">
<button data-track-type="click"
data-track-event="edx.bi.ecommerce.credit.payment_selected"
data-track-category="{{ processor_name }}"
data-processor-name="{{ processor_name }}"
data-sku="{{ credit_seats.0.stockrecords.first.partner_sku }}"
data-course-id="{{ course.id }}"
class="btn btn-primary payment-button"
>
{{ button_text }}
</button>
</div>
{% endfor %}
</div>
</div> </div>
{% endfor %}
</div> </div>
</div> </div>
<form id="payment-processor-form"> <form id="payment-processor-form">
</form> </form>
<script type="text/template" id="provider-details-tpl">
{% include "edx/credit/provider-details.underscore" %}
</script>
<script>
var lmsRootUrl = "{{ lms_url_root }}";
</script>
{% if analytics_data %} {% if analytics_data %}
<script type="text/javascript"> <script type="text/javascript">
var initModelData = {{ analytics_data|safe }}; var initModelData = {{ analytics_data|safe }};
...@@ -70,8 +108,6 @@ ...@@ -70,8 +108,6 @@
{% endblock content %} {% endblock content %}
{% compress js %} {% block javascript %}
{% block javascript %} <script src="{% static 'js/pages/credit_checkout.js' %}"></script>
<script src="{% static 'js/pages/credit_checkout.js' %}"></script> {% endblock %}
{% endblock %}
{% endcompress %}
ecommerce/templates/edx/credit/provider-details.underscore 0 → 100644
<div class="col-sm-3 hidden-xs">
<img alt="<%- display_name %>" class="provider-image" src="">
</div>
<div class="col-sm-9">
<h3 class="title"><%- display_name %></h3>
<p><%- gettext( description ) %></p>
<button class="btn btn-link show-instructions" data-toggle="collapse" data-target="#fulfillment-instructions"><%= gettext( "How does it works?" ) %></button>
<div class="collapse" id="fulfillment-instructions">
<h4 class="text-uppercase"><%= gettext('how credit works with ') %><%- display_name %> </h4>
<%= fulfillment_instructions %>
</div>
</div>
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