diff --git a/resources/sass/club/club.scss b/resources/sass/club/club.scss index 6032bf4d..b657b363 100644 --- a/resources/sass/club/club.scss +++ b/resources/sass/club/club.scss @@ -6,6 +6,7 @@ // * VENDOR @import "./vendor/ckEditorContent"; @import "./vendor/bootstrap"; +@import "./vendor/swiper"; // * BASE @import "./base/bootstrap-overload"; diff --git a/resources/sass/club/pages/home.scss b/resources/sass/club/pages/home.scss index dc55de3b..2c738212 100644 --- a/resources/sass/club/pages/home.scss +++ b/resources/sass/club/pages/home.scss @@ -74,4 +74,17 @@ } } } + + #swiper-discounts { + max-width: 1400px; + + } + + .swiper-pagination-bullet { + &:hover, &:focus{ + border-color: var(--bs-btn-hover-border-color) !important; + background-color: var(--bs-btn-hover-bg) !important; + color: var(--bs-btn-hover-color) !important; + } + } } diff --git a/resources/sass/club/partials/_card-discount.scss b/resources/sass/club/partials/_card-discount.scss index df938e7c..e9b8e674 100644 --- a/resources/sass/club/partials/_card-discount.scss +++ b/resources/sass/club/partials/_card-discount.scss @@ -5,7 +5,7 @@ background-image: url("data:image/svg+xml,%3Csvg width='349' height='211' viewBox='0 0 349 211' fill='none' preserveAspectRatio='none' version='1.1' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9902_20837)' id='g2'%3E%3Cpath d='M33 2H149V205H33C18.09 205 6 192.91 6 178V127C20.91 127 33 114.91 33 100C33 85.09 20.91 73 6 73V29C6 14.09 18.09 2 33 2Z' fill='#{urlencodecolor($color-primary)}' id='path2' /%3E%3C/g%3E%3C/svg%3E"), url('@/images/club/card-discount-bg.svg'); background-origin: border-box; background-position: center; - background-size: auto; + background-size: cover; &.primary { background-image: url("data:image/svg+xml,%3Csvg width='349' height='211' viewBox='0 0 349 211' fill='none' preserveAspectRatio='none' version='1.1' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9902_20837)' id='g2'%3E%3Cpath d='M33 2H149V205H33C18.09 205 6 192.91 6 178V127C20.91 127 33 114.91 33 100C33 85.09 20.91 73 6 73V29C6 14.09 18.09 2 33 2Z' fill='#{urlencodecolor($color-primary)}' id='path2' /%3E%3C/g%3E%3C/svg%3E"), url('@/images/club/card-discount-bg.svg'); @@ -23,6 +23,10 @@ background-image: url("data:image/svg+xml,%3Csvg width='349' height='211' viewBox='0 0 349 211' fill='none' preserveAspectRatio='none' version='1.1' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9902_20837)' id='g2'%3E%3Cpath d='M33 2H149V205H33C18.09 205 6 192.91 6 178V127C20.91 127 33 114.91 33 100C33 85.09 20.91 73 6 73V29C6 14.09 18.09 2 33 2Z' fill='#{urlencodecolor($color-warning)}' id='path2' /%3E%3C/g%3E%3C/svg%3E"), url('@/images/club/card-discount-bg.svg'); } + &.danger { + background-image: url("data:image/svg+xml,%3Csvg width='349' height='211' viewBox='0 0 349 211' fill='none' preserveAspectRatio='none' version='1.1' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9902_20837)' id='g2'%3E%3Cpath d='M33 2H149V205H33C18.09 205 6 192.91 6 178V127C20.91 127 33 114.91 33 100C33 85.09 20.91 73 6 73V29C6 14.09 18.09 2 33 2Z' fill='#{urlencodecolor($color-danger)}' id='path2' /%3E%3C/g%3E%3C/svg%3E"), url('@/images/club/card-discount-bg.svg'); + } + .discount-product-img { position: absolute; top: 50%; diff --git a/resources/sass/club/vendor/_swiper.scss b/resources/sass/club/vendor/_swiper.scss new file mode 100644 index 00000000..e268b454 --- /dev/null +++ b/resources/sass/club/vendor/_swiper.scss @@ -0,0 +1,50 @@ +@import '~/swiper/swiper.scss'; +@import '~/swiper/modules/autoplay.scss'; +@import '~/swiper/modules/keyboard.scss'; +@import '~/swiper/modules/pagination.scss'; + +// * CUSTOM STYLE +.swiper { + &-button { + position: absolute; + top: 50%; + width: 2rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; + + &-prev-custom { + left: 0; + transform: translateY(-50%) rotate(180deg); + } + + &-next-custom { + right: 0; + transform: translateY(-50%); + } + + &-disabled { + display: none !important; + } + } + + &-pagination-bullet { + width: 1rem; + height: 1rem; + + &:hover, &:focus { + background-color: $color-white !important; + } + + &-active { + background-color: $color-secondary !important; + } + } +} + +.swiper-pagination, .swiper-pagination-bullets-dynamic { + transform: inherit !important; + position: inherit !important; + top: inherit !important; +} diff --git a/resources/ts/club/pages/home.ts b/resources/ts/club/pages/home.ts index 8270ec84..95b3e982 100644 --- a/resources/ts/club/pages/home.ts +++ b/resources/ts/club/pages/home.ts @@ -1,3 +1,87 @@ +import Swiper from "swiper"; +import { Autoplay, Keyboard, Pagination } from "swiper/modules"; +import trans from "../../modules/trans"; + document.addEventListener("DOMContentLoaded", function () { + // SWIPER + const swiperConfig = { + "swiper-discounts": { + modules: [Autoplay, Keyboard, Pagination], + grabCursor: true, + slidesPerView: 2, + centeredSlides: false, + loop: true, + spaceBetween: 0, + breakpoints: { + 1200: { + slidesPerView: 3, + }, + 1400: { + slidesPerView: 4 + }, + }, + autoplay: { + delay: 15000, + disableOnInteraction: false, + }, + pagination: { + el: ".swiper-discounts-pagination", + dynamicBullets: true, + clickable: true, + renderBullet: function (index: number, className: string) { + return ``; + }, + }, + keyboard: { + enabled: true, + }, + } + }; + + const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf; + window.__SLIDERS = new Map(); + + for (const htmlElt of swiperVol) { + if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) { + throw new Error(`Undefined swiper id ${htmlElt.id}`); + } + // @ts-ignore + const swiper = new Swiper(htmlElt, swiperConfig[htmlElt.id as keyof typeof swiperConfig]); + window.__SLIDERS.set(htmlElt.id, { element: htmlElt, swiper: swiper }); + + if (swiper.el.id === "swiper-main-slides") { + const btnPlayPause = document.querySelector("#swiper-main-slides .swiper-pagination-playpause"); + btnPlayPause?.addEventListener("click", function () { + eventBtnPlayPause(swiper, document.querySelector("#swiper-main-slides .swiper-pagination-playpause")); + }); + swiper.on("transitionEnd", function() { + const svgs = document.querySelector("#swiper-main-slides .swiper-pagination-playpause")?.querySelectorAll("svg"); + if (svgs) { + svgs[0].classList.remove("d-none"); + svgs[1].classList.add("d-none"); + } + }); + } + if (swiper.el.id === "swiper-videos") { + document.querySelectorAll("#swiper-videos .swiper-slide").forEach(slide => { + if (!slide.classList.contains("swiper-slide-active")) { + slide.setAttribute("inert", "true"); + } + }); + swiper.on("transitionEnd", function() { + document.querySelector("#swiper-videos .swiper-slide-active")?.removeAttribute("inert"); + document.querySelector("#swiper-videos .swiper-slide-prev")?.setAttribute("inert", "true"); + document.querySelector("#swiper-videos .swiper-slide-next")?.setAttribute("inert", "true"); + }); + } + } + + function eventBtnPlayPause(swiper: Swiper, btnPlayPause: HTMLElement | null) { + const svgs = btnPlayPause?.querySelectorAll("svg"); + svgs?.forEach(svg => { + svg.classList.toggle("d-none"); + }); + (swiper?.autoplay.paused) ? swiper?.autoplay.start() : swiper?.autoplay.pause(); + } }); diff --git a/resources/views/club/pages/home/homepage.blade.php b/resources/views/club/pages/home/homepage.blade.php index af4d1b58..e2179665 100644 --- a/resources/views/club/pages/home/homepage.blade.php +++ b/resources/views/club/pages/home/homepage.blade.php @@ -71,19 +71,84 @@ title="{{ __('Go to page :page', ['page' => __('Imprimer mes coupons')]) }}">{{ __('Imprimer mes coupons') }} -
+

