forge-joniko/ldc-legaulois
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

club discount cards swiper

Browse source
This commit is contained in:
Jérémy Munsch 2024-07-02 14:54:11 +02:00
parent 628769dbae
commit fe800bebb6
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
7 changed files with 227 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/sass/club/club.scss
View file

@ -6,6 +6,7 @@
// * VENDOR
@import "./vendor/ckEditorContent";
@import "./vendor/bootstrap";
@import "./vendor/swiper";
// * BASE
@import "./base/bootstrap-overload";

13
resources/sass/club/pages/home.scss
View file

@ -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;
}
}
}

6
resources/sass/club/partials/_card-discount.scss
View file

@ -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%;

50
resources/sass/club/vendor/_swiper.scss vendored Normal file
View file

@ -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;
}

84
resources/ts/club/pages/home.ts
View file

@ -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 `<button class="btn btn-tertiary rounded-circle border-0 mx-2 p-0 ${className}" title="${trans.methods.__("Aller à la slide :NUM", {"NUM": String(index)})}"></button>`;
},
},
keyboard: {
enabled: true,
},
}
};
const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>;
window.__SLIDERS = new Map<string, SwiperSlider>();
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();
}
});

82
resources/views/club/pages/home/homepage.blade.php
View file

@ -71,19 +71,84 @@
title="{{ __('Go to page :page', ['page' => __('Imprimer mes coupons')]) }}">{{ __('Imprimer mes coupons') }}</a>
</div>
</div>
<div class="d-none d-md-block text-bg-white col-12 mt-5 text-center">
<div class="d-none d-md-block text-bg-white col-12 mt-5 pb-5 text-center">
<h2 class="section-title text-uppercase f-bourton-base d-none d-md-inline-flex"> <span class="text-bg-warning">
{{ __('Économiser aujourd’hui') }}</span><span class="text-bg-danger">@money(700)</span>
</h2>
<span class="d-block fs-5 fw-bold mb-5">{{ __('En bons de réduction sur une sélection de produits Le Gaulois') }}</span>
<div>
@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
<div class="d-flex mb-5">
<div class="swiper d-none d-md-block mx-5 mb-3" id="swiper-discounts">
<div class="swiper-wrapper w-fit">
@foreach ($discountList as $discount)
<div class="swiper-slide">
@include('club.partials.club-card-discount', [
'amount' => $discount->amount,
'color' => $discount->color,
'productPicture' => $discount->picture,
'onProduct' => $discount->onProduct,
'outerClass' => 'mx-3',
])
</div>
@endforeach
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="swiper-discounts-pagination py-4"></div>
</div>
<a class="btn btn-lg btn-secondary fs-3" href="#FIXME:printDiscounts"
@ -92,7 +157,6 @@
<div class="col-12">
</div>
</section>
@include('club.partials.rounded-section-bottom', ['color' => 'secondary'])
{{-- CLUB INFO --}}
<section class="row text-bg-secondary py-5">

1
resources/views/club/partials/club-card-discount.blade.php
View file

@ -1,6 +1,7 @@
<div @class([
'card card-discount rounded-5 mb-3 overflow-hidden border-0 bg-transparent',
$color ?? 'primary',
$outerClass ?? '',
])>
<div class="row g-0 h-100 w-100">
<div class="col-5">