champ de recherche et resultats de recherche
This commit is contained in:
Olivier Legat
parent
b0646dd76f
commit
e2b2433b60
8 changed files with 103 additions and 90 deletions
|
|
@ -4,6 +4,7 @@ namespace App\Http\Controllers;
|
|||
|
||||
use App\Models\Gamme;
|
||||
use App\Models\Product;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class ProductsController extends Controller
|
||||
{
|
||||
|
|
@ -14,4 +15,23 @@ class ProductsController extends Controller
|
|||
//dd($product);
|
||||
return view('front.product', compact('product', 'gamme'));
|
||||
}
|
||||
|
||||
public function search(Request $request) {
|
||||
$filter = $request->query('filter');
|
||||
|
||||
if (!empty($filter)) {
|
||||
$products = Product::where('is_published', 1)
|
||||
->where('name', 'like', '%' . $filter . '%')
|
||||
->get();
|
||||
//->paginate(12);
|
||||
} else {
|
||||
$products = Product::where('is_published', 1)
|
||||
->get();
|
||||
//->paginate(12);
|
||||
}
|
||||
|
||||
$search_title = 'Recherche : ' . $filter;
|
||||
|
||||
return view('front.search', compact('products', 'search_title', 'filter'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
public/css/preload-front.css
vendored
9
public/css/preload-front.css
vendored
|
|
@ -4877,6 +4877,15 @@ h3:not(.item__title, .product-card__title){
|
|||
.secondmenu{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
position:relative;
|
||||
}
|
||||
.secondmenu .search-form{
|
||||
display:none;
|
||||
position:absolute;
|
||||
top:40px;
|
||||
}
|
||||
.secondmenu .search-form.is-visible{
|
||||
display:initial;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 799px){
|
||||
|
|
|
|||
10
resources/sass/frontend/_menu.scss
vendored
10
resources/sass/frontend/_menu.scss
vendored
|
|
@ -181,6 +181,16 @@
|
|||
.secondmenu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
|
||||
.search-form {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
&.is-visible {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 799px) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<img src="{{ asset($product->picture) }}" alt="{{ $product->alt_text_picture }}">
|
||||
<h3 class="product-card__title">{{ $product->name }}</h3>
|
||||
<a href="{{ route('product.show', ['gammeSlug' => $product->gamme->slug , 'productSlug' => $product->slug]) }}"></a>
|
||||
<span class="overlay" style="background-color: {{ $gamme->rgbaColor}};">
|
||||
<span class="overlay" style="background-color: {{ $product->gamme->rgbaColor}};">
|
||||
<span>{{ __('Découvrir') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,5 @@
|
|||
@extends('layouts.frontend')
|
||||
@section('title', __('Accueil'))
|
||||
@section('description', __("Découvrez DOUX, des produits de volailles françaises."))
|
||||
|
||||
@section('content')
|
||||
|
||||
<section class="jumbotron">
|
||||
<p class="maintitle animate__animated fadeIn animate__slow">Nos produits</p>
|
||||
<img class="img-zoom" src="{{ asset('assets/images/volailles.jpg') }}" alt="Volailles">
|
||||
<div class="banner">
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: transparent;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
|
||||
<path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="wrapper">
|
||||
<div class="header-title align-center p-rel">
|
||||
<div class="breadcrumb is-flex">
|
||||
<a href="{{ route('gammes') }}" class="link">Gammes</a>
|
||||
</div>
|
||||
<!-- <div id="filter" class="is-flex">
|
||||
<button class="ttu fresh p-rel">nos gammes <span class="bold">frais</span></button>
|
||||
<button class="ttu frozen p-rel">nos gammes <span class="bold">gel</span></button>
|
||||
</div> -->
|
||||
<!-- <h1 class="align-center">Qui sommes-nous ?</h1> -->
|
||||
|
||||
<h1 class="align-center animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Nos produits de la gamme</h1>
|
||||
</div>
|
||||
<!-- <h2 class="align-center sectiontitle">Nos produits de la gamme</h2> -->
|
||||
<p class="align-center">Des produits Incontournables, Authentiques et Innovants !</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list" class="container">
|
||||
<div class="wrapper is-flex">
|
||||
<div class="product-card align-center">
|
||||
<!-- <span class="label fresh"></span> -->
|
||||
<img src="{{ asset('assets/images/produit.jpg') }}" alt="Produit">
|
||||
<h3 class="product-card__title">Produit 1</h3>
|
||||
<a href="{{ route('product') }}"></a>
|
||||
<span class="overlay">
|
||||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-card align-center">
|
||||
<!-- <span class="label fresh"></span> -->
|
||||
<img src="{{ asset('assets/images/produit.jpg') }}" alt="">
|
||||
<h3 class="product-card__title">Produit 2</h3>
|
||||
<a href="{{ route('product') }}"></a>
|
||||
<span class="overlay">
|
||||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-card align-center">
|
||||
<!-- <span class="label frozen"></span> -->
|
||||
<img src="{{ asset('assets/images/produit.jpg') }}" alt="">
|
||||
<h3 class="product-card__title">Produit 3</h3>
|
||||
<a href="{{ route('product') }}"></a>
|
||||
<span class="overlay">
|
||||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-card align-center">
|
||||
<!-- <span class="label fresh"></span> -->
|
||||
<img src="{{ asset('assets/images/produit.jpg') }}" alt="">
|
||||
<h3 class="product-card__title">Produit 4</h3>
|
||||
<a href="{{ route('product') }}"></a>
|
||||
<span class="overlay">
|
||||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@endsection
|
||||
<div class="is-flex">
|
||||
@foreach ($products as $product)
|
||||
@include('front.gammes.product')
|
||||
@endforeach
|
||||
</div>
|
||||
|
|
|
|||
41
resources/views/front/search.blade.php
Normal file
41
resources/views/front/search.blade.php
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@extends('layouts.frontend')
|
||||
|
||||
@section('title', 'Recherche produits')
|
||||
@section('description', 'Résultats de recherche')
|
||||
|
||||
@section('content')
|
||||
<section class="jumbotron">
|
||||
<p class="maintitle ttu animate__animated fadeIn animate__slow">{{ $search_title }}</p>
|
||||
<img class="img-zoom" src="{{ asset('assets/images/contact.jpg') }}" alt="{{ $search_title }}">
|
||||
<div class="banner">
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: transparent;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
|
||||
<path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container">
|
||||
<div class="wrapper">
|
||||
<div class="breadcrumb is-flex">
|
||||
<a href="{{ route('home') }}" class="link">{{ __('Accueil') }}</a>
|
||||
</div>
|
||||
<h2 class="align-center sectiontitle">{{ __('Résultats') }}</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section id="list">
|
||||
<div class="wrapper align-center">
|
||||
@include('front.products-list')
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -101,6 +101,12 @@
|
|||
<li class="@if(App::getLocale() == 'en') current @endif"><a href="?lang=EN">en</a></li>
|
||||
<li class="@if(App::getLocale() == 'es') current @endif"><a href="?lang=ES">es</a></li>
|
||||
</ul>
|
||||
<form class="form search-form" method="GET" action="{{ route('search') }}">
|
||||
<input class="search-form__input" type="search"
|
||||
placeholder="{{ __("Recherchez un produit") }}"
|
||||
id="search_filter" name="filter"
|
||||
value="{{ $filter ?? ''}}">
|
||||
</form>
|
||||
<button id="search">
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
|
||||
<path class="cls-1" d="M13.06,0h7a17.46,17.46,0,0,1,8,8v7c-5.38,8.15-9,9.37-18.37,5.94l-6.52,7c-2.49.5-3.48-.5-3-3l7-6.52C3.7,9,4.92,5.38,13.06,0ZM16.6,3.74a7.41,7.41,0,0,0-7.54,7.41,7.49,7.49,0,0,0,7.67,7.79,7.4,7.4,0,0,0,7.52-7.43A7.31,7.31,0,0,0,16.6,3.74Z" />
|
||||
|
|
@ -113,3 +119,13 @@
|
|||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
var loupe = document.querySelector("button#search");
|
||||
|
||||
loupe.addEventListener("click", function () {
|
||||
document.querySelector("form.search-form").classList.toggle('is-visible');
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
|
|
@ -118,5 +118,6 @@ Route::middleware(['init-vars','lang-check'])
|
|||
Route::view('/mentions-legales', 'front.legals')->name('cgu');
|
||||
Route::view('/charte-confidentialite', 'front.policy')->name('policy');
|
||||
Route::view('/plan-site', 'front.site-map')->name('site-map');
|
||||
Route::get('/recherche', [ControllersProductsController::class, 'search'])->name('search');
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue