tsai
/
eShopOnAbp
mirror of https://github.com/abpframework/eShopOnAbp.git
1
0
Fork 1
Code Issues Projects Releases Wiki Activity
Browse Source

updated basket ui and added increase-decrease quantity functionality

pull/55/head
Galip Tolga Erdem 5 years ago
parent
24e70c276c
commit
02fff9b643
3 changed files with 180 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml
  2. 131
      apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css
  3. 44
      apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js

62
apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml
View File

@ -14,7 +14,9 @@
<h3 style="text-align: center">@L["EmptyBasket"]</h3> <h3 style="text-align: center">@L["EmptyBasket"]</h3>
<br/> <br/>
<div style="text-align: center"> <div style="text-align: center">
<span>@L["CheckOtherProducts"] <a href="/">@L["ContinueShopping"]</a></span> <span>
@L["CheckOtherProducts"] <a href="/">@L["ContinueShopping"]</a>
</span>
</div> </div>
</abp-card-body> </abp-card-body>
@ -26,31 +28,47 @@
{ {
<div class="row"> <div class="row">
<div class="col-lg-9"> <div class="col-lg-9">
<div class="basket-list"> <div class="basket-list flex-container vertical">
@foreach (var item in Model.Items) @foreach (var item in Model.Items)
{ {
<div class="basket-list-item" data-product-id="@item.ProductId"> string imageName = item.ImageName.IsNullOrEmpty() ? "/product-images/noimage.jpg" : $"/product-images/{item.ImageName}";
@if (!item.ImageName.IsNullOrEmpty()) var price = (item.TotalPrice * item.Count).ToString("0.00");
{ <div class="card basket-list-item" data-product-id="@item.ProductId">
<img src="/product-images/@item.ImageName"/> <div class="card-body">
} <div class="flex-container horizontal" >
else <div class="image-container flex-item">
{ <img class="basket-item-image" src="@imageName"/>
<img src="/product-images/noimage.jpg"/> </div>
} <div class="flex-item">
@item.ProductName <div class="flex-container vertical description-container">
@if (item.Count > 1) <div class="flex-item description-header">
{ <span>@item.ProductName</span>
<text> (@("x" + item.Count))</text> </div>
} <div class="flex-item description-price">
- $@item.TotalPrice.ToString("0.00") <span>$@price</span>
<i class="fa fa-remove basket-item-remove" title="@L["RemoveFromBasket"]"></i> </div>
</div>
</div>
<div class="remove-container hide flex-item">
<i class="fa fa-trash basket-item-remove" title="@L["RemoveFromBasket"]"></i>
</div>
<div class="actions-container flex-item">
<a href="" class="basket-item-increase">
<i class="fa fa-plus-circle"></i>
</a>
<span class="basket-item-count">@item.Count</span>
<a href="" class="basket-item-decrease">
@{
string removeIcon = item.Count <= 1 ? "fa-trash" : "fa-minus-circle";
}
<i class="fa @removeIcon"></i>
</a>
</div>
</div>
</div>
</div> </div>
<hr/>
} }
<hr/>
<div class="basket-total-area">
@L["Total"]: $@Model.TotalPrice.ToString("0.00")
</div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">

131
apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css
View File

@ -1,42 +1,117 @@
/*.basket-list*/ .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-item { .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{ .image-container {
margin-top: 0; border: 2px solid #ccc !important;
border-radius: 10px;
background-color: white;
max-width: 3em;
} }
.basket-list-item img { .basket-item-image {
height: 1em; min-width: 1em;
width: 2em;
max-width: 80%;
} }
.basket-total-area .description-container {
{ align-items: baseline;
margin-bottom: 1em; }
.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; font-weight: bold;
line-height: 30px;
color: rgb(72, 72, 72);
} }
.basket-item-remove { .description-price > span {
cursor: pointer; line-height: 20px;
color: red; vertical-align: top;
opacity: 0.25;
} }
.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; opacity: 1.0;
} }

44
apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js
View File

@ -1,8 +1,6 @@
(function () { (function () {
let anonymousId = abp.utils.getCookieValue("anonymous_id"); let anonymousId = abp.utils.getCookieValue("anonymous_id");
abp.widgets.BasketWidget = function ($wrapper) { abp.widgets.BasketWidget = function ($wrapper) {
var widgetManager = $wrapper.data('abp-widget-manager'); var widgetManager = $wrapper.data('abp-widget-manager');
@ -10,23 +8,55 @@
$wrapper $wrapper
.find('.basket-item-remove') .find('.basket-item-remove')
.click(function () { .click(function () {
var $this = $(this); let $this = $(this);
var productId = $this.parent('.basket-list-item').attr('data-product-id'); let productId = $this.parents('.basket-list-item').attr('data-product-id');
eShopOnAbp.basketService.basket.removeProduct({ eShopOnAbp.basketService.basket.removeProduct({
productId: productId, productId: productId,
anonymousId: anonymousId anonymousId: anonymousId
}).then(function () { }).then(function () {
widgetManager.refresh(); widgetManager.refresh();
$('.abp-widget-wrapper[data-widget-name="CartWidget"]') $('.abp-widget-wrapper[data-widget-name="CartWidget"]')
.data('abp-widget-manager') .data('abp-widget-manager')
.refresh(); .refresh();
abp.notify.info("Removed the product from your basket.", "Removed basket item"); 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 { return {

Write Preview
Loading…
Cancel
Save