Skip to content

Commit efbc71c

Browse files
GrimLinkGrimLink
authored
Merge pull request #13 from GrimLink/feature/notfication-style
Feature/notification style, Fixes issue #10
2 parents 7966350 + b8fe703 commit efbc71c

File tree

3 files changed

+161
-75
lines changed

3 files changed

+161
-75
lines changed

‎view/frontend/styles/_module.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
$modal-added-to-cart-offset: 20px;
2+
$modal-added-to-cart-max-width: 480px;
3+
$modal-added-to-cart-padding: ($modal-popup__padding / 2);
4+
$modal-added-to-cart-bg: $modal__background-color;
5+
$modal-added-to-cart-color: inherit;
6+
$modal-added-to-cart-box-shadow: $modal__box-shadow;
7+
8+
.modal-added-to-cart {
9+
z-index: 9;
10+
position: fixed;
11+
top: 0;
12+
right: 0;
13+
bottom: auto;
14+
left: 0;
15+
max-width: $modal-added-to-cart-max-width;
16+
margin: 0 auto;
17+
padding: $modal-added-to-cart-padding;dding;
18+
background-color: $modal-added-to-cart-bg;
19+
color: $modal-added-to-cart-color;
20+
box-shadow: $modal-added-to-cart-box-shadow;
21+
22+
.modal-content {
23+
display: flex;
24+
align-items: flex-start;
25+
margin-right: $modal-action-close__font-size;
26+
}
27+
28+
.product-image {
29+
flex: 0 0 auto;
30+
width: 50px;
31+
margin-right: 1em;
32+
}
33+
}
34+
35+
.message.message-add-to-cart {
36+
padding: $message__padding;
37+
38+
> :first-child::before {
39+
content: none;
40+
}
41+
}
42+
43+
@include min-screen($screen__m) {
44+
.modal-added-to-cart {
45+
top: $modal-added-to-cart-offset;
46+
}
47+
}
48+

