Skip to content

E
ecommerce
Commit ce8ff8ee by Malik Shahzad
Options

Merge pull request #763 from edx/malikshahzad228/WL-485 

WL-485: Basket bulk purchase view updated
parents 8c5c0676 7ccc02a0
Showing with 175 additions and 34 deletions
ecommerce/static/js/pages/basket_page.js
...@@ -93,6 +93,30 @@ define([ ...@@ -93,6 +93,30 @@ define([
checkoutPayment(data); checkoutPayment(data);
}); });
// Increment the quantity field until max
$('.spinner .btn:first-of-type').on('click', function() {
var btn = $(this);
var input = btn.closest('.spinner').find('input');
// Stop if max attribute is defined and value is reached to given max value
if (input.attr('max') === undefined || parseInt(input.val()) < parseInt(input.attr('max'))) {
input.val(parseInt(input.val()) + 1);
} else {
btn.next('disabled', true);
}
});
// Decrement the quantity field until min
$('.spinner .btn:last-of-type').on('click', function() {
var btn = $(this);
var input = btn.closest('.spinner').find('input');
// Stop if min attribute is defined and value is reached to given min value
if (input.attr('min') === undefined || parseInt(input.val()) > parseInt(input.attr('min'))) {
input.val(parseInt(input.val()) - 1);
} else {
btn.prev('disabled', true);
}
});
AnalyticsUtils.analyticsSetUp(); AnalyticsUtils.analyticsSetUp();
}, },
showVoucherForm = function() { showVoucherForm = function() {
......
ecommerce/static/js/test/specs/pages/basket_page_spec.js
...@@ -24,7 +24,15 @@ define([ ...@@ -24,7 +24,15 @@ define([
form; form;
beforeEach(function () { beforeEach(function () {
$('<div id="voucher_form_container"><input id="id_code">' + $('<div class="spinner">' +
'<input class="quantity" id="id_form-0-quantity" min="1" max="10"' +
'name="form-0-quantity" type="number" value="1">' +
'<div class="input-group-btn-vertical">' +
'<button class="btn btn-primary" type="button">' +
'<i class="fa fa-caret-up"></i></button>' +
'<button class="btn btn-primary" type="button">' +
'<i class="fa fa-caret-down"></i></button></div></div>' +
'<div id="voucher_form_container"><input id="id_code">' +
'<a id="voucher_form_cancel"></a></button></div>' + '<a id="voucher_form_cancel"></a></button></div>' +
'<div id="voucher_form_link"><a href=""></a></div>' + '<div id="voucher_form_link"><a href=""></a></div>' +
'<button type="submit" class="apply_voucher"' + '<button type="submit" class="apply_voucher"' +
...@@ -104,6 +112,40 @@ define([ ...@@ -104,6 +112,40 @@ define([
expect(Utils.disableElementWhileRunning).toHaveBeenCalled(); expect(Utils.disableElementWhileRunning).toHaveBeenCalled();
expect($('button#cybersource').hasClass('is-disabled')).toBeTruthy(); expect($('button#cybersource').hasClass('is-disabled')).toBeTruthy();
}); });
it('should increment basket quantity on clicking up arrow', function () {
BasketPage.onReady();
$('input.quantity').first().val(5);
$('.spinner button.btn:first-of-type').trigger('click');
expect($('input.quantity').first().val()).toEqual('6');
});
it('should not increment quantity once reached to max value', function () {
BasketPage.onReady();
$('input.quantity').first().val(10);
$('.spinner button.btn:first-of-type').trigger('click');
expect($('input.quantity').first().val()).toEqual('10');
});
it('should decrement basket quantity on clicking down arrow', function () {
BasketPage.onReady();
$('input.quantity').first().val(5);
$('.spinner button.btn:last-of-type').trigger('click');
expect($('input.quantity').first().val()).toEqual('4');
});
it('should not decrement quantity once reached to min value', function () {
BasketPage.onReady();
$('input.quantity').first().val(1);
$('.spinner button.btn:last-of-type').trigger('click');
expect($('input.quantity').first().val()).toEqual('1');
});
}); });
describe('appendToForm', function () { describe('appendToForm', function () {
......
ecommerce/static/sass/partials/views/_basket.scss
...@@ -46,17 +46,21 @@ ...@@ -46,17 +46,21 @@
} }
.checkout-quantity { .checkout-quantity {
.input-group {
display: inline;
}
.quantity { .quantity {
display: inline-block; display: inline-block;
width: 40%; width: 35%;
padding: 3px; padding: 3px;
} }
button { button.update-button {
display: inline-block; display: inline-block;
vertical-align:top; vertical-align:top;
margin-left: 5px; margin-left: 5px;
width: 50%; width: 40%;
} }
} }
...@@ -96,6 +100,50 @@ ...@@ -96,6 +100,50 @@
} }
} }
} }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 30px;
vertical-align: middle;
display: table-cell;
float: left;
.btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
&:first-child {
border-top-right-radius: 4px;
}
&:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
}
i {
position: absolute;
top: 0;
left: 10px;
}
}
.course-price-label {
font-weight: normal;
font-size: 0.84rem;
}
} }
.total { .total {
...@@ -180,12 +228,16 @@ ...@@ -180,12 +228,16 @@
} }
} }
/* Small devices (tablets, 768px and up) */ /* Small devices (tablets, 992px and lower) */
@media (min-width: $screen-sm-min) { @media (max-width: $screen-md-min - 1) {
.checkout-quantity { .basket {
.input-group { .container {
button { .basket-items {
padding: 6px 0px; .course-price-label {
font-size: 20px;
font-weight: bold;
margin: 0px 20px 20px 0px;
}
} }
} }
} }
...@@ -200,5 +252,15 @@ ...@@ -200,5 +252,15 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
} }
.form-group {
margin-bottom: 0;
vertical-align: middle;
display: inline-block;
}
.course_prices {
margin-top: 30px;
}
} }
} }
ecommerce/templates/oscar/basket/partials/basket_content.html
...@@ -22,37 +22,50 @@ ...@@ -22,37 +22,50 @@
</p> </p>
{% endif %} {% endif %}
<div class="row"> <div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 course_image"> <div class="col-md-2 col-sm-12 course_image">
{{ form.id }} {{ form.id }}
<img class="thumbnail" src="{{ line_data.image_url }}" alt="{{ line_data.course_name }}"/> <img class="thumbnail" src="{{ line_data.image_url }}" alt="{{ line_data.course_name }}"/>
</div> </div>
<div class="col-lg-5 col-md-5 col-sm-12"> <div class="col-md-5 col-sm-12">
<p class="course_name">{{ line_data.course_name }} - {{ line_data.course_key.org }} ({{ line_data.course_key.run }})</p> <p class="course_name">{{ line_data.course_name }} - {{ line_data.course_key.org }} ({{ line_data.course_key.run }})</p>
<p class="course_description">{{ line_data.course_short_description }}</p> <p class="course_description">{{ line_data.course_short_description }}</p>
</div> </div>
{% if line_data.enrollment_code %} {% if line_data.enrollment_code %}
<div class="col-lg-2 col-md-2 col-sm-6 form-inline"> <div class="col-md-1 col-xs-12">
<div class="checkout-quantity form-group"> <label class="course-price-label text-muted">{% trans 'Item Price' %}</label>
<div class="input-group {% if form.errors %}error{% endif %}"> <span>{{ line_data.line.price_incl_tax|currency:line_data.line.price_currency }}</span>
{% render_field form.quantity class+="quantity form-control" min=min_seat_quantity %}
<button class="btn btn-default" type="submit" data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
</div>
</div> </div>
</div> <div class="col-md-3 col-xs-12 form-inline">
{% endif %} <label class="course-price-label text-muted">{% trans 'Quantity' %}</label>
<div class="col-lg-3 col-md-3 col-sm-6 course_prices pull-right"> <div class="checkout-quantity form-group">
{% if line_data.line.has_discount %} <div class="input-group spinner {% if form.errors %}error{% endif %}">
<div class="discount"> {% render_field form.quantity class+="quantity form-control" min=min_seat_quantity %}
<div class="benefit"> <div class="input-group-btn-vertical">
{% blocktrans with benefit_value=line_data.benefit_value %} <button class="btn btn-primary" type="button"><i class="fa fa-caret-up"></i></button>
{{benefit_value}} off <button class="btn btn-primary" type="button"><i class="fa fa-caret-down"></i></button>
{% endblocktrans %} </div>
</div> </div>
<div class="old-price"> <button class="btn btn-primary update-button" type="submit" data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
{{ line_data.line.line_price_incl_tax|currency:line_data.line.price_currency }}
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="col-md-{% if line_data.enrollment_code %}1{% else %}5{% endif %} col-xs-12 course_prices pull-right">
{% if line_data.enrollment_code %}
<label class="course-price-label text-muted">{% trans 'Price' %}</label>
{% endif %}
{% if line_data.line.has_discount %}
<div class="discount">
<div class="benefit">
{% blocktrans with benefit_value=line_data.benefit_value %}
{{benefit_value}} off
{% endblocktrans %}
</div>
<div class="old-price">
{{ line_data.line.line_price_incl_tax|currency:line_data.line.price_currency }}
</div>
</div>
{% endif %}
<div class="price {% if line_data.line.has_discount %}discounted{% endif %}"> <div class="price {% if line_data.line.has_discount %}discounted{% endif %}">
{{ line_data.line.line_price_incl_tax_incl_discounts|currency:line_data.line.price_currency }} {{ line_data.line.line_price_incl_tax_incl_discounts|currency:line_data.line.price_currency }}
</div> </div>
...@@ -68,7 +81,7 @@ ...@@ -68,7 +81,7 @@
{% if not is_bulk_purchase %} {% if not is_bulk_purchase %}
{% block vouchers %} {% block vouchers %}
{% if basket.contains_a_voucher %} {% if basket.contains_a_voucher %}
<div class="vouchers col-6"> <div class="vouchers col-sm-6">
{% for voucher in basket.vouchers.all %} {% for voucher in basket.vouchers.all %}
<p class="voucher"> <p class="voucher">
{% blocktrans with voucher_code=voucher.code %} {% blocktrans with voucher_code=voucher.code %}
...@@ -84,7 +97,7 @@ ...@@ -84,7 +97,7 @@
{% else %} {% else %}
{# Hide the entire section if a custom BasketView doesn't pass in a voucher form #} {# Hide the entire section if a custom BasketView doesn't pass in a voucher form #}
{% if voucher_form %} {% if voucher_form %}
<div class="use-voucher col-6"> <div class="use-voucher col-sm-6">
<p id="voucher_form_link"><a href="#voucher">{% trans "Apply a coupon code" %}</a></p> <p id="voucher_form_link"><a href="#voucher">{% trans "Apply a coupon code" %}</a></p>
<div id="voucher_form_container"> <div id="voucher_form_container">
<form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post"> <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
......
ecommerce/templates/oscar/basket/partials/basket_totals.html
{% load i18n %} {% load i18n %}
{% load currency_filters %} {% load currency_filters %}
<div id="basket_totals" class="col-2"> <div id="basket_totals" class="col-xs-3">
{% block order_total %} {% block order_total %}
{% trans "Total:" %} {% trans "Total:" %}
{{ order_total.incl_tax|currency:basket.currency }} {{ order_total.incl_tax|currency:basket.currency }}
......
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