Skip to content

Commit 5b93558

Browse files
author
Sergey Semenov
committed
MAGETWO-21349: Advanced Mini Cart.
1 parent cf67f3b commit 5b93558

File tree

2 files changed

+65
-37
lines changed

2 files changed

+65
-37
lines changed

app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,18 @@
4242
{
4343
"[data-block='minicart']": {
4444
"sidebar": {
45-
"checkoutUrl": "<?php echo $block->getCheckoutUrl();?>",
46-
"checkoutButton": "#top-cart-btn-checkout",
47-
"removeButton": "#mini-cart a.action.delete",
48-
"confirmMessage": "<?php echo __('Are you sure you would like to remove this item from the shopping cart?') ?>",
49-
"closeButton": "#btn-minicart-close",
5045
"targetElement": "div.block.block-minicart",
51-
"updateItemQtyUrl": "<?php echo $block->getUpdateItemQtyUrl(); ?>",
52-
"removeItemUrl": "<?php echo $block->getRemoveItemUrl(); ?>"
46+
"url": {
47+
"checkout": "<?php echo $block->getCheckoutUrl();?>",
48+
"update": "<?php echo $block->getUpdateItemQtyUrl(); ?>",
49+
"remove": "<?php echo $block->getRemoveItemUrl(); ?>"
50+
},
51+
"button": {
52+
"checkout": "#top-cart-btn-checkout",
53+
"remove": "#mini-cart a.action.delete",
54+
"close": "#btn-minicart-close"
55+
},
56+
"confirmMessage": "<?php echo __('Are you sure you would like to remove this item from the shopping cart?') ?>"
5357
}
5458
}
5559
}