{{ __('Économiser aujourd’hui') }}@money(700)

{{ __('En bons de réduction sur une sélection de produits Le Gaulois') }} -
- @include('club.partials.club-card-discount', [ - 'amount' => 700, - 'color' => 'secondary', - 'productPicture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), - 'onProduct' => __('Sur l’achat d’un produit de la gamme Élevés dans les prés'), - ]) + @php + //FIXME: replace data by discounts Model + $discountList = [ + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'secondary', + 'amount' => 700, + 'onProduct' => __('Sur l’achat d’un produit de la gamme Élevés dans les prés'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'danger', + 'amount' => 700, + 'onProduct' => __('sur l’achat de 2 barquettes de la gamme Les milanaises'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'warning', + 'amount' => 700, + 'onProduct' => __('Sur l’achat d’un produit de la gamme Élevés dans les prés'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'tertiary', + 'amount' => 700, + 'onProduct' => __('sur l’achat de 2 barquettes de la gamme Les milanaises'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'secondary', + 'amount' => 700, + 'onProduct' => __('Sur l’achat d’un produit de la gamme Élevés dans les prés'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'danger', + 'amount' => 700, + 'onProduct' => __('sur l’achat de 2 barquettes de la gamme Les milanaises'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'warning', + 'amount' => 700, + 'onProduct' => __('Sur l’achat d’un produit de la gamme Élevés dans les prés'), + ], + (object) [ + 'picture' => Vite::asset('resources/assets/images/placeholders/club/discountcards/discount-product.svg'), + 'color' => 'danger', + 'amount' => 700, + 'onProduct' => __('sur l’achat de 2 barquettes de la gamme Les milanaises'), + ], + ]; + @endphp +
+
+
+ @foreach ($discountList as $discount) +
+ @include('club.partials.club-card-discount', [ + 'amount' => $discount->amount, + 'color' => $discount->color, + 'productPicture' => $discount->picture, + 'onProduct' => $discount->onProduct, + 'outerClass' => 'mx-3', + ]) +
+ @endforeach +
+
+
+
+
- @include('club.partials.rounded-section-bottom', ['color' => 'secondary']) {{-- CLUB INFO --}}
diff --git a/resources/views/club/partials/club-card-discount.blade.php b/resources/views/club/partials/club-card-discount.blade.php index ccbd3166..c92708b8 100644 --- a/resources/views/club/partials/club-card-discount.blade.php +++ b/resources/views/club/partials/club-card-discount.blade.php @@ -1,6 +1,7 @@