Skip to content

Commit 3aefbee

Browse files
PatrykPorabikPatrykPorabik
committed
Missing itemprop="image" for product pictures #102 & Fix for reviews structured data
1 parent 9c95611 commit 3aefbee

File tree

2 files changed

+92
-88
lines changed

2 files changed

+92
-88
lines changed

‎src/Web/Grand.Web/Views/Product/_Pictures.cshtml‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@
22

33
<div class="col-xl-6 col-lg-6 col-md-5 col-12 mt-md-0 mt-3 px-0">
44
<div class="gallery">
5-
@if (Model.PictureModels.Count == 1)
5+
@if (Model.PictureModels.Any())
66
{
7-
@if (Model.DefaultPictureZoomEnabled)
8-
{
9-
<gallery-images></gallery-images>
7+
var schemaPicture = Model.PictureModels.FirstOrDefault();
8+
<img src="@schemaPicture.FullSizeImageUrl" class="d-none" itemprop="image">
9+
}
10+
@if (Model.PictureModels.Count == 1) { @if (Model.DefaultPictureZoomEnabled) {
11+
<gallery-images></gallery-images>
1012

11-
<script type="text/html" id="picture">
12-
<div>
13-
<img class="image main-image zoom" id="main-product-img-@Model.Id" v-for="(image, i) in images" :src="image.url" :alt="image.alt"
14-
:title="image.title" :key="i" @@click="index=i">
15-
<vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
16-
</div>
17-
</script>
18-
<script asp-location="Footer" asp-order="300">
13+
<script type="text/html" id="picture">
14+
<div>
15+
<img class="image main-image zoom" id="main-product-img-@Model.Id" v-for="(image, i) in images" :src="image.url" :alt="image.alt"
16+
:title="image.title" :key="i" @@click="index=i">
17+
<vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
18+
</div>
19+
</script>
20+
<script asp-location="Footer" asp-order="300">
1921
Vue.component('gallery-images', {
2022
template: '#picture',
2123
data() {
@@ -35,7 +37,6 @@
3537
{ url: '@picture.ImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
3638
</text>
3739
}
38-
3940
}
4041
],
4142
index: null
@@ -45,46 +46,46 @@
4546
VueGallerySlideshow
4647
},
4748
});
48-
</script>
49+
</script>
4950

50-
}
51-
else
52-
{
53-
<img id="main-product-img-@Model.Id" class="image main-image"
54-
src="@Model.DefaultPictureModel.ImageUrl"
55-
alt="@Model.DefaultPictureModel.AlternateText"
56-
title="@Model.DefaultPictureModel.Title" />
57-
}
5851
}
59-
@if (Model.PictureModels.Count == 0)
52+
else
6053
{
6154
<img id="main-product-img-@Model.Id" class="image main-image"
6255
src="@Model.DefaultPictureModel.ImageUrl"
6356
alt="@Model.DefaultPictureModel.AlternateText"
6457
title="@Model.DefaultPictureModel.Title" />
6558
}
66-
@if (Model.DefaultPictureZoomEnabled)
59+
}
60+
@if (Model.PictureModels.Count == 0)
61+
{
62+
<img id="main-product-img-@Model.Id" class="image main-image"
63+
src="@Model.DefaultPictureModel.ImageUrl"
64+
alt="@Model.DefaultPictureModel.AlternateText"
65+
title="@Model.DefaultPictureModel.Title" />
66+
}
67+
@if (Model.DefaultPictureZoomEnabled)
68+
{
69+
@if (Model.PictureModels.Count > 1)
6770
{
68-
@if (Model.PictureModels.Count > 1)
69-
{
7071

71-
<img id="main-product-img-@Model.Id" class="image main-image zoom"
72-
src="@Model.DefaultPictureModel.ImageUrl"
73-
alt="@Model.DefaultPictureModel.AlternateText"
74-
title="@Model.DefaultPictureModel.Title"
75-
onclick="document.querySelector('.thumb-image').click()" />
72+
<img id="main-product-img-@Model.Id" class="image main-image zoom"
73+
src="@Model.DefaultPictureModel.ImageUrl"
74+
alt="@Model.DefaultPictureModel.AlternateText"
75+
title="@Model.DefaultPictureModel.Title"
76+
onclick="document.querySelector('.thumb-image').click()" />
7677

77-
<script type="text/html" id="picture">
78+
<script type="text/html" id="picture">
79+
<div>
80+
<img class="image thumb-image zoom" v-for="(image, i) in images" :src="image.url" :datasrc="image.fullimg"
81+
:alt="image.alt" :title="image.title" :key="i" @@click="index=i">
7882
<div>
79-
<img class="image thumb-image zoom" v-for="(image, i) in images" :src="image.url" :datasrc="image.fullimg"
80-
:alt="image.alt" :title="image.title" :key="i" @@click="index=i">
81-
<div>
82-
<vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
83-
</div>
83+
<vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
8484
</div>
85-
</script>
86-
<gallery-images></gallery-images>
87-
<script asp-location="Footer" asp-order="300">
85+
</div>
86+
</script>
87+
<gallery-images></gallery-images>
88+
<script asp-location="Footer" asp-order="300">
8889
Vue.component('gallery-images', {
8990
template: '#picture',
9091
data() {
@@ -104,7 +105,6 @@
104105
{ url: '@picture.ImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
105106
</text>
106107
}
107-
108108
}
109109
],
110110
index: null
@@ -114,29 +114,29 @@
114114
VueGallerySlideshow
115115
},
116116
});
117-
</script>
118-
}
117+
</script>
119118
}
120-
else
119+
}
120+
else
121+
{
122+
@if (Model.PictureModels.Count > 1)
121123
{
122-
@if (Model.PictureModels.Count > 1)
123-
{
124-
<img id="main-product-img-@Model.Id" class="image main-image"
125-
src="@Model.DefaultPictureModel.ImageUrl"
126-
alt="@Model.DefaultPictureModel.AlternateText"
127-
title="@Model.DefaultPictureModel.Title" />
128-
<div>
129-
@foreach (var picture in Model.PictureModels)
130-
{
131-
<img class="image thumb-image"
132-
src="@picture.ThumbImageUrl"
133-
alt="@picture.AlternateText"
134-
title="@picture.Title"
135-
data-src="@picture.ImageUrl"
136-
@@click="Gallery.extendOptions.methods.changeImg($event)" />
137-
}
138-
</div>
139-
<script asp-location="Footer" asp-order="300">
124+
<img id="main-product-img-@Model.Id" class="image main-image"
125+
src="@Model.DefaultPictureModel.ImageUrl"
126+
alt="@Model.DefaultPictureModel.AlternateText"
127+
title="@Model.DefaultPictureModel.Title" />
128+
<div>
129+
@foreach (var picture in Model.PictureModels)
130+
{
131+
<img class="image thumb-image"
132+
src="@picture.ThumbImageUrl"
133+
alt="@picture.AlternateText"
134+
title="@picture.Title"
135+
data-src="@picture.ImageUrl"
136+
@@click="Gallery.extendOptions.methods.changeImg($event)" />
137+
}
138+
</div>
139+
<script asp-location="Footer" asp-order="300">
140140
var gallery = new Vue({
141141
methods: {
142142
changeImg(event) {
@@ -146,8 +146,8 @@
146146
}
147147
}
148148
})
149-
</script>
150-
}
149+
</script>
151150
}
151+
}
152152
</div>
153153
</div>

