From c128fc1b1edca101b1628a72ef586f044cdcd10f Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 9 Jan 2024 18:57:40 +0100 Subject: [PATCH 01/11] XCORNER-8 widget hero slider --- widget-templates/.env | 5 + widget-templates/Hero Slider/config.json | 55 ++++++++ widget-templates/Hero Slider/schema.json | 157 +++++++++++++++++++++++ widget-templates/Hero Slider/widget.html | 73 +++++++++++ widget-templates/Hero Slider/widget.yml | 1 + 5 files changed, 291 insertions(+) create mode 100644 widget-templates/.env create mode 100644 widget-templates/Hero Slider/config.json create mode 100644 widget-templates/Hero Slider/schema.json create mode 100644 widget-templates/Hero Slider/widget.html create mode 100644 widget-templates/Hero Slider/widget.yml diff --git a/widget-templates/.env b/widget-templates/.env new file mode 100644 index 00000000..9cf42803 --- /dev/null +++ b/widget-templates/.env @@ -0,0 +1,5 @@ + +WIDGET_BUILDER_AUTH_ID=af664i3xzysy0w15y3wodgqeas3cmcm +WIDGET_BUILDER_AUTH_TOKEN=e04hhncadvybxky4kh7fg277letuzcf +WIDGET_BUILDER_CHANNEL_ID=1 +WIDGET_BUILDER_API_GATEWAY_BASE=https://api.bigcommerce.com/stores/b18lv7d9ff/v3 diff --git a/widget-templates/Hero Slider/config.json b/widget-templates/Hero Slider/config.json new file mode 100644 index 00000000..1ab3c448 --- /dev/null +++ b/widget-templates/Hero Slider/config.json @@ -0,0 +1,55 @@ +{ + "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": [ + { + "title": "Slide Title", + "subtext": "Slide Sub Text", + "price": "Price", + "main_button": { + "visibility": "show" + }, + "secondary_button": { + "visibility": "show" + }, + "image": { + "src": "", + "type": "IMAGE_MANAGER" + } + } + ] +} \ No newline at end of file diff --git a/widget-templates/Hero Slider/schema.json b/widget-templates/Hero Slider/schema.json new file mode 100644 index 00000000..e8f058a1 --- /dev/null +++ b/widget-templates/Hero Slider/schema.json @@ -0,0 +1,157 @@ +[ + { + "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": "Title", + "id": "title", + "default": "Slide Title" + }, + { + "type": "input", + "label": "Subtext", + "id": "subtext", + "default": "Slide Sub Text" + }, + { + "type": "input", + "label": "Price", + "id": "price", + "default": "Price" + }, + { + "type": "element", + "label": "Main Button", + "id": "main_button", + "typeMeta": { + "controls": { + "visibility": { + "default": "show" + }, + "advanced": { + "settings": [ + { + "type": "input", + "label": "Button Text", + "id": "text" + }, + { + "type": "input", + "label": "Button URL", + "id": "url" + } + ] + } + } + } + }, + { + "type": "element", + "label": "Secondary Button", + "id": "secondary_button", + "typeMeta": { + "controls": { + "visibility": { + "default": "show" + }, + "advanced": { + "settings": [ + { + "type": "input", + "label": "Button Text", + "id": "text" + }, + { + "type": "input", + "label": "Button URL", + "id": "url" + } + ] + } + } + } + }, + { + "type": "imageManager", + "label": "Image", + "id": "image", + "default": { + "src": "", + "type": "IMAGE_MANAGER" + } + } + ] + } + ] + } + ] +} +] \ No newline at end of file diff --git a/widget-templates/Hero Slider/widget.html b/widget-templates/Hero Slider/widget.html new file mode 100644 index 00000000..2cced142 --- /dev/null +++ b/widget-templates/Hero Slider/widget.html @@ -0,0 +1,73 @@ + + + +
+
+ {{#each slides}} +
+
+ {{#if image}}{{/if}} + {{#or title subtext}} +
+ {{#if title}}

{{title}}

{{/if}} + {{#if subtext}}

{{subtext}}

{{/if}} + {{#if price}}

$ {{price}}

{{/if}} + {{#or main_button secondary_button}} +
+ {{#if main_button}} + {{main_button.text}} + {{/if}} + {{#if secondary_button}} + {{secondary_button.text}} + {{/if}} +
+ {{/or}} +
+ {{/or}} +
+
+ {{/each}} +
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/widget-templates/Hero Slider/widget.yml b/widget-templates/Hero Slider/widget.yml new file mode 100644 index 00000000..88df99ee --- /dev/null +++ b/widget-templates/Hero Slider/widget.yml @@ -0,0 +1 @@ +4ec450d7-c3d3-4315-9aaf-d55e1028f8d8 \ No newline at end of file From a925c1d977c61618e5b563a1b1fffcbdd7148745 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 9 Jan 2024 18:57:50 +0100 Subject: [PATCH 02/11] XCORNER-8 hero slider implementation --- assets/js/theme/common/carousel.js | 9 +- assets/scss/widgets/hero-slider.scss | 162 +++++++++++++++++++++++++++ assets/scss/widgets/widgets.scss | 1 + 3 files changed, 170 insertions(+), 2 deletions(-) create mode 100644 assets/scss/widgets/hero-slider.scss create mode 100644 assets/scss/widgets/widgets.scss diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 7e356700..dca4253e 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -1,16 +1,17 @@ -import Swiper, { Navigation } from 'swiper' +import Swiper, { Navigation, Pagination } from 'swiper' import q$ from '../global/selector' /* eslint-disable import/no-unresolved, import/extensions */ import 'swiper/scss' import 'swiper/scss/navigation' +import 'swiper/css/pagination' /* eslint-enable import/no-unresolved, import/extensions */ export default function startSwiper(context) { if (q$('.js-home-swiper') !== null) { const homeCarouselParams = { direction: 'horizontal', - modules: [Navigation], + modules: [Navigation, Pagination], allowSlideNext: true, allowSlidePrev: true, slidesPerView: 1, @@ -23,6 +24,10 @@ export default function startSwiper(context) { nextEl: '.js-swiper-btn-next', prevEl: '.js-swiper-btn-prev', }, + pagination: { + el: '.js-swiper-pagination', + clickable: true, + }, } /* eslint-disable no-new */ diff --git a/assets/scss/widgets/hero-slider.scss b/assets/scss/widgets/hero-slider.scss new file mode 100644 index 00000000..2219e8c1 --- /dev/null +++ b/assets/scss/widgets/hero-slider.scss @@ -0,0 +1,162 @@ +$swiper-arrow-right: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxnIGlkPSJhcnJvdy1yaWdodCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik01IDEySDE5TTE5IDEyTDEyIDVNMTkgMTJMMTIgMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"; +$swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxtYXNrIGlkPSJtYXNrMF8zMDQxXzMyMDEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMzA0MV8zMjAxMykiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg=="; + +.slide-image { + aspect-ratio: 342/424; + width: 100%; + height: auto; + object-fit: cover; + + @include bp(medium) { + aspect-ratio: 738/484; + } + + @include bp(large) { + aspect-ratio: 1280/640; + } +} + +.slide-information { + position: relative; + background-color: $color-white; + display: flex; + flex-direction: column; + gap: 12px; + padding: 24px; + border-radius: 4px; + align-items: center; + max-width: 852px; + margin: -96px 24px 0; + + @include bp(medium) { + margin: -96px 127px 0; + padding: 48px; + gap: 24px; + } + + @include bp(large) { + margin: -96px auto 0; + } +} + +.slide-title { + color: $color-black; + text-align: center; + font-family: $font-regular; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 1.25; + margin: 0; + + @include bp(medium) { + font-size: 42px; + line-height: 1.33; + } +} + +.slide-subtext { + color: $color-neutrals-500; + text-align: center; + font-family: $font-regular; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 1.33; + margin: 0; +} + +.slide-price { + color: $color-neutrals-300; + text-align: center; + font-family: $font-regular; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 1.33; + margin: 0; + + span { + color: $color-black; + text-align: center; + font-family: $font-regular; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 1.25; + } +} + +.slide-buttons { + display: flex; + flex-direction: column; + gap: 12px; + + @include bp(medium) { + flex-direction: row; + } +} + +.slide-navigation { + position: absolute; + bottom: 60%; + z-index: 2; + left: 0; + margin-left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: center; + align-items: center; + gap: 24px; + + @include bp(small) { + bottom: 50%; + } + + @include bp(medium) { + bottom: 50%; + } + + @include bp(large) { + bottom: 400px; + } + + .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); + } + + .js-swiper-btn-prev { + background-image: url($swiper-arrow-left); + } + + .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-white; + width: 12px; + height: 12px; + margin: 0 !important; + + &-active { + background-color: $color-white; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/widgets/widgets.scss b/assets/scss/widgets/widgets.scss new file mode 100644 index 00000000..e35cbd0f --- /dev/null +++ b/assets/scss/widgets/widgets.scss @@ -0,0 +1 @@ +@import './hero-slider'; \ No newline at end of file From 66deb41019484e0c660f6c7a83dbdab806c5dca6 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 9 Jan 2024 18:58:16 +0100 Subject: [PATCH 03/11] XCORNER-8 update homepage --- templates/pages/home.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/templates/pages/home.html b/templates/pages/home.html index 3962aaa4..e58586d5 100644 --- a/templates/pages/home.html +++ b/templates/pages/home.html @@ -13,9 +13,6 @@ --- {{#partial "hero"}} {{{region name="home_below_menu"}}} - {{#and carousel carousel.slides.length}} - {{> components/carousel/carousel arrows=theme_settings.homepage_show_carousel_arrows play_pause_button=theme_settings.homepage_show_carousel_play_pause_button}} - {{/and}} {{{region name="home_below_carousel"}}} {{/partial}} From 8fc2c82d2cae3ee5742dfc4a68162c7e6bad691e Mon Sep 17 00:00:00 2001 From: martibelegu Date: Thu, 1 Feb 2024 11:22:12 +0100 Subject: [PATCH 04/11] XCORNER-8 code refactor --- assets/scss/widgets/hero-slider.scss | 38 ++++++++++++------------ widget-templates/Hero Slider/widget.html | 24 +++++++-------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/assets/scss/widgets/hero-slider.scss b/assets/scss/widgets/hero-slider.scss index 2219e8c1..541b3354 100644 --- a/assets/scss/widgets/hero-slider.scss +++ b/assets/scss/widgets/hero-slider.scss @@ -1,7 +1,7 @@ -$swiper-arrow-right: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxnIGlkPSJhcnJvdy1yaWdodCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik01IDEySDE5TTE5IDEyTDEyIDVNMTkgMTJMMTIgMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"; -$swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxtYXNrIGlkPSJtYXNrMF8zMDQxXzMyMDEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMzA0MV8zMjAxMykiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg=="; +$swiper-arrow-right: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxnIGlkPSJhcnJvdy1yaWdodCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik01IDEySDE5TTE5IDEyTDEyIDVNMTkgMTJMMTIgMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K'; +$swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxtYXNrIGlkPSJtYXNrMF8zMDQxXzMyMDEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMzA0MV8zMjAxMykiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg=='; -.slide-image { +.c-hero-slider__image { aspect-ratio: 342/424; width: 100%; height: auto; @@ -16,7 +16,7 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud } } -.slide-information { +.c-hero-slider__information { position: relative; background-color: $color-white; display: flex; @@ -39,7 +39,7 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud } } -.slide-title { +.c-hero-slider__title { color: $color-black; text-align: center; font-family: $font-regular; @@ -55,7 +55,7 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud } } -.slide-subtext { +.c-hero-slider__subtext { color: $color-neutrals-500; text-align: center; font-family: $font-regular; @@ -66,7 +66,7 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud margin: 0; } -.slide-price { +.c-hero-slider__price-container { color: $color-neutrals-300; text-align: center; font-family: $font-regular; @@ -75,19 +75,19 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud font-weight: 400; line-height: 1.33; margin: 0; +} - span { - color: $color-black; - text-align: center; - font-family: $font-regular; - font-size: 32px; - font-style: normal; - font-weight: 600; - line-height: 1.25; - } +.c-hero-slider__price { + color: $color-black; + text-align: center; + font-family: $font-regular; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 1.25; } -.slide-buttons { +.c-hero-slider__buttons { display: flex; flex-direction: column; gap: 12px; @@ -97,7 +97,7 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud } } -.slide-navigation { +.c-hero-slider__navigation { position: absolute; bottom: 60%; z-index: 2; @@ -159,4 +159,4 @@ $swiper-arrow-left: "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud } } } -} \ No newline at end of file +} diff --git a/widget-templates/Hero Slider/widget.html b/widget-templates/Hero Slider/widget.html index 2cced142..bb3f95e8 100644 --- a/widget-templates/Hero Slider/widget.html +++ b/widget-templates/Hero Slider/widget.html @@ -1,31 +1,31 @@ -
+
{{#each slides}}
- {{#if image}}{{/if}} + {{#if image}}{{/if}} {{#or title subtext}} -
- {{#if title}}

{{title}}

{{/if}} - {{#if subtext}}

{{subtext}}

{{/if}} - {{#if price}}

$ {{price}}

{{/if}} +
+ {{#if title}}

{{title}}

{{/if}} + {{#if subtext}}

{{subtext}}

{{/if}} + {{#if price}}

$ {{price}}

{{/if}} {{#or main_button secondary_button}} -
+
{{#if main_button}} {{main_button.text}} {{/if}} @@ -41,7 +41,7 @@ {{/each}}
-
+
@@ -56,8 +56,8 @@ let slides = document.querySelectorAll('.swiper-slide'); slides.forEach(function(slide) { - let info = slide.querySelector('.slide-information'); - let nav = document.querySelector('.slide-navigation'); + let info = slide.querySelector('.c-hero-slider__information'); + let nav = document.querySelector('.c-hero-slider-navigation'); if(info && nav) { let infoRect = info.getBoundingClientRect(); From 89d46abf3c6c005268ab3582b461729bfa78106b Mon Sep 17 00:00:00 2001 From: martibelegu Date: Fri, 2 Feb 2024 13:44:10 +0100 Subject: [PATCH 05/11] XCORNER-8 fix --- assets/scss/theme.scss | 1 + widget-templates/Hero Slider/widget.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss index 74f41207..bec4bef2 100644 --- a/assets/scss/theme.scss +++ b/assets/scss/theme.scss @@ -10,6 +10,7 @@ @import 'objects/objects'; @import 'components/components'; @import 'utilities/utilities'; +@import 'widgets/widgets'; // temporary styles // todo: remove later diff --git a/widget-templates/Hero Slider/widget.html b/widget-templates/Hero Slider/widget.html index bb3f95e8..26908879 100644 --- a/widget-templates/Hero Slider/widget.html +++ b/widget-templates/Hero Slider/widget.html @@ -57,7 +57,7 @@ slides.forEach(function(slide) { let info = slide.querySelector('.c-hero-slider__information'); - let nav = document.querySelector('.c-hero-slider-navigation'); + let nav = document.querySelector('.c-hero-slider__navigation'); if(info && nav) { let infoRect = info.getBoundingClientRect(); From 75b89bbf47cc40fd2dea8808dc901e72bd2493a3 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Mon, 5 Feb 2024 13:34:04 +0100 Subject: [PATCH 06/11] CR feedback --- assets/icons/arrow-left.svg | 3 + assets/icons/arrow-right.svg | 3 + assets/scss/widgets/hero-slider.scss | 68 +++++++++---------- .../{Hero Slider => hero-slider}/config.json | 0 .../{Hero Slider => hero-slider}/schema.json | 0 .../{Hero Slider => hero-slider}/widget.html | 6 +- .../{Hero Slider => hero-slider}/widget.yml | 0 7 files changed, 41 insertions(+), 39 deletions(-) create mode 100644 assets/icons/arrow-left.svg create mode 100644 assets/icons/arrow-right.svg rename widget-templates/{Hero Slider => hero-slider}/config.json (100%) rename widget-templates/{Hero Slider => hero-slider}/schema.json (100%) rename widget-templates/{Hero Slider => hero-slider}/widget.html (93%) rename widget-templates/{Hero Slider => hero-slider}/widget.yml (100%) diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg new file mode 100644 index 00000000..28ed682f --- /dev/null +++ b/assets/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg new file mode 100644 index 00000000..68401ad3 --- /dev/null +++ b/assets/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/scss/widgets/hero-slider.scss b/assets/scss/widgets/hero-slider.scss index 541b3354..f4e23b50 100644 --- a/assets/scss/widgets/hero-slider.scss +++ b/assets/scss/widgets/hero-slider.scss @@ -1,5 +1,5 @@ -$swiper-arrow-right: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxnIGlkPSJhcnJvdy1yaWdodCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik01IDEySDE5TTE5IDEyTDEyIDVNMTkgMTJMMTIgMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K'; -$swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxtYXNrIGlkPSJtYXNrMF8zMDQxXzMyMDEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMzA0MV8zMjAxMykiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg=='; +$swiper-arrow-right: './../icons/arrow-right.svg'; +$swiper-arrow-left: './../icons/arrow-left.svg'; .c-hero-slider__image { aspect-ratio: 342/424; @@ -21,36 +21,36 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud background-color: $color-white; display: flex; flex-direction: column; - gap: 12px; - padding: 24px; - border-radius: 4px; + gap: rem-calc(12px); + padding: rem-calc(24px); + border-radius: rem-calc(4px); align-items: center; - max-width: 852px; - margin: -96px 24px 0; + max-width: rem-calc(852px); + margin: rem-calc(-96px) rem-calc(24px) 0; @include bp(medium) { - margin: -96px 127px 0; - padding: 48px; - gap: 24px; + margin: rem-calc(-96px) rem-calc(127px) 0; + padding: rem-calc(48px); + gap: rem-calc(24px); } @include bp(large) { - margin: -96px auto 0; + margin: rem-calc(-96px) auto 0; } } .c-hero-slider__title { color: $color-black; text-align: center; - font-family: $font-regular; - font-size: 32px; + font-family: $font-semi-bold; + font-size: rem-calc(32px); font-style: normal; font-weight: 600; line-height: 1.25; margin: 0; @include bp(medium) { - font-size: 42px; + font-size: rem-calc(42px); line-height: 1.33; } } @@ -59,7 +59,7 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud color: $color-neutrals-500; text-align: center; font-family: $font-regular; - font-size: 18px; + font-size: rem-calc(18px); font-style: normal; font-weight: 400; line-height: 1.33; @@ -70,7 +70,7 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud color: $color-neutrals-300; text-align: center; font-family: $font-regular; - font-size: 24px; + font-size: rem-calc(24px); font-style: normal; font-weight: 400; line-height: 1.33; @@ -80,8 +80,8 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud .c-hero-slider__price { color: $color-black; text-align: center; - font-family: $font-regular; - font-size: 32px; + font-family: $font-semi-bold; + font-size: rem-calc(32px); font-style: normal; font-weight: 600; line-height: 1.25; @@ -90,7 +90,7 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud .c-hero-slider__buttons { display: flex; flex-direction: column; - gap: 12px; + gap: rem-calc(12px); @include bp(medium) { flex-direction: row; @@ -100,58 +100,54 @@ $swiper-arrow-left: 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cud .c-hero-slider__navigation { position: absolute; bottom: 60%; - z-index: 2; + z-index: $z-index-mid-low; left: 0; margin-left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; - gap: 24px; + gap: rem-calc(24px); @include bp(small) { bottom: 50%; } - @include bp(medium) { - bottom: 50%; - } - @include bp(large) { - bottom: 400px; + bottom: rem-calc(400px); } - .js-swiper-btn-next, - .js-swiper-btn-prev { - width: 24px; - height: 24px; + .c-swiper__btn-next, + .c-swiper__btn-prev { + width: rem-calc(24px); + height: rem-calc(24px); border: 0 !important; background-repeat: no-repeat; background-position: center; background-size: contain; } - .js-swiper-btn-next { + .c-swiper__btn-next { background-image: url($swiper-arrow-right); } - .js-swiper-btn-prev { + .c-swiper__btn-prev { background-image: url($swiper-arrow-left); } - .js-swiper-pagination { + .c-swiper__pagination { border: 0 !important; padding: 0 !important; display: flex; justify-content: space-between; - gap: 24px; + gap: rem-calc(24px); .swiper-pagination-bullet { background-color: transparent; opacity: 1; border: 2px solid $color-white; - width: 12px; - height: 12px; + width: rem-calc(12px); + height: rem-calc(12px); margin: 0 !important; &-active { diff --git a/widget-templates/Hero Slider/config.json b/widget-templates/hero-slider/config.json similarity index 100% rename from widget-templates/Hero Slider/config.json rename to widget-templates/hero-slider/config.json diff --git a/widget-templates/Hero Slider/schema.json b/widget-templates/hero-slider/schema.json similarity index 100% rename from widget-templates/Hero Slider/schema.json rename to widget-templates/hero-slider/schema.json diff --git a/widget-templates/Hero Slider/widget.html b/widget-templates/hero-slider/widget.html similarity index 93% rename from widget-templates/Hero Slider/widget.html rename to widget-templates/hero-slider/widget.html index 26908879..58096e19 100644 --- a/widget-templates/Hero Slider/widget.html +++ b/widget-templates/hero-slider/widget.html @@ -42,9 +42,9 @@
-
-
-
+
+
+
diff --git a/widget-templates/Hero Slider/widget.yml b/widget-templates/hero-slider/widget.yml similarity index 100% rename from widget-templates/Hero Slider/widget.yml rename to widget-templates/hero-slider/widget.yml From 33abd04ddc792e6a2022750aa3b9d964499c4a99 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 9 Jan 2024 18:58:16 +0100 Subject: [PATCH 07/11] XCORNER-8 update homepage --- .eslintcache | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/.eslintcache b/.eslintcache index afbb1119..cef4e2f8 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1,41 @@ -[{"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js":"1","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js":"2"},{"size":8491,"mtime":1703754551367,"results":"3","hashOfConfig":"4"},{"size":3618,"mtime":1706621011438,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","suppressedMessages":"8","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1gd3vyx",{"filePath":"9","messages":"10","suppressedMessages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js",[],[],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js",["12"],[],{"ruleId":"13","severity":1,"message":"14","line":10,"column":16,"nodeType":"15","messageId":"16","endLine":10,"endColumn":25},"func-names","Unexpected unnamed function.","FunctionDeclaration","unnamed"] \ No newline at end of file +;[ + { + '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js': '1', + '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js': '2', + }, + { size: 8491, mtime: 1703754551367, results: '3', hashOfConfig: '4' }, + { size: 3618, mtime: 1706621011438, results: '5', hashOfConfig: '4' }, + { + filePath: '6', + messages: '7', + suppressedMessages: '8', + errorCount: 0, + fatalErrorCount: 0, + warningCount: 0, + fixableErrorCount: 0, + fixableWarningCount: 0, + }, + '1gd3vyx', + { + filePath: '9', + messages: '10', + suppressedMessages: '11', + errorCount: 0, + fatalErrorCount: 0, + warningCount: 1, + fixableErrorCount: 0, + fixableWarningCount: 0, + source: null, + }, + '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js', + [], + [], + '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js', + ['12'], + [], + { ruleId: '13', severity: 1, message: '14', line: 10, column: 16, nodeType: '15', messageId: '16', endLine: 10, endColumn: 25 }, + 'func-names', + 'Unexpected unnamed function.', + 'FunctionDeclaration', + 'unnamed', +] From d9f99b120f1c180172b19bb4140fae210084e3e9 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Wed, 10 Jan 2024 13:53:27 +0100 Subject: [PATCH 08/11] XCORNER-7 reviews carousel widget --- assets/js/theme/common/carousel.js | 36 ++++++++++ assets/scss/widgets/reviews.scss | 91 +++++++++++++++++++++++ assets/scss/widgets/widgets.scss | 3 +- widget-templates/Reviews/config.json | 45 ++++++++++++ widget-templates/Reviews/schema.json | 103 +++++++++++++++++++++++++++ widget-templates/Reviews/widget.html | 63 ++++++++++++++++ widget-templates/Reviews/widget.yml | 1 + 7 files changed, 341 insertions(+), 1 deletion(-) create mode 100644 assets/scss/widgets/reviews.scss create mode 100644 widget-templates/Reviews/config.json create mode 100644 widget-templates/Reviews/schema.json create mode 100644 widget-templates/Reviews/widget.html create mode 100644 widget-templates/Reviews/widget.yml diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index dca4253e..7b30b5bb 100644 --- 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 new file mode 100644 index 00000000..7e64f5da --- /dev/null +++ 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 index e35cbd0f..de5af014 100644 --- a/assets/scss/widgets/widgets.scss +++ b/assets/scss/widgets/widgets.scss @@ -1 +1,2 @@ -@import './hero-slider'; \ No newline at end of file +@import './hero-slider'; +@import './reviews.scss'; \ No newline at end of file diff --git a/widget-templates/Reviews/config.json b/widget-templates/Reviews/config.json new file mode 100644 index 00000000..7f5c0b63 --- /dev/null +++ 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 + } + ] +} \ No newline at end of file diff --git a/widget-templates/Reviews/schema.json b/widget-templates/Reviews/schema.json new file mode 100644 index 00000000..57bc40a3 --- /dev/null +++ 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 + } + } + } + ] + } + ] + } + ] + } +] \ No newline at end of file diff --git a/widget-templates/Reviews/widget.html b/widget-templates/Reviews/widget.html new file mode 100644 index 00000000..bf20e337 --- /dev/null +++ b/widget-templates/Reviews/widget.html @@ -0,0 +1,63 @@ + + + + +
+
+ {{#each slides}} +
+
+
+
{{summary}}
+
{{name}}
+
+
+ {{/each}} +
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/widget-templates/Reviews/widget.yml b/widget-templates/Reviews/widget.yml new file mode 100644 index 00000000..317e3bc9 --- /dev/null +++ b/widget-templates/Reviews/widget.yml @@ -0,0 +1 @@ +deb337bd-2b3d-4cdb-ac8f-24d82d288daf \ No newline at end of file From 5a6fa0b9b1bb3f518aaf12ee3a91f422d8a88521 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Fri, 2 Feb 2024 13:43:25 +0100 Subject: [PATCH 09/11] XCORNER-7 code refactor + rebase --- assets/scss/widgets/reviews.scss | 38 ++++++++++++++-------------- assets/scss/widgets/widgets.scss | 2 +- widget-templates/Reviews/widget.html | 20 +++++++-------- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/assets/scss/widgets/reviews.scss b/assets/scss/widgets/reviews.scss index 7e64f5da..f46a681b 100644 --- a/assets/scss/widgets/reviews.scss +++ b/assets/scss/widgets/reviews.scss @@ -1,7 +1,7 @@ $swiper-arrow-left-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSIjNUE2NEMxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg=='; $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNSAxMkgxOU0xOSAxMkwxMiA1TTE5IDEyTDEyIDE5IiBzdHJva2U9IiM1QTY0QzEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+'; -.reviews-carousel { +.c-reviews-carousel { overflow: visible; .swiper-slide { @@ -13,7 +13,7 @@ $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL } } -.review-card { +.c-review-carousel__card { display: flex; flex-direction: column; flex-grow: 1; @@ -22,27 +22,27 @@ $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL 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; - } +.c-review-carousel__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; - } +.c-review-carousel__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 { +.c-review-carousel__slide-navigation { margin: 48px auto; display: flex; justify-content: center; diff --git a/assets/scss/widgets/widgets.scss b/assets/scss/widgets/widgets.scss index de5af014..32aae2c5 100644 --- a/assets/scss/widgets/widgets.scss +++ b/assets/scss/widgets/widgets.scss @@ -1,2 +1,2 @@ @import './hero-slider'; -@import './reviews.scss'; \ No newline at end of file +@import './reviews.scss'; diff --git a/widget-templates/Reviews/widget.html b/widget-templates/Reviews/widget.html index bf20e337..498ae499 100644 --- a/widget-templates/Reviews/widget.html +++ b/widget-templates/Reviews/widget.html @@ -1,33 +1,33 @@ -
+
{{#each slides}}
-
-
-
{{summary}}
-
{{name}}
+
+
+
{{summary}}
+
{{name}}
{{/each}}
-
+
@@ -36,7 +36,7 @@