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

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

@ -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 {

Write Preview
Loading…
Cancel
Save