diff --git a/app/Enums/Products/CookingModeEnum.php b/app/Enums/Products/CookingModeEnum.php index 2b2824c..48135ca 100644 --- a/app/Enums/Products/CookingModeEnum.php +++ b/app/Enums/Products/CookingModeEnum.php @@ -24,4 +24,47 @@ enum CookingModeEnum: int self::pan->name => 'Poêle', self::fresh->name => 'Se consomme frais', ]; + + /** + * Pictures paths. + */ + private const PICTURES = [ + self::microwave->name => 'resources/assets/images/pictos/micro-wave.png', + self::furnace->name => 'resources/assets/images/pictos/furnace.png', + self::waterbath->name => 'resources/assets/images/pictos/water-bath.png', + self::pan->name => 'resources/assets/images/pictos/pan.png', + self::fresh->name => 'resources/assets/images/pictos/fresh.png', + ]; + + /** + * Get picture path + * + * @return string + */ + public function picture(): string + { + return self::PICTURES[$this->name]; + } + + + /** + * Alt attributes for pictures. + */ + private const ALTS = [ + self::microwave->name => 'Pictogramme d\'un micro-ondes', + self::furnace->name => 'Pictogramme d\'un four traditionnel', + self::waterbath->name => 'Pictogramme d\'un bain-marie', + self::pan->name => 'Pictogramme d\'une poêle', + self::fresh->name => 'Pictogramme d\'une goutte d\'eau', + ]; + + /** + * Get picture alt attribute + * + * @return string + */ + public function alt(): string + { + return self::ALTS[$this->name]; + } } diff --git a/app/Http/Controllers/Fo/ProductController.php b/app/Http/Controllers/Fo/ProductController.php new file mode 100644 index 0000000..ceb0b07 --- /dev/null +++ b/app/Http/Controllers/Fo/ProductController.php @@ -0,0 +1,25 @@ +range->products() + ->where('id', '!=', $product->id) + ->where('published', true) + ->inRandomOrder() + ->get(); + return view('fo.pages.products.show', compact('product', 'otherProductModels')); + } +} diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php index 4de635a..07300e6 100644 --- a/app/Providers/RouteServiceProvider.php +++ b/app/Providers/RouteServiceProvider.php @@ -64,6 +64,11 @@ class RouteServiceProvider extends ServiceProvider Route::model('convictionpage', Convictionpage::class); Route::model('joinuspage', Joinuspage::class); Route::model('testimonial', Testimonial::class); + + // * FRONT + Route::bind('publishedProduct', function ($value) { + return Product::where('slug', $value)->where('published', true)->firstOrFail(); + }); } /** diff --git a/resources/assets/images/global/bg-grey-desktop.svg b/resources/assets/images/global/bg-grey-desktop.svg new file mode 100644 index 0000000..07f7949 --- /dev/null +++ b/resources/assets/images/global/bg-grey-desktop.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/resources/assets/images/global/bg-grey.svg b/resources/assets/images/global/bg-grey.svg new file mode 100644 index 0000000..34933a4 --- /dev/null +++ b/resources/assets/images/global/bg-grey.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/resources/assets/images/global/bg-title-green.svg b/resources/assets/images/global/bg-title-green.svg new file mode 100644 index 0000000..7be6af3 --- /dev/null +++ b/resources/assets/images/global/bg-title-green.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/resources/assets/images/pictos/fresh.png b/resources/assets/images/pictos/fresh.png new file mode 100644 index 0000000..2f5bb66 Binary files /dev/null and b/resources/assets/images/pictos/fresh.png differ diff --git a/resources/assets/images/pictos/furnace.png b/resources/assets/images/pictos/furnace.png new file mode 100644 index 0000000..8e336a1 Binary files /dev/null and b/resources/assets/images/pictos/furnace.png differ diff --git a/resources/assets/images/pictos/micro-wave.png b/resources/assets/images/pictos/micro-wave.png new file mode 100644 index 0000000..d2fa91c Binary files /dev/null and b/resources/assets/images/pictos/micro-wave.png differ diff --git a/resources/assets/images/pictos/pan.png b/resources/assets/images/pictos/pan.png new file mode 100644 index 0000000..99f0360 Binary files /dev/null and b/resources/assets/images/pictos/pan.png differ diff --git a/resources/assets/images/pictos/water-bath.png b/resources/assets/images/pictos/water-bath.png new file mode 100644 index 0000000..942245c Binary files /dev/null and b/resources/assets/images/pictos/water-bath.png differ diff --git a/resources/assets/images/products/leafs-and-seeds.png b/resources/assets/images/products/leafs-and-seeds.png new file mode 100644 index 0000000..687b144 Binary files /dev/null and b/resources/assets/images/products/leafs-and-seeds.png differ diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index b35f589..5c56c43 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -20,3 +20,4 @@ @import './pages/ranges'; @import './pages/contact'; @import './pages/explorerpage'; +@import './pages/product'; diff --git a/resources/sass/fo/pages/_explorerpage.scss b/resources/sass/fo/pages/_explorerpage.scss index f92a747..79a2bca 100644 --- a/resources/sass/fo/pages/_explorerpage.scss +++ b/resources/sass/fo/pages/_explorerpage.scss @@ -261,19 +261,6 @@ // MMMMMMMM MMMMMMMMDDDDDDDDDDDDD @include media-breakpoint-up(md) { .explorerpage { - .title-card { - .adjectives { - // .f-sheldon { - // font-size: 5rem !important; - // } - - // .leaf-picture { - // width: 3rem; - // height: 3rem; - // } - } - } - .passion { .second-paragraph { font-size: 2rem; diff --git a/resources/sass/fo/pages/_product.scss b/resources/sass/fo/pages/_product.scss new file mode 100644 index 0000000..930d517 --- /dev/null +++ b/resources/sass/fo/pages/_product.scss @@ -0,0 +1,147 @@ +.product { + .text-justify { + hyphens: auto; + text-align: justify; + } + + .title-card { + .pictures { + background-image: url('@/images/global/bg-white-desktop.png'); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 90%; + } + } + + .cooking { + .green-title { + background-image: url('@/images/global/bg-title-green.svg'); + background-position: left bottom; + background-repeat: no-repeat; + background-size: 100%; + } + + table { + tr { + th { + border-width: 3px; + border-color: #fff; + border-top: 0; + } + + td { + border-width: 3px; + border-color: #fff; + border-bottom: 0; + } + + :first-child { + border-left: 0; + } + + :last-child { + border-right: 0; + } + + &:last-child { + border-bottom: 0; + } + } + } + + .picto-img { + width: 35%; + } + } + + .swiper-product-pictures, + .swiper-other-products { + .swiper-button { + &-prev, + &-next { width: 3rem; } + + &-next { rotate: 180deg; } + + &-disabled { opacity: .5; } + } + } + + .discover { + .other-products { + background-image: url('@/images/global/bg-white-desktop.png'); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + } + } +} + +@include media-breakpoint-up(lg) { + .product { + .title-card { + .pictures { + background-size: 85% 85%; + } + } + } +} + +// XXXXXXX XXXXXXXLLLLLLLLLLL +// X:::::X X:::::XL:::::::::L +// X:::::X X:::::XL:::::::::L +// X::::::X X::::::XLL:::::::LL +// XXX:::::X X:::::XXX L:::::L +// X:::::X X:::::X L:::::L +// X:::::X:::::X L:::::L +// X:::::::::X L:::::L +// X:::::::::X L:::::L +// X:::::X:::::X L:::::L +// X:::::X X:::::X L:::::L +// XXX:::::X X:::::XXX L:::::L LLLLLL +// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L +// X:::::X X:::::XL::::::::::::::::::::::L +// X:::::X X:::::XL::::::::::::::::::::::L +// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL +@include media-breakpoint-up(xl) { + .product { + .title-card { + .pictures { + background-size: 95% 85%; + } + } + + .text-justify { + hyphens: inherit; + text-align: inherit; + } + + .cooking { + .green-title { + background-size: 100% !important; + } + } + + .discover { + .swiper-other-products { + position: static; + margin: 0 4rem; + + .swiper-slide-content { + width: 100%; + } + + .navigation { + position: absolute; + top: 50%; + left: 0; + width: 100%; + transform: translateY(-50%); + } + } + + .other-products { + background-size: 95% 100%; + } + } + } +} diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index 5a33f92..2a647d9 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -81,6 +81,35 @@ document.addEventListener("DOMContentLoaded", function () { }, }, }, + "swiper-product-pictures": { + modules: [Navigation], + grabCursor: true, + slidesPerView: 1, + spaceBetween: 60, + // Navigation arrows + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + } + }, + "swiper-other-products": { + modules: [Navigation], + grabCursor: true, + slidesPerView: 1, + spaceBetween: 60, + // Navigation arrows + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + breakpoints: { + // when window width is >= 576px + 576: { + slidesPerView: 2, + spaceBetween: 0, + }, + }, + }, }; type SwiperSlider = { element: HTMLElement; diff --git a/resources/views/fo/pages/products/show.blade.php b/resources/views/fo/pages/products/show.blade.php new file mode 100644 index 0000000..fe1eda9 --- /dev/null +++ b/resources/views/fo/pages/products/show.blade.php @@ -0,0 +1,182 @@ +@extends('fo.layout') + +@section('title', $product->seo_title ?? __('Fiche produit')) +@section('description', $product->seo_description ?? __('Fiche descriptive d\'un produit')) +@section('breadcrumb', + request()->route()->getName()) + +@section('content') +
+ +
+ {{ __('fond gris') }} +
+ +

