XCORNER-7 reviews carousel widget

xfiveco · Jan 10, 2024 · e4b5744 · e4b5744
1 parent 4095b09
commit e4b5744
Show file tree

Hide file tree

Showing 7 changed files with 341 additions and 1 deletion.
diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js
@@ -51,6 +51,38 @@ export default function startSwiper(context) {
         },
     }
 
+    const carouselParamsOverflow = {
+        direction: 'horizontal',
+        modules: [Navigation, Pagination],
+        allowSlideNext: true,
+        allowSlidePrev: true,
+        slidesPerView: 1,
+        speed: 500,
+        loop: false,
+        spaceBetween: 48,
+        autoplay: {
+            delay: 3000,
+        },
+        breakpoints: {
+            480: {
+                slidesPerView: 2,
+                spaceBetween: 40,
+            },
+            768: {
+                slidesPerView: 4,
+                spaceBetween: 40,
+            },
+        },
+        navigation: {
+            nextEl: '.js-swiper-btn-next',
+            prevEl: '.js-swiper-btn-prev',
+        },
+        pagination: {
+            el: '.js-swiper-pagination',
+            clickable: true,
+        },
+    }
+
     if (q$('.js-featured-swiper') !== null) {
         new Swiper('.js-featured-swiper', carouselParams)
     }
@@ -62,4 +94,8 @@ export default function startSwiper(context) {
     if (q$('.js-new-swiper') !== null) {
         new Swiper('.js-new-swiper', carouselParams)
     }
+
+    if (q$('.js-review-swiper') !== null) {
+        new Swiper('.js-review-swiper', carouselParamsOverflow)
+    }
 }
