<div class="lp-reviews-page pad-md-v" >
{% set review_context = get_reviews(sources=['consumerfusion']) %}
{% set reviews = review_context.filter() %}
{% set average_rating = review_context.get_average_rating() %}
<div class="st-container">
<div class="reviews-page-heading lp-flex lp-center-xs lp-middle-xs lp-between-sm lp-center-xs">
<div class="lp-center-xs lp-start-sm">
<h1 class="lp-h2 black">Customer Reviews</h1>
<p class="p-2">Benjamin Franklin Plumbing</p>
</div>
{% if average_rating %}
<div class="reviews-panel">
<div class="reviews-logo-stars">
<div class="reviews-google-logo">
<img alt="Google reviews logo" width="32" height="32" src="/img/upload/google-g-logo.png">
</div>
<div class="reviews-stars">
<svg class="lp-icon lp-icon-stars-filled lp-icon-stars-reviews-item" role="img" focusable="false" aria-label="Number of Stars in the review"><use xlink:href="#lp-icon-stars-filled" width="134" height="24"></use></svg>
</div>
</div>
<div class="reviews-total">
<span class="reviews-avg">{{ average_rating.average_rating }}</span>
{% if place['user_ratings_total'] %}
<span class="reviews-num">({{ average_rating.count }} reviews)</span>
{% endif %}
</div>
</div>
<!--end place rating >= 4 check-->
{% endif %}
</div>
<div class="cmp-reviews-content">
<div class="lp-reviews-wrap">
{% for item in reviews %}
<div class="review-item">
<img data-src="/img/upload/bfp-review-flag.png" width="43" height="60" alt="" loading="lazy" class="lazyload review-flag">
<div class="review-header">
{% if item['author_name'] %}
<p class="review-author">{{ item['author_name'] }}</p>
{% endif %}
<div class="starrating">
<svg class="lp-icon lp-icon-stars-filled lp-icon-stars-reviews-item" role="img" focusable="false" aria-label="Number of Stars in the review">
<use xlink:href="#lp-icon-stars-filled"></use>
</svg>
</div>
{% if item['datetime'] %}
<p class="review-date">{{ item['datetime']|datefmt('long') }}</p>
{% endif %}
</div>
<p class="p-2 review-content">
{% if item['text'] %}
{{ item['text'] }}
{% endif %}
</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
<style>
/*reviews*/
.reviews {
padding-top: 72px;
padding-bottom: 72px;
}
.reviews .lp-flex {
gap: 24px;
}
.reviews .right {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.reviews .heading-wrap {
gap: 4px;
}
.reviews .heading-wrap h4 {
font-size: 17px;
font-weight: 700;
line-height: 120%; /* 20.4px */
letter-spacing: 0.85px;
text-transform: uppercase;
color: #000;
}
.reviews .slick-slide {
}
.reviews .slick-slide > div {
padding: 16px;
position: relative;
}
/*.reviews .slick-slide > div:after {*/
/* content: '';*/
/* position: absolute;*/
/* right: 16px;*/
/* top: -14px;*/
/* width: 42px;*/
/* height: 54px;*/
/* background: url(/img/upload/bfp-review-flag.png) no-repeat;*/
/* background-size: cover;*/
/* background-position: center;*/
/* z-index: 3;*/
/*}*/
.review-item {
max-width: 300px;
height: 400px;
border-radius: 8px;
background: #FFF;
box-shadow: 2px 4px 25px 0px rgba(0, 0, 0, 0.25);
z-index: 2;
max-height: 400px;
position: relative;
padding: 32px 24px;
overflow: visible;
position: relative;
display: flex!important;
flex-direction: column;
gap: 24px;
}
.review-flag {
position: absolute;
right: 16px;
top: -14px;
z-index: 3;
}
.review-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.review-author {
font-weight: 700;
line-height: 160%; /* 33.6px */
}
.review-item .starrating svg {
width: 134px;
height: 24px;
fill: var(--gold);
}
.review-date {
align-self: stretch;
color: var(--blue);
font-size: 12px;
font-weight: 700;
line-height: 160%; /* 19.2px */
}
.review-content {
line-height: 160%; /* 25.6px */
height: auto;
}
.reviews .review-content {
overflow-y: scroll;
max-height: 241px;
}
.arrows-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
position: relative;
margin-top: 32px;
}
.reviews .arrows-wrap {
margin-top: -8px;
}
.arrows-wrap .slick-arrow {
display: flex;
padding: 9px;
justify-content: center;
align-items: center;
border-radius: 100px;
background: var(--gold);
border: 4px solid black;
position: relative;
top: unset;
right: unset;
left: unset;
line-height: unset;
font-size: unset;
height: 44px;
width: 44px;
cursor: pointer;
transform: unset;
}
.arrows-wrap .slick-arrow svg {
width: 24px;
height: 24px;
fill: black
}
.reviews-cta .lp-btn.black {
background: #000;
color: var(--gold);
border-color: #000;
font-family: var(--lp-font-headline);
font-size: 17px;
font-weight: 700;
line-height: 120%; /* 20.4px */
letter-spacing: 0.51px;
padding-top: 15px;
padding-bottom: 15px;
}
@media (min-width: 992px) {
.reviews.lp-50-50 .lp-50 {
flex-basis: calc(50% - 12px);
width: calc(50% - 12px);;
}
.reviews .lp-photo {
margin-top: 62px;
}
.reviews .lp-flex {
}
.reviews .right {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
align-self: stretch;
gap: 24px;
}
.reviews-cta {
margin-top: 54px;
}
}
@media (max-width: 991px) {
.reviews {
padding-top: 32px;
}
.reviews .left {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.reviews .heading-wrap {
text-align: center;
order: 3;
}
.reviews .reviews-avg {
order: 2;
}
.reviews .lp-photo {
order: 1;
}
}
@media (max-width: 767px) {
.reviews .reviews-arrows {
display: none;
}
.reviews {
padding: 0 0 32px 0;
}
.reviews .lp-container {
padding: 0;
}
.reviews .heading-wrap, .reviews .right {
padding-left: 16px;
padding-right: 16px;
}
.reviews .lp-photo img {
border-radius: 0;
box-shadow: none;
}
}
/*Reviews page*/
.reviews-page-heading {
gap: 16px;
}
.lp-reviews-wrap {
margin-top: 32px;
columns: 3;
column-gap: 24px;
}
.lp-reviews-page .review-item {
max-width: 100%;
height: auto;
break-inside: avoid;
margin-bottom: 36px;
flex-direction: column;
gap: 24px;
max-height: none;
position: static;
}
.lp-reviews-page .review-item .review-flag {
display: none;
}
.lp-reviews-page .review-content {
max-height: unset;
}
@media screen and (max-width: 1024px) {
.lp-reviews-wrap {
columns: 2;
}
}
@media screen and (max-width: 767px) {
.lp-reviews-wrap {
columns: 1;
}
}
</style>