+ {{ $product->title }} +

+ +
+ + {{-- CARROUSEL image ambiance/packshot --}} +
+
+
+
+
+ {{ $product->picture_ambiance_alt }} +
+
+
+
+ {{ $product->picture_packshot_alt }} +
+
+
+
+
+ {{ __('flèche vers la gauche') }} +
+
+ {{ __('flèche vers la droite') }} +
+
+
+
+ {{ $product->picture_ambiance_alt }} + {{ $product->picture_packshot_alt }} +
+
+ + {{-- DESCRIPTION --}} +
{!! clean($product->description) !!}
+ + {{-- PICTOS --}} + @if (!empty($product->commitments)) +
+ +
+ @foreach ($product->commitments as $commitment) +
+
+ {{ $commitment->picture_alt }} +
+
+ @endforeach +
+ +
+ @endif +
+ +
+
+
+ {{-- COOKING ADVICE --}} +

{{ __('Conseils de Réchauffage') }}

+
+ {{ $product->cooking_mode->alt() }} +
{!! clean($product->cooking_advice) !!}
+
+ {{-- INGREDIENTS --}} +

{{ __('Ingrédients') }}

+
+
{!! clean($product->ingredients) !!}
+
+
+
+
+
+ Dessins de feuilles et de graines éparpillées +
+ {{-- NUTRITIONNAL VALUES --}} + @php + $nutrionnal_values = json_decode($product->nutritionnal_values); + @endphp + + + + + + + + + @foreach ($nutrionnal_values as $line) + + + + + @endforeach + +
{{ __('Valeurs nutritionnelles') }}{{ __('POUR') }} {{ __('100g') }}
{{ $line->label }}{{ $line->value }}
+
+
+
+
+ + @if (count($otherProductModels)) +
+ {{ __('fond gris') }} +

