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

feat: ✨ add buttons prev/next (depending on the filters) on products.show

Browse source
This commit is contained in:
Alexis Gousseau 2024-06-27 12:34:33 +02:00
parent f7c15c2abb
commit fec668e41a
13 changed files with 167 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/Http/Controllers/Fo/ProductController.php
View file

@ -15,6 +15,7 @@ use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Http\Request;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Cache;
class ProductController extends Controller
{
@ -78,18 +79,73 @@ class ProductController extends Controller
if (is_null($productModel)) {
abort(404);
}
$productModelSibling = $this->getSiblingModels($productModel);
/** @var \App\Models\GeneralSetting|null $generalSettingModel Current general setting */
$generalSettingModel = GeneralSetting::query()->where('type', SettingsType::product)->first();
return view('fo.pages.products.show', [
'productModel' => $productModel,
'prevProductModel' => $productModelSibling[0],
'nextProductModel' => $productModelSibling[1],
'productModels' => $this->getProductsFiltered($productModel),
'recipeModels' => $this->getRecipesFiltered($productModel),
'generalSettingModel' => $generalSettingModel,
]);
}
/**
* Get product models titles for search input propositions.
*
* @param \App\Models\Product $productModel
* @return array
*/
public function getSiblingModels(Product $productModel): array
{
$slug = (Cache::get('productsFilter'))
? (((is_null($productModel->{Cache::get('productsFilter')}))
? $productModel->{"sub" . Cache::get('productsFilter')}->{Cache::get('productsFilter')}
: $productModel->{Cache::get('productsFilter')})->slug)
: "";
$productModelsList = Product::query()
->with('range', 'subrange', 'meat', 'submeat')
->when(in_array(Cache::get('productsFilter'), ['range', 'meat']), function (Builder $q) use ($slug) {
$q->where('published', true)
->whereHas(Cache::get('productsFilter'), function (Builder $q) use ($slug) {
$q->where('published', true)->where('slug', $slug);
})
->orWhereHas('sub' . Cache::get('productsFilter'), function (Builder $q) use ($slug) {
$q->where('published', true)
->whereHas(Cache::get('productsFilter'), function (Builder $q) use ($slug) {
$q->where('published', true)->where('slug', $slug);
});
});
})
->when(in_array(Cache::get('productsFilter'), ['subrange', 'submeat']), function (Builder $q) use ($slug) {
$q->where('published', true)
->whereHas(Cache::get('productsFilter'), function (Builder $q) use ($slug) {
$q->where('published', true)->where('slug', $slug);
});
})
->where('published', true)
->orderBy('slug', 'ASC')
->get();
$collectionIndex = $productModelsList->search(function ($productModelItem, $key) use ($productModel) {
if ($productModelItem->getKey() === $productModel->getKey()) {
return $key;
};
});
$productModelSibling[0] = (is_null($productModelsList->get($collectionIndex - 1)))
? $productModelsList->last()
: $productModelsList->get($collectionIndex - 1);
$productModelSibling[1] = (is_null($productModelsList->get($collectionIndex + 1)))
? $productModelsList->first()
: $productModelsList->get($collectionIndex + 1);
return $productModelSibling;
}
/**
* Get product models titles for search input propositions.
*
@ -159,6 +215,7 @@ class ProductController extends Controller
public function getProductsByRange(
Request $request
): \Illuminate\Http\JsonResponse|\Illuminate\Contracts\View\View {
Cache::put('productsFilter', 'range');
$rangeModel = Range::query()
->where('slug', $request->model_slug)
->where('published', true)
@ -202,6 +259,7 @@ class ProductController extends Controller
public function getProductsBySubrange(
Request $request
): \Illuminate\Http\JsonResponse|\Illuminate\Contracts\View\View {
Cache::put('productsFilter', 'subrange');
$rangeModel = Range::query()
->where('slug', $request->model_slug)
->where('published', true)
@ -249,6 +307,7 @@ class ProductController extends Controller
public function getProductsByMeat(
Request $request
): \Illuminate\Http\JsonResponse|\Illuminate\Contracts\View\View {
Cache::put('productsFilter', 'meat');
$meatModel = Meat::query()
->where('slug', $request->model_slug)
->where('published', true)
@ -291,6 +350,7 @@ class ProductController extends Controller
public function getProductsBySubmeat(
Request $request
): \Illuminate\Http\JsonResponse|\Illuminate\Contracts\View\View {
Cache::put('productsFilter', 'submeat');
$meatModel = Meat::query()
->where('slug', $request->model_slug)
->where('published', true)

0
resources/assets/images/common/arrow.svg → resources/assets/images/common/arrow-brown.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 210 B

After

Width:  |  Height:  |  Size: 210 B

3
resources/assets/images/common/arrow-white.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L7 6.5L2 11" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

40
resources/sass/fo/pages/product.scss
View file

@ -6,6 +6,46 @@
height: 110%;
}
&-next-desktop {
top: 40%;
padding-top: 6rem;
transform: translateY(-50%) rotate(-3deg);
transition: .3s;
@include media-breakpoint-up(lg) {
top: 60%;
}
@include media-breakpoint-up(xl) {
top: 70%;
}
.img-fluid {
top: 100%;
left: 1rem;
height: 6.1rem !important;
transition: .6s;
}
&:hover {
transform: translateY(-50%) rotate(0deg);
.img-fluid {
top: 0;
}
}
}
.product-header-next-mobile {
width: 2rem;
height: 2rem;
padding: 0.4rem;
&:first-of-type .img-fluid {
transform: rotate(180deg);
}
}
.product-paper {
&:nth-child(1),
&:nth-child(2) {

2
resources/sass/fo/utilities/_mixins.scss
View file

@ -82,7 +82,7 @@
display: block;
width: 0.75rem;
height: 0.75rem;
background-image: url('@/images/common/arrow.svg');
background-image: url('@/images/common/arrow-brown.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;

8
resources/ts/fo/components/RangesSliderComponent.vue
View file

@ -41,7 +41,7 @@
</div>
<button class="swiper-btns swiper-btn-prev border-0 d-flex justify-content-center align-items-center position-absolute top-50 z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (gauche)')"
:alt="trans.methods.__('flèche vers la gauche')"
role="button"
@ -49,7 +49,7 @@
</button>
<button class="swiper-btns swiper-btn-next border-0 d-flex justify-content-center align-items-center position-absolute top-50 translate-middle-y z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (droite)')"
:alt="trans.methods.__('flèche vers la droite')"
role="button"
@ -111,7 +111,7 @@
</div>
<button class="swiper-btns swiper-btn-prev border-0 d-flex justify-content-center align-items-center position-absolute top-50 z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (gauche)')"
:alt="trans.methods.__('flèche vers la gauche')"
role="button"
@ -119,7 +119,7 @@
</button>
<button class="swiper-btns swiper-btn-next border-0 d-flex justify-content-center align-items-center position-absolute top-50 translate-middle-y z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (droite)')"
:alt="trans.methods.__('flèche vers la droite')"
role="button"

4
resources/ts/fo/components/SearchModelComponent.vue
View file

@ -193,7 +193,7 @@
</div>
<button class="swiper-btns swiper-btn-prev border-0 d-flex justify-content-center align-items-center position-absolute top-50 z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (gauche)')"
:alt="trans.methods.__('flèche vers la gauche')"
role="button"
@ -201,7 +201,7 @@
</button>
<button class="swiper-btns swiper-btn-next border-0 d-flex justify-content-center align-items-center position-absolute top-50 translate-middle-y z-1 bg-white rounded-pill">
<img
src="@/images/common/arrow.svg"
src="@/images/common/arrow-brown.svg"
:title="trans.methods.__('Navigation du slider (droite)')"
:alt="trans.methods.__('flèche vers la droite')"
role="button"

14
resources/views/fo/pages/home.blade.php
View file

@ -84,15 +84,15 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-main-slides-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
alt="{{ __('flèche vers la gauche') }}">
</button>
<button class="swiper-button swiper-button-prev-custom swiper-main-slides-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
alt="{{ __('flèche vers la gauche') }}">
</button>
<button class="swiper-button swiper-button-next-custom swiper-main-slides-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}" title="{{ __('Navigation du slider (droite)') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}" title="{{ __('Navigation du slider (droite)') }}"
alt="{{ __('flèche vers la droite') }}">
</button>
<img class="w-100 d-none d-xl-block" src="{{ Vite::asset('resources/assets/images/home/bg-slider-wood.png') }}"
@ -187,12 +187,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-demarche-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-demarche-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>
@ -258,12 +258,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-commitments-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-commitments-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>

4
resources/views/fo/pages/products/index.blade.php
View file

@ -53,12 +53,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-products-discover-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-products-discover-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>

50
resources/views/fo/pages/products/show.blade.php
View file

@ -13,11 +13,37 @@
<div class="col-12 col-lg-4 bg-warning p-0"></div>
<div class="col-12 col-lg-8 position-relative bg-white-wood-big p-0"></div>
</div>
<div class="container position-relative z-1">
@if ($productModel->getKey() !== $nextProductModel->getKey())
<div id="product-header-next-desktop" class="d-none d-sm-block position-absolute end-0 overflow-hidden z-2">
<img class="position-absolute img-fluid rotate-left" src="{{ asset($nextProductModel->packaging) }}"
alt="{{ $nextProductModel->packaging_alt }}" title="{{ $nextProductModel->packaging_title }}">
<a href="{{ route('fo.products.show', $nextProductModel->slug) }}"
title="{{ __('Accéder au produit suivant') }}"
class="btn btn-secondary ps-2 py-2 pe-5 rounded-0 position-relative d-flex justif-y-content-start align-items-center z-1" role="button">
<div class="fs-5">
{{ __('models.classes.product') }}<br>
{{ __('suivant') }}
</div>
<img class="ms-4"
src="{{ Vite::asset('resources/assets/images/common/arrow-white.svg') }}"
title="{{ __('Accéder au produit suivant') }}"
alt="{{ __('Flèche blanche') }}" />
</a>
</div>
@endif
<div id="product-header-details" class="container position-relative">
<div class="row flex-lg-row-reverse pb-5">
<div class="col-12 col-lg-6">
{{-- FIXME: wait feedback JM for this button (prev product) --}}
<div class="position-relative d-flex justify-content-center align-items-center h-fit pb-5">
<div class="col-12 col-lg-6 position-relative mb-sm-5">
@if ($productModel->getKey() !== $prevProductModel->getKey())
<a href="{{ route('fo.products.show', $prevProductModel->slug) }}"
class="product-header-next-mobile d-sm-none position-absolute top-50 start-0 translate-middle-y btn btn-white rounded-circle ms-3 z-1">
<img class="img-fluid"
src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Accéder au produit précédent') }}"
alt="{{ __('Flèche marron') }}" />
</a>
@endif
<div class="position-relative d-flex justify-content-center align-items-center h-fit px-5 pb-5">
@if ($productModel->new)
<img class="d-none d-lg-block position-absolute tag-new z-1"
src="{{ Vite::asset('resources/assets/images/common/tag-new.svg') }}"
@ -26,11 +52,19 @@
@endif
<img class="img-fluid rotate-right" src="{{ asset($productModel->packaging) }}"
alt="{{ $productModel->packaging_alt }}" title="{{ $productModel->packaging_title }}">
<img class="d-none d-lg-block img-fluid position-absolute bottom-0 start-0"
<img class="d-none d-sm-block img-fluid position-absolute bottom-0 start-0"
src="{{ asset($productModel->picture) }}" alt="{{ $productModel->picture_alt }}"
title="{{ $productModel->picture_title }}">
</div>
{{-- FIXME: wait feedback JM for this button (next product) --}}
@if ($productModel->getKey() !== $nextProductModel->getKey())
<a href="{{ route('fo.products.show', $nextProductModel->slug) }}"
class="product-header-next-mobile d-sm-none position-absolute top-50 end-0 translate-middle-y btn btn-white rounded-circle me-3 z-1">
<img class="img-fluid"
src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Accéder au produit suivant') }}"
alt="{{ __('Flèche marron') }}" />
</a>
@endif
</div>
<div class="col-12 col-lg-6 pe-lg-5">
<div class="row w-100 mx-auto">
@ -253,13 +287,13 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-commitments-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}"
alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-commitments-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}"
alt="{{ __('flèche vers la droite') }}">
</button>

4
resources/views/fo/pages/recruitment.blade.php
View file

@ -47,12 +47,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-recruitment-jobs-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}" title="{{ __('Navigation du slider (gauche)') }}"
alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-recruitment-jobs-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}" title="{{ __('Navigation du slider (droite)') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}" title="{{ __('Navigation du slider (droite)') }}"
alt="{{ __('flèche vers la droite') }}">
</button>
</div>

4
resources/views/fo/partials/cards-slider.blade.php
View file

@ -21,12 +21,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-{{ $id }}s-button-prev d-flex justify-content-center align-items-center position-absolute top-50 z-1 rounded-pill border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-{{ $id }}s-button-next d-flex justify-content-center align-items-center position-absolute top-50 z-1 rounded-pill border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>

4
resources/views/fo/partials/videos-slider.blade.php
View file

@ -28,12 +28,12 @@
</div>
<button
class="swiper-button swiper-button-prev-custom swiper-videos-button-prev d-flex justify-content-center align-items-center position-absolute z-1 rounded-pill border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-videos-button-next d-flex justify-content-center align-items-center position-absolute z-1 rounded-pill border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow.svg') }}"
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>