Skip to content

Commit

Permalink
Merge pull request #13 from GrimLink/feature/notfication-style
Browse files Browse the repository at this point in the history 
Feature/notification style, Fixes issue #10
  • Loading branch information
@GrimLink
GrimLink authored Jul 9, 2020
2 parents 7966350 + b8fe703 commit efbc71c
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 75 deletions.
48 changes: 48 additions & 0 deletions view/frontend/styles/_module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
$modal-added-to-cart-offset: 20px;
$modal-added-to-cart-max-width: 480px;
$modal-added-to-cart-padding: ($modal-popup__padding / 2);
$modal-added-to-cart-bg: $modal__background-color;
$modal-added-to-cart-color: inherit;
$modal-added-to-cart-box-shadow: $modal__box-shadow;

.modal-added-to-cart {
z-index: 9;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
max-width: $modal-added-to-cart-max-width;
margin: 0 auto;
padding: $modal-added-to-cart-padding;dding;
background-color: $modal-added-to-cart-bg;
color: $modal-added-to-cart-color;
box-shadow: $modal-added-to-cart-box-shadow;

.modal-content {
display: flex;
align-items: flex-start;
margin-right: $modal-action-close__font-size;
}

.product-image {
flex: 0 0 auto;
width: 50px;
margin-right: 1em;
}
}

.message.message-add-to-cart {
padding: $message__padding;

> :first-child::before {
content: none;
}
}

@include min-screen($screen__m) {
.modal-added-to-cart {
top: $modal-added-to-cart-offset;
}
}

60 changes: 39 additions & 21 deletions view/frontend/web/css/source/_module.less
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,50 @@
@modal-added-to-cart-offset: 20px;
@modal-added-to-cart-max-width: 480px;
@modal-added-to-cart-padding: (@modal-popup__padding / 2);
@modal-added-to-cart-bg: @modal__background-color;
@modal-added-to-cart-color: inherit;
@modal-added-to-cart-box-shadow: @modal__box-shadow;