app/code/Magento/Checkout/view/frontend/web/js/sidebar.js

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,31 @@ define([
3131

3232
this.element.decorate('list', this.options.isRecursive);
3333

34-
// Add event on "Go to Checkout" button click
35-
$(this.options.checkoutButton).on('click', $.proxy(function() {
36-
location.href = this.options.checkoutUrl;
34+
$(this.options.button.checkout).on('click', $.proxy(function() {
35+
location.href = this.options.url.checkout;
3736
}, this));
3837

39-
// Add event on "Remove item" click
40-
$(this.options.removeButton).click(function(event) {
38+
$(this.options.selectorItemQty).keyup(function(event) {
39+
self._showButton($(this));
40+
});
41+
42+
$(this.options.button.remove).click(function(event) {
4143
event.stopPropagation();
4244
if (confirm(self.options.confirmMessage)) {
4345
self._removeItem($(this));
4446
}
4547
});
4648

47-
// Add event on "Qty" field changed
48-
$(this.options.selectorItemQty).change(function(event) {
49+
$(this.options.selectorItemButton).click(function(event) {
4950
event.stopPropagation();
50-
self._showButton($(this));
51+
self._updateQty($(this))
5152
});
5253

53-
// Add event on "Update Qty" button click
54-
$(this.options.selectorItemButton).click(function(event) {
54+
$('body').on('minicart.update', function(event, elem, response) {
5555
event.stopPropagation();
56-
self._updateQty($(this))
56+
self._refreshQty(response.data.summary_qty, response.data.summary_text);
57+
self._refreshSubtotal(response.data.subtotal);
58+
self._refreshShowcart(response.data.summary_qty, response.data.summary_text);
5759
});
5860

5961
this._initCloseButton();
@@ -68,12 +70,17 @@ define([
6870
*/
6971
_initCloseButton: function() {
7072
var self = this;
71-
$(this.options.closeButton).click(function(event) {
73+
$(this.options.button.close).click(function(event) {
7274
event.stopPropagation();
7375
$(self.options.targetElement).dropdownDialog("close");
7476
});
7577
},
7678

79+
/**
80+
* Add 'overflowed' class to minicart items wrapper element
81+
*
82+
* @private
83+
*/
7784
_isOverflowed: function() {
7885
var list = $(this.options.selectorList);
7986
if (this.scrollHeight > list.innerHeight()) {
@@ -88,6 +95,9 @@ define([
8895
var itemQty = elem.data('item-qty');
8996
if (this._isValidQty(itemQty, elem.val())) {
9097
$('#update-cart-item-' + itemId).show('fade', 300);
98+
} else if (elem.val() == 0) {
99+
elem.val(itemQty);
100+
this._hideButton(elem);
91101
} else {
92102
this._hideButton(elem);
93103
}
@@ -113,35 +123,44 @@ define([
113123

114124
_updateQty: function(elem) {
115125
var itemId = elem.data('cart-item');
116-
this._ajax(this.options.updateItemQtyUrl, {
126+
this._ajax(this.options.url.update, {
117127
item_id: itemId,
118128
item_qty: $('#cart-item-' + itemId + '-qty').val()
119129
}, elem, this._updateQtyAfter);
120-
121130
},
122131

132+
/**
133+
* Update content after update qty
134+
*
135+
* @param elem
136+
* @param response
137+
* @private
138+
*/
123139
_updateQtyAfter: function(elem, response) {
124140
if ($.type(response.data) === 'object') {
141+
$('body').trigger('minicart.update', [elem, response]);
125142
this._refreshItemQty(elem, response.data.summary_qty);
126-
this._refreshSummaryQty(response.data.summary_qty, response.data.summary_text);
127-
this._refreshSubtotal(response.data.subtotal);
128-
this._refreshShowcartCounter(response.data.summary_qty, response.data.summary_text);
129143
}
130144
this._hideButton(elem);
131145
},
132146

133147
_removeItem: function(elem) {
134148
var itemId = elem.data('cart-item');
135-
this._ajax(this.options.removeItemUrl, {
149+
this._ajax(this.options.url.remove, {
136150
item_id: itemId
137151
}, elem, this._removeItemAfter);
138152
},
139153

154+
/**
155+
* Update content after item remove
156+
*
157+
* @param elem
158+
* @param response
159+
* @private
160+
*/
140161
_removeItemAfter: function(elem, response) {
141162
if ($.type(response.data) === 'object') {
142-
this._refreshSummaryQty(response.data.summary_qty, response.data.summary_text);
143-
this._refreshSubtotal(response.data.subtotal);
144-
this._refreshShowcartCounter(response.data.summary_qty, response.data.summary_text);
163+
$('body').trigger('minicart.update', [elem, response]);
145164
}
146165
if (response.cleanup === true) {
147166
$(this.options.selectorContentWrapper).replaceWith($.trim(response.content));
@@ -189,7 +208,14 @@ define([
189208
});
190209
},
191210

192-
_refreshSummaryQty: function(qty, text) {
211+
_refreshItemQty: function(elem, qty) {
212+
if (qty != undefined) {
213+
var itemId = elem.data('cart-item');
214+
$('#cart-item-' + itemId + '-qty').data('item-qty', qty);
215+
}
216+
},
217+
218+
_refreshQty: function(qty, text) {
193219
if (qty != undefined && text != undefined) {
194220
var self = this;
195221
$(this.options.selectorSummaryQty).fadeOut('slow', function() {
@@ -198,13 +224,6 @@ define([
198224
}
199225
},
200226

201-
_refreshItemQty: function(elem, qty) {
202-
if (qty != undefined) {
203-
var itemId = elem.data('cart-item');
204-
$('#cart-item-' + itemId + '-qty').data('item-qty', qty);
205-
}
206-
},
207-
208227
_refreshSubtotal: function(val) {
209228
if (val != undefined) {
210229
var self = this;
@@ -214,7 +233,7 @@ define([
214233
}
215234
},
216235

217-
_refreshShowcartCounter: function(qty, text) {
236+
_refreshShowcart: function(qty, text) {
218237
if (qty != undefined && text != undefined) {
219238
var self = this;
220239
$(this.options.selectorShowcartNumber).fadeOut('slow', function() {
@@ -226,6 +245,11 @@ define([
226245
}
227246
},
228247

248+
/**
249+
* Calculate height of minicart list
250+
*
251+
* @private
252+
*/
229253
_calcHeight: function() {
230254
var self = this,
231255
height = 0,

0 commit comments

Comments
 (0)