updated with rating system --commented out for read-only

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

@@ -4,6 +4,7 @@
 @using System.Globalization
 @using Microsoft.Extensions.Options
 @using Volo.Abp.Http.Client
+@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @model EShopOnAbp.PublicWeb.Pages.IndexModel
 @inject IStringLocalizer<EShopOnAbpResource> L
 @inject IOptions<AbpRemoteServiceOptions> options
@@ -37,20 +38,27 @@
                 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="item-link" href="/products/@product.Id.ToString()" data-product-id="@product.Id.ToString()">
                             <div class="product-title">
                                 <span>
                                     <h6>@product.Name</h6>
                                     <span class="d-block text-muted">@product.Code</span>
                                 </span>
                             </div>
+                            @* Need read-only ratings system *@
+                            @* <div class="product-ratings"> *@
+                            @*     @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>()) *@
+                            @*     { *@
+                            @*         @await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = @product.Id.ToString() }) *@
+                            @*     } *@
+                            @* </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>
                         <div class="product-item-bottom">
                             <div class="item-added">
                                 <div class="fa fa-check" style="color: yellowgreen; padding-right: 1em;"></div>

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml

@@ -1,25 +1,22 @@
 @page "/products/{id:guid}"
 @using EShopOnAbp.Localization
-@using EShopOnAbp.PublicWeb.Components.Basket
 @using Microsoft.Extensions.Localization
 @using System.Globalization
 @using Microsoft.Extensions.Options
 @using Volo.Abp.GlobalFeatures
 @using Volo.Abp.Http.Client
-@using Volo.Abp.Users
 @using Volo.CmsKit.GlobalFeatures
-@using Volo.CmsKit.Public.Comments
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 
 @inject IStringLocalizer<EShopOnAbpResource> L
 @inject IOptions<AbpRemoteServiceOptions> options
-@inject ICurrentUser CurrentUser
 
 @model EShopOnAbp.PublicWeb.Pages.ProductDetailModel
 
+
 @section styles{
-    <abp-style src="/Pages/index.css"/>
+    <abp-style src="/Pages/productDetails.css"/>
 }
 
 @section scripts {
@@ -81,7 +78,8 @@
                     }
                 </abp-column>
                 <abp-column size-md="_12">
-                    @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
+                    @* Need read-only commenting system *@
+                    @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>() && Model.IsPurschased)
                     {
                         @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = @product.Id.ToString() })
                     }

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

@@ -34,10 +34,17 @@ a, a:hover, a:visited, a:active {
     flex-direction: column;
 }
 
-.product-item-bottom {
+.product-ratings {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
-    min-height: 70px;
+}
+
+.text-muted.ms-1.text-decoration-none {
+    display: none;
+}
+
+.rating-undo-link.text-decoration-none {
+    display: none;
 }
 
 .product-title {
@@ -45,6 +52,12 @@ a, a:hover, a:visited, a:active {
     padding-bottom: 1em;
 }
 
+.product-item-bottom {
+    display: flex;
+    flex-direction: column;
+    min-height: 70px;
+}
+
 .product-count {
     display: flex;
     justify-content: center;

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

@@ -27,4 +27,12 @@
             });
         });
     });
+
+    $(function () {
+        $(".item-link").click(function () {
+            var $this = $(this);
+            var productId = $this.attr('data-product-id');
+            location.href += "products/" + productId;
+        });
+    })
 })();

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/productDetails.css

@@ -0,0 +1,100 @@
+body {
+    background-color: #f9f9f9;
+}
+
+a, a:hover, a:visited, a:active {
+    color: inherit;
+    text-decoration: none;
+    padding-bottom: 1em;
+}
+
+.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 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-ratings {
+    display: flex;
+    justify-content: center;
+}
+
+.product-title {
+    min-height: 70px;
+    padding-bottom: 1em;
+}
+
+.product-item-bottom {
+    display: flex;
+    flex-direction: column;
+    min-height: 70px;
+}
+
+.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;
+}
+
+.product-list-item img {
+    width: 100%;
+}
+
+.product-list-item .text-muted {
+    opacity: .8
+}
+
+.add-basket-button {
+    display: none;
+    font-weight: 500;
+}
+
+.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 {
+    display: none;
+}
+
+.product-price {
+    font-weight: bolder;
+    font-size: larger;
+    line-height: 40px;
+}
+
+.item-added {
+    display: none;
+    justify-content: center;
+    align-items: baseline;
+}