us1zcljz
/
eShopOnAbp
forked from tsai/eShopOnAbp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fixed product list page

gterdem/angular_localization_fix
Galip Tolga Erdem 3 years ago
parent
cd5fac8c92
commit
4fbd8c4daa
3 changed files with 99 additions and 53 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. 87
      apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml
  2. 57
      apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css
  3. 8
      apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js

87
apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml
View File

@ -9,17 +9,16 @@
@inject IOptions<AbpRemoteServiceOptions> options
@{
const int productsColumnSize = 4; // TODO: update abp-column helper to plain html for proper row and columns css
string pageHeader = L["OurProducts"];
}
@section styles{
<abp-style src="/Pages/index.css" />
<abp-style src="/Pages/index.css"/>
}
@section scripts {
<abp-script src="/client-proxies/basket-proxy.js" />
<abp-script src="/Pages/index.js" />
<abp-script src="/client-proxies/basket-proxy.js"/>
<abp-script src="/Pages/index.js"/>
}
@if (Model.HasRemoteServiceError)
@ -27,50 +26,50 @@
pageHeader = L["CatalogServiceNotAvailable"];
}
<div class="row">
<div class="col-lg-12">
<h3 class="pb-4 text-center">@pageHeader</h3>
<div class="container">
<h3 class="pb-4 text-center">@pageHeader</h3>
<div class="">
<div class="product-list">
@for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)productsColumnSize); i++)
@foreach (var product in Model.Products)
{
<abp-row>
@for (int j = 0; j < productsColumnSize; j++)
{
<abp-column size-lg="_3" size-md="_4" size-sm="_6">
@if ((i * productsColumnSize) + j < Model.Products.Count)
var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
string buyText = L["Index:AddToBasket"];
<div class="product-container">
<div class="product-list-item" data-product-id="@product.Id.ToString()">
<a href="/products/@product.Id.ToString()">
<div class="product-title">
<span>
<h6>@product.Name</h6>
<span class="d-block text-muted">@product.Code</span>
</span>
</div>
<div class="product-image">
<img src="@productImage" loading="lazy"/>
</div>
<div class="product-count">
<span class="d-block">@L["StockCount"]: @product.StockCount</span>
</div>
</a>
<div class="product-item-bottom">
<div class="item-added">
<div class="fa fa-check" style="color: yellowgreen; padding-right: 1em;"></div>
<span style="display: flex">Added to cart</span>
</div>
@if (product.StockCount > 0)
{
var product = Model.Products[(i * productsColumnSize) + j];
var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
string buyText = L["Index:AddToBasket"];
<div class="product-list-item" data-product-id="@product.Id.ToString()">
<a href="/products/@product.Id.ToString()">
<div class="col">
<div class="product-info-box">
<h6>@product.Name</h6>
<em class="d-block text-muted">@product.Code - @L["StockCount"]: @product.StockCount</em>
</div>
</div>
<img src="@productImage" />
</a>
<div class="row mt-5 ">
@if (product.StockCount > 0)
{
<abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
}
else
{
<abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]" />
}
<div class="info-section col" style="text-align: center">
<span class="product-price">@productPrice</span>
</div>
</div>
</div>
<abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
}
</abp-column>
}
</abp-row>
else
{
<abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]"/>
}
<div class="info-section col">
<span class="product-price">@productPrice</span>
</div>
</div>
</div>
</div>
}
</div>
</div>

57
apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css
View File

@ -5,20 +5,54 @@
a, a:hover, a:visited, a:active {
color: inherit;
text-decoration: none;
padding-bottom: 1em;
}
.product-list-item {
.product-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em 2em; /* row-gap column gap */
}
.product-container {
text-align: center;
background-color: #fff;
padding: 2em;
padding: 2em 2em 1em 2em;
border: 1px solid #eee;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
margin-bottom: 2em;
transition: all .2s;
display: flex;
flex: 0 0 20%;
flex-direction: column;
}
.product-list-item {
display: flex;
flex-direction: column;
}
.product-item-bottom {
display: flex;
flex-direction: column;
min-height: 70px;
}
.product-title {
min-height: 70px;
padding-bottom: 1em;
}
.product-list-item:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
.product-count {
display: flex;
justify-content: center;
padding: 1em 0 1em 0em;
}
.product-container:hover {
box-shadow: 1px 1px 20px rgba(0, 0, 0, .2);
cursor: pointer;
}
@ -30,10 +64,6 @@ a, a:hover, a:visited, a:active {
opacity: .8
}
.product-info-box {
min-height: 80px;
}
.add-basket-button {
display: none;
font-weight: 500;
@ -41,6 +71,11 @@ a, a:hover, a:visited, a:active {
.product-list-item:hover .add-basket-button {
display: inline-block;
width: -webkit-fill-available;
}
.info-section {
text-align: center;
}
.product-list-item:hover .info-section {
@ -51,4 +86,10 @@ a, a:hover, a:visited, a:active {
font-weight: bolder;
font-size: larger;
line-height: 40px;
}
.item-added {
display: none;
justify-content: center;
align-items: baseline;
}

8
apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js
View File

@ -17,7 +17,13 @@
.data('abp-widget-manager')
.refresh();
abp.notify.success("Added product to your basket.", "Successfully added");
abp.notify.success("Added product to your basket.", "Successfully added"); //TODO: localize the msg
var $itemAdded = $this.parent(".product-item-bottom").find(".item-added");
$($itemAdded).css({display: "flex"});
$this.css({opacity: 0.5});
$this.animate({opacity: 1}, 2000);
}).catch(err => {
abp.notify.error(err.message, "Failed while adding item"); //TODO: localize the msg
});
});
});

Write Preview
Loading…
Cancel
Save