-
+
@foreach (var item in Model.Items)
{
-
- @if (!item.ImageName.IsNullOrEmpty())
- {
- 
- }
- else
- {
- 
- }
- @item.ProductName
- @if (item.Count > 1)
- {
- (@("x" + item.Count))
- }
- - $@item.TotalPrice.ToString("0.00")
-
+ string imageName = item.ImageName.IsNullOrEmpty() ? "/product-images/noimage.jpg" : $"/product-images/{item.ImageName}";
+ var price = (item.TotalPrice * item.Count).ToString("0.00");
+
} -
-
- }
- @item.ProductName
- @if (item.Count > 1)
- {
-
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ @item.ProductName
+
+
+ $@price
+
+ } -
-
- @L["Total"]: $@Model.TotalPrice.ToString("0.00")
-
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css
index de933106..af34c285 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css
@@ -1,42 +1,117 @@
-/*.basket-list*/
-/*{*/
-/* background-color: #fff;*/
-/* padding: 1em;*/
-/* border: 1px solid #666;*/
-/* border-radius: 3px;*/
-/* box-shadow: 0 0 10px rgba(0, 0, 0, .05);*/
-/* margin-bottom: 0.5em;*/
-/* transition: all .2s;*/
-/*}*/
-
-/*.basket-list:hover {*/
-/* box-shadow: 0 0 20px rgba(0, 0, 0, .1);*/
-/*}*/
+.basket-list {
+
+}
.basket-list-item {
- margin-top: 1em;
+ width:-webkit-fill-available;
+ background-color: #fff;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+ transition: all .2s;
+ cursor: default;
+}
+
+.basket-list-item:hover {
+ box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+}
+
+.flex-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.horizontal {
+ flex-direction: row;
+ width: 100%;
+}
+
+.horizontal .flex-item {
+ flex: 1;
+}
+
+.vertical {
+ flex-direction: column;
+}
+
+.flex-item {
+ /*background: tomato;*/
+ padding: 5px;
+ max-width: 100vh;
+ margin: 5px;
+ font-size: 3em;
+ text-align: center;
}
-.basket-list-item:first-child{
- margin-top: 0;
+.image-container {
+ border: 2px solid #ccc !important;
+ border-radius: 10px;
+ background-color: white;
+ max-width: 3em;
}
-.basket-list-item img {
- height: 1em;
+.basket-item-image {
+ min-width: 1em;
+ width: 2em;
+ max-width: 80%;
}
-.basket-total-area
-{
- margin-bottom: 1em;
+.description-container {
+ align-items: baseline;
+}
+
+.description-header {
+ line-height: 50px;
+ text-align: left;
+ font-weight: 500;
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+ overflow: hidden;
+}
+
+.description-header > span {
+ line-height: 20px;
+ vertical-align: top;
+}
+
+.description-price {
+ text-align: center;
+ font-size: 1.1rem;
font-weight: bold;
+ line-height: 30px;
+ color: rgb(72, 72, 72);
}
-.basket-item-remove {
- cursor: pointer;
- color: red;
- opacity: 0.25;
+.description-price > span {
+ line-height: 20px;
+ vertical-align: top;
}
-.basket-list-item:hover .basket-item-remove {
+.remove-container {
+ color: #bb2d3b;
+ max-width: 2em;
+ font-size: 1.5rem;
+ line-height: initial;
+}
+
+.actions-container {
+ font-weight: 600;
+ color: #523e02;
+ max-width: 2em;
+ font-size: 1.25rem;
+ line-height: 40px;
+}
+
+.hide {
+ opacity: 0;
+ -webkit-transition: all 500ms ease-in-out;
+ -moz-transition: all 500ms ease-in-out;
+ -ms-transition: all 500ms ease-in-out;
+ -o-transition: all 500ms ease-in-out;
+ transition: all 500ms ease-in-out;
+}
+
+.basket-list-item:hover .hide {
opacity: 1.0;
-}
\ No newline at end of file
+}
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js
index 688a0158..f368e8da 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js
@@ -1,8 +1,6 @@
(function () {
-
let anonymousId = abp.utils.getCookieValue("anonymous_id");
-
abp.widgets.BasketWidget = function ($wrapper) {
var widgetManager = $wrapper.data('abp-widget-manager');
@@ -10,23 +8,55 @@
$wrapper
.find('.basket-item-remove')
.click(function () {
- var $this = $(this);
- var productId = $this.parent('.basket-list-item').attr('data-product-id');
+ let $this = $(this);
+ let productId = $this.parents('.basket-list-item').attr('data-product-id');
eShopOnAbp.basketService.basket.removeProduct({
productId: productId,
anonymousId: anonymousId
}).then(function () {
-
widgetManager.refresh();
-
$('.abp-widget-wrapper[data-widget-name="CartWidget"]')
.data('abp-widget-manager')
.refresh();
-
abp.notify.info("Removed the product from your basket.", "Removed basket item");
});
});
+ $wrapper
+ .find('.basket-item-increase')
+ .click(function (e) {
+ e.preventDefault();
+ let $this = $(this);
+ let productId = $this.parents('.basket-list-item').attr('data-product-id');
+ eShopOnAbp.basketService.basket.addProduct({
+ productId: productId,
+ count: 1,
+ anonymousId: anonymousId
+ }).then(function () {
+ widgetManager.refresh();
+ $('.abp-widget-wrapper[data-widget-name="CartWidget"]')
+ .data('abp-widget-manager')
+ .refresh();
+ });
+ });
+
+ $wrapper
+ .find('.basket-item-decrease')
+ .click(function (e) {
+ e.preventDefault();
+ let $this = $(this);
+ let productId = $this.parents('.basket-list-item').attr('data-product-id');
+ eShopOnAbp.basketService.basket.removeProduct({
+ productId: productId,
+ count: 1,
+ anonymousId: anonymousId
+ }).then(function () {
+ widgetManager.refresh();
+ $('.abp-widget-wrapper[data-widget-name="CartWidget"]')
+ .data('abp-widget-manager')
+ .refresh();
+ });
+ });
};
return {