diff --git a/assets/scss/widgets/reviews.scss b/assets/scss/widgets/reviews.scss
@@ -0,0 +1,91 @@
+$swiper-arrow-left-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSIjNUE2NEMxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==';
+$swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNSAxMkgxOU0xOSAxMkwxMiA1TTE5IDEyTDEyIDE5IiBzdHJva2U9IiM1QTY0QzEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
+
+.reviews-carousel {
+    overflow: visible;
+
+    .swiper-slide {
+        max-width: 80%;
+
+        @include bp(small) {
+            max-width: 100%;
+        }
+    }
+}
+
+.review-card {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 24px;
+    padding: 24px;
+    box-shadow: 0px 12px 48px 0px rgba(39, 39, 39, 0.04);
+    background-color: $color-white;
+    border-radius: 4px;
+
+    .summary {
+        color: $color-black;
+        font-family: $font-regular;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5;
+    }
+
+    .name {
+        color: $color-black;
+        font-family: $font-semi-bold;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.4;
+    }
+}
+
+.review-slide-navigation {
+    margin: 48px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    max-width: fit-content;
+
+    .js-swiper-btn-next,
+    .js-swiper-btn-prev {
+        width: 24px;
+        height: 24px;
+        border: 0 !important;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .js-swiper-btn-next {
+        background-image: url($swiper-arrow-right-purple);
+    }
+
+    .js-swiper-btn-prev {
+        background-image: url($swiper-arrow-left-purple);
+    }
+
+    .js-swiper-pagination {
+        border: 0 !important;
+        padding: 0 !important;
+        display: flex;
+        justify-content: space-between;
+        gap: 24px;
+
+        .swiper-pagination-bullet {
+            background-color: transparent;
+            opacity: 1;
+            border: 2px solid $color-primary-300;
+            width: 12px;
+            height: 12px;
+            margin: 0 !important;
+
+            &-active {
+                background-color: $color-primary-300;
+            }
+        }
+    }
+}
diff --git a/assets/scss/widgets/widgets.scss b/assets/scss/widgets/widgets.scss
@@ -1 +1,2 @@
-@import './hero-slider';
+@import './hero-slider';
+@import './reviews.scss';
diff --git a/widget-templates/Reviews/config.json b/widget-templates/Reviews/config.json
@@ -0,0 +1,45 @@
+{
+  "desktop_margin": {
+    "top": {
+      "value": "0",
+      "type": "px"
+    },
+    "right": {
+      "value": "0",
+      "type": "px"
+    },
+    "bottom": {
+      "value": "0",
+      "type": "px"
+    },
+    "left": {
+      "value": "0",
+      "type": "px"
+    }
+  },
+  "mobile_margin": {
+    "top": {
+      "value": "0",
+      "type": "px"
+    },
+    "right": {
+      "value": "0",
+      "type": "px"
+    },
+    "bottom": {
+      "value": "0",
+      "type": "px"
+    },
+    "left": {
+      "value": "0",
+      "type": "px"
+    }
+  },
+  "slides": [
+    {
+      "name": "John Smith",
+      "summary": "Review Summary",
+      "rating": 5
+    }
+  ]
+}
diff --git a/widget-templates/Reviews/schema.json b/widget-templates/Reviews/schema.json
@@ -0,0 +1,103 @@
+[
+    {
+      "type": "tab",
+      "label": "Settings",
+      "sections": [
+        {
+          "label": "Content",
+          "settings": [
+            {
+              "type": "boxModel",
+              "label": "Desktop Margin",
+              "id": "desktop_margin",
+              "default": {
+                "top": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "right": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "bottom": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "left": {
+                  "value": "0",
+                  "type": "px"
+                }
+              }
+            },
+            {
+              "type": "boxModel",
+              "label": "Mobile Margin",
+              "id": "mobile_margin",
+              "default": {
+                "top": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "right": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "bottom": {
+                  "value": "0",
+                  "type": "px"
+                },
+                "left": {
+                  "value": "0",
+                  "type": "px"
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "array",
+      "label": "Slides",
+      "id": "slides",
+      "defaultCount": 1,
+      "entryLabel": "Slide",
+      "schema": [
+          {
+            "type": "tab",
+            "label": "Slide",
+            "sections": [
+                {
+                    "settings": [
+                        {
+                            "type": "input",
+                            "label": "Reviewer Name",
+                            "id": "name",
+                            "default": "John Smith"
+                        },
+                        {
+                            "type": "text",
+                            "label": "Review Summary",
+                            "id": "summary",
+                            "default": "Review Summary"
+                        },
+                        {
+                            "type": "range",
+                            "label": "Rating",
+                            "id": "rating",
+                            "default": 5,
+                            "typeMeta": {
+                                "rangeValues": {
+                                    "min": 1,
+                                    "max": 5,
+                                    "step": 0.5
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+          }
+      ]
+  }
+]
diff --git a/widget-templates/Reviews/widget.html b/widget-templates/Reviews/widget.html
@@ -0,0 +1,63 @@
+
+
+<style>
+    .reviews-carousel-{{_.id}} {
+        margin-top: {{desktop_margin.top.value}}{{desktop_margin.top.type}};
+        margin-bottom: {{desktop_margin.bottom.value}}{{desktop_margin.bottom.type}};
+    }
+
+    @media screen and (max-width: 767px) {
+        .reviews-carousel-{{_.id}} {
+            margin-top: {{mobile_margin.top.value}}{{mobile_margin.top.type}};
+            margin-bottom: {{mobile_margin.bottom.value}}{{mobile_margin.bottom.type}};
+        }
+    }
+</style>
+
+<section class="js-review-swiper c-carousel reviews-carousel reviews-carousel-{{_.id}}">
+    <div class="swiper-wrapper">
+        {{#each slides}}
+            <div class="swiper-slide">
+                <div class="review-card" data-rating="{{rating}}">
+                    <div class="rating-stars"></div>
+                    <div class="summary">{{summary}}</div>
+                    <div class="name">{{name}}</div>
+                </div>
+            </div>
+        {{/each}}
+    </div>
+
+    <div class="review-slide-navigation">
+        <div class="js-swiper-btn-prev"></div>
+        <div class="js-swiper-pagination"></div>
+        <div class="js-swiper-btn-next"></div>
+    </div>
+</section>
+
+<script>
+    function updateStarRatings() {
+        const reviewCards = document.querySelectorAll('.review-card');
+
+        reviewCards.forEach(card => {
+            const rating = parseFloat(card.dataset.rating);
+            const fullStar = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 0L7.66869 4.21848L12 4.58359L8.7 7.55587L9.7082 12L6 9.61848L2.2918 12L3.3 7.55587L0 4.58359L4.33131 4.21848L6 0Z" fill="#C1A45A"/></svg>';
+            const halfStar = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 1.35931L7.20375 4.4024L7.31778 4.69068L7.62669 4.71672L10.8074 4.98484L8.36538 7.18435L8.14752 7.38056L8.21239 7.66649L8.95026 10.919L6.27019 9.19777L6 9.02425L5.72981 9.19777L3.04974 10.919L3.78761 7.66649L3.85247 7.38056L3.63462 7.18435L1.19259 4.98484L4.37331 4.71672L4.68222 4.69068L4.79625 4.4024L6 1.35931Z" fill="url(#paint0_linear_3074_23531)" stroke="#C1A45A"/> <defs> <linearGradient id="paint0_linear_3074_23531" x1="0" y1="6" x2="12" y2="6" gradientUnits="userSpaceOnUse"> <stop stop-color="#C1A45A"/> <stop offset="0.5" stop-color="#C1A45A"/> <stop offset="0.5" stop-color="#C1A45A" stop-opacity="0"/> <stop offset="1" stop-color="#C1A45A" stop-opacity="0"/> </linearGradient> </defs> </svg>';
+            const emptyStar = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 1.35931L7.20375 4.4024L7.31778 4.69068L7.62669 4.71672L10.8074 4.98484L8.36538 7.18435L8.14752 7.38056L8.21239 7.66649L8.95026 10.919L6.27019 9.19777L6 9.02425L5.72981 9.19777L3.04974 10.919L3.78761 7.66649L3.85247 7.38056L3.63462 7.18435L1.19259 4.98484L4.37331 4.71672L4.68222 4.69068L4.79625 4.4024L6 1.35931Z" stroke="#C1A45A"/> </svg>';
+
+            let html = '';
+            for (let i = 1; i <= 5; i++) {
+                if (i <= rating) {
+                    html += fullStar;
+                } else if (i - 0.5 === rating) {
+                    html += halfStar;
+                } else {
+                    html += emptyStar;
+                }
+            }
+
+            card.querySelector('.rating-stars').innerHTML = html;
+        });
+    }
+
+    updateStarRatings();
+</script>
diff --git a/widget-templates/Reviews/widget.yml b/widget-templates/Reviews/widget.yml
@@ -0,0 +1 @@
+deb337bd-2b3d-4cdb-ac8f-24d82d288daf