‎src/Web/Grand.Web/Views/Product/_ProductReviewOverview.cshtml‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
ratingPercent = ((Model.RatingSum * 100) / Model.TotalReviews) / 5;
88
}
99
}
10-
<div class="product-reviews-overview d-inline-flex align-items-center flex-wrap" @if (Model.TotalReviews > 0) { <text> itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" </text> }>
10+
<div class="product-reviews-overview d-inline-flex align-items-center flex-wrap" @if (Model.TotalReviews > 0)
11+
{ <text> itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" </text> }>
1112
<div class="product-review-box d-inline-block order-1">
1213
@{
1314
double ratingValue = 0;
@@ -16,28 +17,31 @@
1617
ratingValue = Convert.ToDouble(((Model.RatingSum * (double)100) / Model.TotalReviews) / (double)100);
1718
}
1819
}
19-
<div class="rating">
20-
<b-form-rating id="rating-inline-overview-@Model.ProductId" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline value="@(ratingValue.ToString("0.00", CultureInfo.InvariantCulture))"></b-form-rating>
21-
@if (Model.TotalReviews > 0)
22-
{
23-
<div class="product-review-links order-3">
24-
<b-button variant="outline-info" size="sm" class="review-scroll-button" @@click="active = true" href="#review-tab___BV_tab_button__">
25-
@Model.TotalReviews
26-
@Loc["Reviews.Overview.Reviews"]
27-
</b-button>
28-
</div>
29-
@* rendering microdata info*@
30-
double ratingValuee = ratingPercent / (double)20;
31-
<span itemprop="reviewCount" style="display: none;">(@ratingValuee.ToString("0.0", new CultureInfo("en-US")))</span>
32-
}
33-
else
34-
{
35-
<div class="product-no-reviews order-3">
36-
<a class="btn btn-sm btn-outline-info" @@click="addProductReview('@Url.RouteUrl("ProductReviews", new { productId = Model.ProductId })')">
37-
@Loc["Reviews.Overview.First"]
38-
</a>
39-
</div>
40-
}
41-
</div>
20+
<div class="rating">
21+
<b-form-rating id="rating-inline-overview-@Model.ProductId" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline value="@(ratingValue.ToString("0.00", CultureInfo.InvariantCulture))"></b-form-rating>
22+
@if (Model.TotalReviews > 0)
23+
{
24+
<div class="product-review-links order-3">
25+
<b-button variant="outline-info" size="sm" class="review-scroll-button" @@click="active = true" href="#review-tab___BV_tab_button__">
26+
@Model.TotalReviews
27+
@Loc["Reviews.Overview.Reviews"]
28+
</b-button>
29+
</div>
30+
}
31+
else
32+
{
33+
<div class="product-no-reviews order-3">
34+
<a class="btn btn-sm btn-outline-info" @@click="addProductReview('@Url.RouteUrl("ProductReviews", new { productId = Model.ProductId })')">
35+
@Loc["Reviews.Overview.First"]
36+
</a>
37+
</div>
38+
}
39+
@{
40+
@* rendering microdata info*@
41+
double value = ratingPercent / (double)20;
42+
<span itemprop="ratingValue" class="d-none">(@value.ToString("0.0", new CultureInfo("en-US")))</span>
43+
<span itemprop="reviewCount" class="d-none">@Model.TotalReviews</span>
44+
}
45+
</div>
4246
</div>
4347
</div>

0 commit comments

Comments
 (0)