+ {{ __('Découvrez nos produits') }} +

+ {{-- CARROUSEL produits même gamme mais ordre aléatoire --}} +
+
+
+ @foreach ($otherProductModels as $otherProduct) +
+
+ {{ $otherProduct->picture_ambiance_alt }} +
+ {{ __('> En savoir +') }} +
+
+
+ @endforeach +
+ @if (count($otherProductModels) > 1) +
+
+ {{ __('flèche vers la gauche') }} +
+
+ {{ __('flèche vers la droite') }} +
+
+ @endif +
+
+
+ {{ __('> Voir toutes nos gammes') }} +
+
+ @endif +
+@endsection diff --git a/routes/web-fo.php b/routes/web-fo.php index 9a85ca0..9ea8aea 100644 --- a/routes/web-fo.php +++ b/routes/web-fo.php @@ -1,6 +1,7 @@ name('ranges.index'); Route::get('/gammes/{slug}', [RangeController::class, 'show'])->name('ranges.show'); + // * products + Route::get('/produits/{publishedProduct:slug}', [ProductController::class, 'show'])->name('products.show'); + // * CONTACT Route::get('/contact', [StaticPageController::class, 'contact'])->name('contact.show'); Route::post('/contact-form', [StaticPageController::class, 'contactForm'])->name('contact.store');