& when (@media-common = true) {
.add-to-cart {
.modal-added-to-cart {
z-index: 9;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
right: 0;
bottom: auto;
left: 0;
max-width: @modal-added-to-cart-max-width;
margin: 0 auto;
padding: @modal-added-to-cart-padding;dding;
background-color: @modal-added-to-cart-bg;
color: @modal-added-to-cart-color;
box-shadow: @modal-added-to-cart-box-shadow;

.modal-content {
display: flex;
align-items: flex-start;
margin-right: @modal-action-close__font-size;
}

@media only screen and (min-width: 480px) {
top: 20px;
.product-image {
flex: 0 0 auto;
width: 50px;
margin-right: 1em;
}
}

.btn-close {
@size: 10px;
position: absolute;
top: 15px;
right: 15px;
padding: 15px;
height: @size;
width: @size;
border-radius: 50%;
background: url("../images/icons/close.svg") center/10px no-repeat;
transition: background-color 0.2s;
cursor: pointer;
.message.message-add-to-cart {
padding: @message__padding;

&:hover {
background-color: #f2f2f2;
}
> :first-child::before {
content: none;
}
}
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.modal-added-to-cart {
top: @modal-added-to-cart-offset;
}
}

128 changes: 74 additions & 54 deletions view/frontend/web/js/catalog/add-to-cart-mixin.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
define([
'jquery',
'mage/translate',
'jquery/ui'
], function ($) {
'use strict';
define(["jquery", "mage/translate", "jquery/ui"], function ($) {
"use strict";

var config = window['checkout']['add_to_cart_notification'];
var config = window["checkout"]["add_to_cart_notification"];

var mixin = {
/**
Expand All @@ -17,46 +13,70 @@ define([

this._super(form);

self.element.find('.message.error').remove();

$.when(
this.productPromise(productId),
this.cartPromise()
).then(function (data) {
var product = data[0];
var title = $.mage.__('Added To Bag');
var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
.replace('%1', product['name'])
.replace('%2', product['cart_url']);

$('body').append(
'<div id="add_to_cart_notification" class="add-to-cart">' +
'<div class="btn-close"></div>' +
'<img class="notification-image" src="' + product['image'] + '" alt="' + product['name'] + '" title="' + product['name'] + '">' +
'<div class="notification-content">' +
'<p class="notification-title">' + title + '</p>' +
'<p class="notification-message">' + message + '</p>' +
'</div>' +
'</div>'
);

$("#add_to_cart_notification").find(".btn-close").click(function () {
self.removeNotification();
});

setTimeout(function () {
self.removeNotification();
}, config['notificationLifetime']);
}, function (messages) {
if (self.element.find('div.mage-error').filter(':visible').length > 0) {
return;
self.element.find(".message.error").remove();

$.when(this.productPromise(productId), this.cartPromise()).then(
function (data) {
var product = data[0];
var title = $.mage.__("Added To Bag");
var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
.replace("%1", product["name"])
.replace("%2", product["cart_url"]);

var modalCloseBtn =
'<button class="action-close"><span>' + $.mage.__("Close") + "</span></button>";

// TODO: get width and height from product image xml config
var modalImage =
'<img class="notification-image" src="' +
product["image"] +
'" alt="' +
product["name"] +
'" width="80" height="80">';

$("body").append(
'<div id="add_to_cart_notification" role="dialog" class="modal-custom modal-added-to-cart">' +
'<div class="modal-header">' +
modalCloseBtn +
"</div>" +
'<div class="modal-content"><div class="product-image">' +
modalImage +
'</div><div class="product-content">' +
'<div class="block-title">' +
'<strong id="add_to_cart_notification-heading" role="heading" aria-level="2">' +
title +
"</strong></div>" +
'<div class="notification-message">' +
message +
"</div>" +
"</div></div></div>"
);

$("#add_to_cart_notification")
.find(".action-close")
.click(function () {
self.removeNotification();
});

setTimeout(function () {
self.removeNotification();
}, config["notificationLifetime"]);
},
function (messages) {
if (self.element.find("div.mage-error").filter(":visible").length > 0) {
return;
}

var button = self.element.find("button.tocart");
messages.forEach(function (message) {
button.after(
'<div class="message info message-add-to-cart"><div>' +
message.text +
"</div></div>"
);
});
}

var button = self.element.find('button.tocart');
messages.forEach(function (message) {
button.after('<p class="message error add-to-cart-error">' + message.text + '</p>');
});
});
);
},

removeNotification: function () {
Expand All @@ -67,40 +87,40 @@ define([

productPromise: function (productId) {
return $.get({
url: window['BASE_URL'] + '/cart_notification/data/product/product_id/' + productId,
url: window["BASE_URL"] + "/cart_notification/data/product/product_id/" + productId,
cache: true
});
},

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

$(document).on('ajaxSuccess', function (event, request, settings) {
if (settings.url.indexOf('/checkout/cart/add') === -1) {
$(document).on("ajaxSuccess", function (event, request, settings) {
if (settings.url.indexOf("/checkout/cart/add") === -1) {
return;
}

if (request.responseJSON.error_messages) {
dfd.reject(request.responseJSON.error_messages);
$(document).off('ajaxSuccess');
$(document).off("ajaxSuccess");
return;
}

dfd.resolve();
$(document).off('ajaxSuccess');
$(document).off("ajaxSuccess");
});

return dfd.promise();
}
};

return function (target) {
if (!config['enabled']) {
if (!config["enabled"]) {
return target;
}

$.widget('mooore.catalogAddToCart', target, mixin);
$.widget("mooore.catalogAddToCart", target, mixin);

return $.mooore.catalogAddToCart;
}
};
});

0 comments on commit efbc71c

Please sign in to comment.