‎view/frontend/web/css/source/_module.less

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
1+
@modal-added-to-cart-offset: 20px;
2+
@modal-added-to-cart-max-width: 480px;
3+
@modal-added-to-cart-padding: (@modal-popup__padding / 2);
4+
@modal-added-to-cart-bg: @modal__background-color;
5+
@modal-added-to-cart-color: inherit;
6+
@modal-added-to-cart-box-shadow: @modal__box-shadow;
7+
18
& when (@media-common = true) {
2-
.add-to-cart {
9+
.modal-added-to-cart {
310
z-index: 9;
411
position: fixed;
512
top: 0;
6-
left: 50%;
7-
transform: translateX(-50%);
8-
background-color: #fff;
13+
right: 0;
14+
bottom: auto;
15+
left: 0;
16+
max-width: @modal-added-to-cart-max-width;
17+
margin: 0 auto;
18+
padding: @modal-added-to-cart-padding;dding;
19+
background-color: @modal-added-to-cart-bg;
20+
color: @modal-added-to-cart-color;
21+
box-shadow: @modal-added-to-cart-box-shadow;
22+
23+
.modal-content {
24+
display: flex;
25+
align-items: flex-start;
26+
margin-right: @modal-action-close__font-size;
27+
}
928

10-
@media only screen and (min-width: 480px) {
11-
top: 20px;
29+
.product-image {
30+
flex: 0 0 auto;
31+
width: 50px;
32+
margin-right: 1em;
1233
}
34+
}
1335

14-
.btn-close {
15-
@size: 10px;
16-
position: absolute;
17-
top: 15px;
18-
right: 15px;
19-
padding: 15px;
20-
height: @size;
21-
width: @size;
22-
border-radius: 50%;
23-
background: url("../images/icons/close.svg") center/10px no-repeat;
24-
transition: background-color 0.2s;
25-
cursor: pointer;
36+
.message.message-add-to-cart {
37+
padding: @message__padding;
2638

27-
&:hover {
28-
background-color: #f2f2f2;
29-
}
39+
> :first-child::before {
40+
content: none;
3041
}
3142
}
3243
}
44+
45+
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
46+
.modal-added-to-cart {
47+
top: @modal-added-to-cart-offset;
48+
}
49+
}
50+

‎view/frontend/web/js/catalog/add-to-cart-mixin.js

Lines changed: 74 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
define([
2-
'jquery',
3-
'mage/translate',
4-
'jquery/ui'
5-
], function ($) {
6-
'use strict';
1+
define(["jquery", "mage/translate", "jquery/ui"], function ($) {
2+
"use strict";
73

8-
var config = window['checkout']['add_to_cart_notification'];
4+
var config = window["checkout"]["add_to_cart_notification"];
95

106
var mixin = {
117
/**
@@ -17,46 +13,70 @@ define([
1713

1814
this._super(form);
1915

20-
self.element.find('.message.error').remove();
21-
22-
$.when(
23-
this.productPromise(productId),
24-
this.cartPromise()
25-
).then(function (data) {
26-
var product = data[0];
27-
var title = $.mage.__('Added To Bag');
28-
var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
29-
.replace('%1', product['name'])
30-
.replace('%2', product['cart_url']);
31-
32-
$('body').append(
33-
'<div id="add_to_cart_notification" class="add-to-cart">' +
34-
'<div class="btn-close"></div>' +
35-
'<img class="notification-image" src="' + product['image'] + '" alt="' + product['name'] + '" title="' + product['name'] + '">' +
36-
'<div class="notification-content">' +
37-
'<p class="notification-title">' + title + '</p>' +
38-
'<p class="notification-message">' + message + '</p>' +
39-
'</div>' +
40-
'</div>'
41-
);
42-
43-
$("#add_to_cart_notification").find(".btn-close").click(function () {
44-
self.removeNotification();
45-
});
46-
47-
setTimeout(function () {
48-
self.removeNotification();
49-
}, config['notificationLifetime']);
50-
}, function (messages) {
51-
if (self.element.find('div.mage-error').filter(':visible').length > 0) {
52-
return;
16+
self.element.find(".message.error").remove();
17+
18+
$.when(this.productPromise(productId), this.cartPromise()).then(
19+
function (data) {
20+
var product = data[0];
21+
var title = $.mage.__("Added To Bag");
22+
var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
23+
.replace("%1", product["name"])
24+
.replace("%2", product["cart_url"]);
25+
26+
var modalCloseBtn =
27+
'<button class="action-close"><span>' + $.mage.__("Close") + "</span></button>";
28+
29+
// TODO: get width and height from product image xml config
30+
var modalImage =
31+
'<img class="notification-image" src="' +
32+
product["image"] +
33+
'" alt="' +
34+
product["name"] +
35+
'" width="80" height="80">';
36+
37+
$("body").append(
38+
'<div id="add_to_cart_notification" role="dialog" class="modal-custom modal-added-to-cart">' +
39+
'<div class="modal-header">' +
40+
modalCloseBtn +
41+
"</div>" +
42+
'<div class="modal-content"><div class="product-image">' +
43+
modalImage +
44+
'</div><div class="product-content">' +
45+
'<div class="block-title">' +
46+
'<strong id="add_to_cart_notification-heading" role="heading" aria-level="2">' +
47+
title +
48+
"</strong></div>" +
49+
'<div class="notification-message">' +
50+
message +
51+
"</div>" +
52+
"</div></div></div>"
53+
);
54+
55+
$("#add_to_cart_notification")
56+
.find(".action-close")
57+
.click(function () {
58+
self.removeNotification();
59+
});
60+
61+
setTimeout(function () {
62+
self.removeNotification();
63+
}, config["notificationLifetime"]);
64+
},
65+
function (messages) {
66+
if (self.element.find("div.mage-error").filter(":visible").length > 0) {
67+
return;
68+
}
69+
70+
var button = self.element.find("button.tocart");
71+
messages.forEach(function (message) {
72+
button.after(
73+
'<div class="message info message-add-to-cart"><div>' +
74+
message.text +
75+
"</div></div>"
76+
);
77+
});
5378
}
54-
55-
var button = self.element.find('button.tocart');
56-
messages.forEach(function (message) {
57-
button.after('<p class="message error add-to-cart-error">' + message.text + '</p>');
58-
});
59-
});
79+
);
6080
},
6181

6282
removeNotification: function () {
@@ -67,40 +87,40 @@ define([
6787

6888
productPromise: function (productId) {
6989
return $.get({
70-
url: window['BASE_URL'] + '/cart_notification/data/product/product_id/' + productId,
90+
url: window["BASE_URL"] + "/cart_notification/data/product/product_id/" + productId,
7191
cache: true
7292
});
7393
},
7494

7595
cartPromise: function () {
7696
var dfd = $.Deferred();
7797

78-
$(document).on('ajaxSuccess', function (event, request, settings) {
79-
if (settings.url.indexOf('/checkout/cart/add') === -1) {
98+
$(document).on("ajaxSuccess", function (event, request, settings) {
99+
if (settings.url.indexOf("/checkout/cart/add") === -1) {
80100
return;
81101
}
82102

83103
if (request.responseJSON.error_messages) {
84104
dfd.reject(request.responseJSON.error_messages);
85-
$(document).off('ajaxSuccess');
105+
$(document).off("ajaxSuccess");
86106
return;
87107
}
88108

89109
dfd.resolve();
90-
$(document).off('ajaxSuccess');
110+
$(document).off("ajaxSuccess");
91111
});
92112

93113
return dfd.promise();
94114
}
95115
};
96116

97117
return function (target) {
98-
if (!config['enabled']) {
118+
if (!config["enabled"]) {
99119
return target;
100120
}
101121

102-
$.widget('mooore.catalogAddToCart', target, mixin);
122+
$.widget("mooore.catalogAddToCart", target, mixin);
103123

104124
return $.mooore.catalogAddToCart;
105-
}
125+
};
106126
});

0 commit comments

Comments
 (0)