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

Created BasketWidgetViewComponent

pull/37/head
Halil İbrahim Kalkan 5 years ago
parent
f58c47c416
commit
a544e889ef
4 changed files with 67 additions and 36 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. 15
      apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/BasketWidgetViewComponent.cs
  2. 3
      apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml
  3. 77
      apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Catalog.cshtml
  4. 8
      apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml

15
apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/BasketWidgetViewComponent.cs
View File

@ -0,0 +1,15 @@
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
namespace EShopOnAbp.PublicWeb.Components.Basket;
[Widget]
public class BasketWidgetViewComponent : AbpViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
return View("~/Components/Basket/Default.cshtml");
}
}

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

@ -0,0 +1,3 @@
<div>
<p>Basket content will come here!</p>
</div>

77
apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Catalog.cshtml
View File

@ -1,46 +1,59 @@
@page
@using EShopOnAbp.PublicWeb.Components.Basket
@model EShopOnAbp.PublicWeb.Pages.Catalog
@{
const int columnSize = 3;
const int productsColumnSize = 2;
}
@section styles{
<abp-style src="/Pages/Catalog.css" />
<abp-style src="/Pages/Catalog.css"/>
}
<h3 class="pt-5 pb-4 text-center">Our Products</h3>
<div class="product-list">
@for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)columnSize); i++)
{
<abp-row>
@for (int j = 0; j < columnSize; j++)
<div class="row">
<div class="col-lg-9">
<h3 class="pt-5 pb-4 text-center">Our Products</h3>
<div class="product-list">
@for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)productsColumnSize); i++)
{
<abp-column size-lg="_4" size-md="_6" size-sm="_12">
@if ((i * columnSize) + j < Model.Products.Count)
<abp-row>
@for (int j = 0; j < productsColumnSize; j++)
{
var product = Model.Products[(i * columnSize) + j];
<div class="product-list-item">
@if (!product.ImageName.IsNullOrEmpty())
<abp-column size-lg="_6" size-sm="_12">
@if ((i * productsColumnSize) + j < Model.Products.Count)
{
<img src="/product-images/@product.ImageName" />
}
else
{
<img src="/product-images/noimage.jpg" />
}
<div class="row mt-5">
<div class="col">
<div class="product-info-box">
<h6>@product.Name</h6>
<em class="d-block text-muted">@product.Code - Stock count: @product.StockCount</em>
var product = Model.Products[(i * productsColumnSize) + j];
<div class="product-list-item">
@if (!product.ImageName.IsNullOrEmpty())
{
<img src="/product-images/@product.ImageName"/>
}
else
{
<img src="/product-images/noimage.jpg"/>
}
<div class="row mt-5">
<div class="col">
<div class="product-info-box">
<h6>@product.Name</h6>
<em class="d-block text-muted">@product.Code - Stock count: @product.StockCount</em>
</div>
</div>
<div class="col-auto text-right text-danger">
<strong class="product-price">$@product.Price</strong>
</div>
</div>
</div>
<div class="col-auto text-right text-danger">
<strong class="product-price">$@product.Price</strong>
</div>
</div>
</div>
}
</abp-column>
}
</abp-column>
</abp-row>
}
</abp-row>
}
</div>
</div>
<div class="col-lg-3">
<h3 class="pt-5 pb-4 text-center">Your Basket</h3>
<div class="basket-area">
@await Component.InvokeAsync(typeof(BasketWidgetViewComponent))
</div>
</div>
</div>

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

@ -17,7 +17,7 @@
<i class="fas fa-chess-rook fa-4x text-primary d-block my-3"></i>
<h2>Heading</h2>
<p class="lead">Vestibulum id ligula porta.</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-outline-primary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 py-4">
@ -43,7 +43,7 @@
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-6">
<img src="https://i.picsum.photos/id/59/600/400.jpg?hmac=hCS_vJsQfuK1hUlwEUlGbUAnb_pFljGkD-2jdYxB1y8" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;" />
<img src="https://i.picsum.photos/id/59/600/400.jpg?hmac=hCS_vJsQfuK1hUlwEUlGbUAnb_pFljGkD-2jdYxB1y8" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;"/>
</div>
</div>
@ -54,7 +54,7 @@
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-6 order-md-1">
<img src="https://i.picsum.photos/id/437/600/400.jpg?hmac=JNv4AQJrQn53c1Xh1C7q0NBNoJgRXpdKtzIDJ1w2lqA" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;" />
<img src="https://i.picsum.photos/id/437/600/400.jpg?hmac=JNv4AQJrQn53c1Xh1C7q0NBNoJgRXpdKtzIDJ1w2lqA" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;"/>
</div>
</div>
@ -65,7 +65,7 @@
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-6">
<img src="https://i.picsum.photos/id/835/600/400.jpg?hmac=HR6Bi8aji8auDURA6j9xiZC6QgcFwwBTMJ8X4Cf6bPg" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;" />
<img src="https://i.picsum.photos/id/835/600/400.jpg?hmac=HR6Bi8aji8auDURA6j9xiZC6QgcFwwBTMJ8X4Cf6bPg" class="rounded shadow-sm my-4 my-md-0" style="max-width: 100%;"/>
</div>
</div>

Write Preview
Loading…
Cancel
Save