Carousel doesn't work bootstrap 5. Someone can help me? - laravel

Someone can help me? I'm using bootstrap carousel in my webpage but carousel doesn't work. What is the reason? Does it need something extra for it to work?
<div class="container">
<div id="carouselExampleIndicators" class="aşağı-kısım-carousel-slide carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>

I think this is from:
or to the class (you changed the name of the class)
or bootstrap files you may have inserted incorrectly.
Try to execute this code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5d35eacaf1176b0008974b54%2F0x0.jpg%3FcropX1%3D790%26cropX2%3D5350%26cropY1%3D784%26cropY2%3D3349" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://img.etimg.com/thumb/msid-73268134,width-640,resizemode-4,imgsize-35417/surprise-heard-of-a-sony-car.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

The content of the view is shown below the sidebar

I'm having a problem.
I have the following Sidebar in a file called navbar.blade.php:
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li>
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Product</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 2
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 3
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 4
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">loser</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content area...
</div>
</div>
</div>
Then I have a second layout file (layout.blade.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#vite(['resources/css/app.css', 'resources/js/app.js'])
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
</body>
</html>
Next I have the following view (index.blade.php) which I want to be shown not under the sidebar but in the space where there is the word Content area ... in the sidebar.
As I am doing, the contents of index.blade.php are shown below.
<x-layout>
#if (session('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
#endif
<div class="row margintitle">
<div class="col-12 col-md-8 d-flex justify-content-center">
<h1>List all customers</h1>
</div>
</div>
</x-layout>
Can anyone kindly help me?
You can use the x-slot tag
(refs: https://laravel.com/docs/9.x/blade#slots)
I simplified the code:
navbar.blade.php:
<div class="col py-3">
{{-- Content area... -- }}
{{ $slot }}
</div>
layout.blade.php:
<x-navbar>
{{ $navbarContent }}
</x-navbar>
{{ $slot }}
index.blade.php:
<x-layout>
<x-slot:navbar-content> navbar title </x-slot>
<div> other content </div>
</x-layout>

Bootstrap Carousel Produces "Blank Images"

My Bootstrap Carousel produces “Blank Images”. Is there something wrong with the html? Do I need to edit the CSS file? Thanks in advance!
<div class="row align-items-center my-5">
<div class="col-lg-7">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/900X400.jpg" class="d-block w-100" alt="" />
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>
</div>
<a class="carousel-control-prev" href="#homeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#homeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Remove these two blank carousel-items
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>

How to extend views with shared Layout in Laravel?

I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');

algolia facets automatically hiding products

I am new to algolia, vue and laravel. I am trying to build an e-commerce where I have used facets for filtering down data. The problem here is, whenever I check a specific filter, a certain product hides when I hover over the item before. I don't know what is creating the problem. Please help me.
This is my store.blade.php
#extends('layouts.search')
#section('content')
#include('layouts.app')
#stop
#section('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap-hover-dropdown.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/echo.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/wow.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/jquery.easing.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/jquery.waypoints.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/electro.js')}}"></script>
#endsection
This is my app.blade.php
<div id="app">
<ais-index
app-id="Q5IYJ43XF9"
api-key="eb9bda691044aed1d217db64608643dc"
index-name="phones"
:query-parameters="{
numericFilters:['sold != 1']
}"
>
<div class="top-bar">
<div class="container">
<nav>
<ul id="menu-top-bar-left" class="nav nav-inline pull-left animate-dropdown flip">
<li class="menu-item animate-dropdown"><a title="Welcome to Worldwide Electronics Store" href="#">Welcome to Worldwide Electronics Store</a></li>
</ul>
</nav>
<nav>
<ul id="menu-top-bar-right" class="nav nav-inline pull-right animate-dropdown flip">
<li class="menu-item animate-dropdown"><a title="Store Locator" href="#"><i class="ec ec-map-pointer"></i>Store Locator</a></li>
<li class="menu-item animate-dropdown"><a title="Track Your Order" href="track-your-order.html"><i class="ec ec-transport"></i>Track Your Order</a></li>
#if (!Auth::guest())
<li class="menu-item animate-dropdown"><a title="My Account" href="{{ route('account') }}"><i class="ec ec-user"></i>My Account</a></li>
<li class="menu-item animate-dropdown"><a title="Sign Out" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style=" font-size: 15px; color:rgb(214, 38, 38)">
<i class="fa fa-power-off"></i> <b>Sign Out</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form></li>
#endif
</ul>
</nav>
</div>
</div><!-- /.top-bar -->
<header id="masthead" class="site-header header-v2">
<div class="container">
<div class="row">
<!-- ============================================================= Header Logo ============================================================= -->
<div class="header-logo">
<a href="home.html" class="header-logo-link">
<svg version="1.1" x="0px" y="0px" width="175.748px"
height="42.52px" viewBox="0 0 175.748 42.52" enable-background="new 0 0 175.748 42.52">
<ellipse class="ellipse-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#FDD700" cx="170.05" cy="36.341" rx="5.32" ry="5.367"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333E48" d="M30.514,0.71c-0.034,0.003-0.066,0.008-0.056,0.056
C30.263,0.995,29.876,1.181,29.79,1.5c-0.148,0.548,0,1.568,0,2.427v36.459c0.265,0.221,0.506,0.465,0.725,0.734h6.187
c0.2-0.25,0.423-0.477,0.669-0.678V1.387C37.124,1.185,36.9,0.959,36.701,0.71H30.514z M117.517,12.731
c-0.232-0.189-0.439-0.64-0.781-0.734c-0.754-0.209-2.039,0-3.121,0h-3.176V4.435c-0.232-0.189-0.439-0.639-0.781-0.733
c-0.719-0.2-1.969,0-3.01,0h-3.01c-0.238,0.273-0.625,0.431-0.725,0.847c-0.203,0.852,0,2.399,0,3.725
c0,1.393,0.045,2.748-0.055,3.725h-6.41c-0.184,0.237-0.629,0.434-0.725,0.791c-0.178,0.654,0,1.813,0,2.765v2.766
c0.232,0.188,0.439,0.64,0.779,0.733c0.777,0.216,2.109,0,3.234,0c1.154,0,2.291-0.045,3.176,0.057v21.277
c0.232,0.189,0.439,0.639,0.781,0.734c0.719,0.199,1.969,0,3.01,0h3.01c1.008-0.451,0.725-1.889,0.725-3.443
c-0.002-6.164-0.047-12.867,0.055-18.625h6.299c0.182-0.236,0.627-0.434,0.725-0.79c0.176-0.653,0-1.813,0-2.765V12.731z
M135.851,18.262c0.201-0.746,0-2.029,0-3.104v-3.104c-0.287-0.245-0.434-0.637-0.781-0.733c-0.824-0.229-1.992-0.044-2.898,0
c-2.158,0.104-4.506,0.675-5.74,1.411c-0.146-0.362-0.451-0.853-0.893-0.96c-0.693-0.169-1.859,0-2.842,0h-2.842
c-0.258,0.319-0.625,0.42-0.725,0.79c-0.223,0.82,0,2.338,0,3.443c0,8.109-0.002,16.635,0,24.381
c0.232,0.189,0.439,0.639,0.779,0.734c0.707,0.195,1.93,0,2.955,0h3.01c0.918-0.463,0.725-1.352,0.725-2.822V36.21
c-0.002-3.902-0.242-9.117,0-12.473c0.297-4.142,3.836-4.877,8.527-4.686C135.312,18.816,135.757,18.606,135.851,18.262z
M14.796,11.376c-5.472,0.262-9.443,3.178-11.76,7.056c-2.435,4.075-2.789,10.62-0.501,15.126c2.043,4.023,5.91,7.115,10.701,7.9
c6.051,0.992,10.992-1.219,14.324-3.838c-0.687-1.1-1.419-2.664-2.118-3.951c-0.398-0.734-0.652-1.486-1.616-1.467
c-1.942,0.787-4.272,2.262-7.134,2.145c-3.791-0.154-6.659-1.842-7.524-4.91h19.452c0.146-2.793,0.22-5.338-0.279-7.563
C26.961,15.728,22.503,11.008,14.796,11.376z M9,23.284c0.921-2.508,3.033-4.514,6.298-4.627c3.083-0.107,4.994,1.976,5.685,4.627
C17.119,23.38,12.865,23.38,9,23.284z M52.418,11.376c-5.551,0.266-9.395,3.142-11.76,7.056
c-2.476,4.097-2.829,10.493-0.557,15.069c1.997,4.021,5.895,7.156,10.646,7.957c6.068,1.023,11-1.227,14.379-3.781
c-0.479-0.896-0.875-1.742-1.393-2.709c-0.312-0.582-1.024-2.234-1.561-2.539c-0.912-0.52-1.428,0.135-2.23,0.508
c-0.564,0.262-1.223,0.523-1.672,0.676c-4.768,1.621-10.372,0.268-11.537-4.176h19.451c0.668-5.443-0.419-9.953-2.73-13.037
C61.197,13.388,57.774,11.12,52.418,11.376z M46.622,23.343c0.708-2.553,3.161-4.578,6.242-4.686
c3.08-0.107,5.08,1.953,5.686,4.686H46.622z M160.371,15.497c-2.455-2.453-6.143-4.291-10.869-4.064
c-2.268,0.109-4.297,0.65-6.02,1.524c-1.719,0.873-3.092,1.957-4.234,3.217c-2.287,2.519-4.164,6.004-3.902,11.007
c0.248,4.736,1.979,7.813,4.627,10.326c2.568,2.439,6.148,4.254,10.867,4.064c4.457-0.18,7.889-2.115,10.199-4.684
c2.469-2.746,4.012-5.971,3.959-11.063C164.949,21.134,162.732,17.854,160.371,15.497z M149.558,33.952
c-3.246-0.221-5.701-2.615-6.41-5.418c-0.174-0.689-0.26-1.25-0.4-2.166c-0.035-0.234,0.072-0.523-0.045-0.77
c0.682-3.698,2.912-6.257,6.799-6.547c2.543-0.189,4.258,0.735,5.52,1.863c1.322,1.182,2.303,2.715,2.451,4.967
C157.789,30.669,154.185,34.267,149.558,33.952z M88.812,29.55c-1.232,2.363-2.9,4.307-6.13,4.402
c-4.729,0.141-8.038-3.16-8.025-7.563c0.004-1.412,0.324-2.65,0.947-3.726c1.197-2.061,3.507-3.688,6.633-3.612
c3.222,0.079,4.966,1.708,6.632,3.668c1.328-1.059,2.529-1.948,3.9-2.99c0.416-0.315,1.076-0.688,1.227-1.072
c0.404-1.031-0.365-1.502-0.891-2.088c-2.543-2.835-6.66-5.377-11.704-5.137c-6.02,0.288-10.218,3.697-12.484,7.846
c-1.293,2.365-1.951,5.158-1.729,8.408c0.209,3.053,1.191,5.496,2.619,7.508c2.842,4.004,7.385,6.973,13.656,6.377
c5.976-0.568,9.574-3.936,11.816-8.354c-0.141-0.271-0.221-0.604-0.336-0.902C92.929,31.364,90.843,30.485,88.812,29.55z"/>
</svg>
</a>
</div>
<!-- ============================================================= Header Logo : End============================================================= -->
<div class="primary-nav animate-dropdown">
<div class="clearfix">
<button class="navbar-toggler hidden-sm-up pull-right flip" type="button" data-toggle="collapse" data-target="#default-header">
☰
</button>
</div>
<div class="collapse navbar-toggleable-xs" id="default-header">
<nav>
<ul id="menu-main-menu" class="nav nav-inline yamm">
<li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Home" href="shop.html" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Home</a>
</li>
<li class="menu-item animate-dropdown"><a title="About Us" href="about.html">About Us</a></li>
<li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Blog" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blog</a>
</li>
<li class="yamm-fw menu-item menu-item-has-children animate-dropdown dropdown">
<a title="Pages" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Pages</a>
</li>
<li class="menu-item"><a title="Features" href="#">Features</a></li>
<li class="menu-item"><a title="Contact Us" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<div class="header-support-info" style="
margin-top: 1%;
">
<div class="media">
<span class="media-left support-icon media-middle" style="margin-right:0px;"></span>
<div class="media-body">
#if (Auth::guest())
<div class="top-right links">
<b>Login</b>
<b>Register</b>
</div>
#else
<a href="#" class="nav-link" data-toggle="dropdown" role="button" aria-expanded="false" style="font-size: 16px; color:#a3d133">
<b>{{ucwords(Auth::user()->name) }} </b>
</a>
#endif
</div>
</div>
</div>
</div>
</div><!-- /.row -->
</header><!-- #masthead -->
<nav class="navbar navbar-primary navbar-full">
<div class="container">
<ul class="nav navbar-nav departments-menu animate-dropdown">
<li class="nav-item dropdown ">
<a class="nav-link" href="#" >Shop by Department</a>
</li>
</ul>
<div class="navbar-search">
<div class="input-group">
<ais-search-box>
<ais-input
placeholder="Search product by name or reference..."
:class-names="{
'ais-input': 'form-control navbar-search search-field',
}"
></ais-input>
</ais-search-box>
<div class="input-group-addon search-categories">
<select name='product_cat' id='product_cat' class='postform resizeselect' >
<option value='0' selected='selected'>All Categories</option>
<option class="level-0" value="laptops-laptops-computers">Laptops</option>
<option class="level-0" value="ultrabooks-laptops-computers">Ultrabooks</option>
<option class="level-0" value="mac-computers-laptops">Mac Computers</option>
<option class="level-0" value="all-in-one-laptops-computers">All in One</option>
<option class="level-0" value="servers">Servers</option>
<option class="level-0" value="peripherals">Peripherals</option>
<option class="level-0" value="gaming-laptops-computers">Gaming</option>
<option class="level-0" value="accessories-laptops-computers">Accessories</option>
<option class="level-0" value="audio-speakers">Audio Speakers</option>
<option class="level-0" value="headphones">Headphones</option>
<option class="level-0" value="computer-cases">Computer Cases</option>
<option class="level-0" value="printers">Printers</option>
<option class="level-0" value="cameras">Cameras</option>
<option class="level-0" value="smartphones">Smartphones</option>
<option class="level-0" value="game-consoles">Game Consoles</option>
<option class="level-0" value="power-banks">Power Banks</option>
<option class="level-0" value="smartwatches">Smartwatches</option>
<option class="level-0" value="chargers">Chargers</option>
<option class="level-0" value="cases">Cases</option>
<option class="level-0" value="headphone-accessories">Headphone Accessories</option>
<option class="level-0" value="headphone-cases">Headphone Cases</option>
<option class="level-0" value="tablets">Tablets</option>
<option class="level-0" value="tvs">TVs</option>
<option class="level-0" value="wearables">Wearables</option>
<option class="level-0" value="pendrives">Pendrives</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="ec ec-search"></i>
</button>
</div>
</div>
</div>
<ul class="navbar-mini-cart navbar-nav animate-dropdown nav pull-right flip">
<li class="nav-item dropdown">
<a href="cart.html" class="nav-link" data-toggle="dropdown">
<i class="ec ec-shopping-bag"></i>
<span class="cart-items-count count">4</span>
<span class="cart-items-total-price total-price"><span class="amount">$1,215.00</span></span>
</a>
<ul class="dropdown-menu dropdown-menu-mini-cart">
<li>
<div class="widget_shopping_cart_content">
<ul class="cart_list product_list_widget ">
<li class="mini_cart_item">
<a title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart1.jpg" alt="">White lumia 9001
</a>
<span class="quantity">2 × <span class="amount">£150.00</span></span>
</li>
<li class="mini_cart_item">
<a title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart2.jpg" alt="">PlayStation 4
</a>
<span class="quantity">1 × <span class="amount">£399.99</span></span>
</li>
<li class="mini_cart_item">
<a data-product_sku="" data-product_id="34" title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart3.jpg" alt="">POV Action Cam HDR-AS100V
</a>
<span class="quantity">1 × <span class="amount">£269.99</span></span>
</li>
</ul><!-- end product list -->
<p class="total"><strong>Subtotal:</strong> <span class="amount">£969.98</span></p>
<p class="buttons">
<a class="button wc-forward" href="cart.html">View Cart</a>
<a class="button checkout wc-forward" href="checkout.html">Checkout</a>
</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="navbar-wishlist nav navbar-nav pull-right flip">
<li class="nav-item">
<i class="ec ec-favorites"></i>
</li>
</ul>
<ul class="navbar-compare nav navbar-nav pull-right flip">
<li class="nav-item">
<i class="ec ec-compare"></i>
</li>
</ul>
</div>
</nav>
<div id="content" class="site-content" tabindex="-1">
<div class="container">
<nav class="woocommerce-breadcrumb" >Home<span class="delimiter"><i class="fa fa-angle-right"></i></span>Smart Phones & Tablets</nav>
<div id="updateDiv">
<div id="primary" class="content-area">
<main id="main" class="site-main">
<header class="page-header">
<h1 class="page-title">Smart Phones & Tablets</h1>
<p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
</header>
<div class="shop-control-bar">
<ul class="shop-view-switcher nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" title="Grid View" href="#grid"><i class="fa fa-th"></i></a></li>
<li class="nav-item"><a class="nav-link " data-toggle="tab" title="List View Small" href="#list-view-small"><i class="fa fa-th-list"></i></a></li>
</ul>
<form class="woocommerce-ordering" method="get" action="{{route('store.sort')}}">
<select name="orderby" class="orderby" action="/store/sort">
<option value="menu_order" >Default sorting</option>
<option value="price" >Sort by price: low to high</option>
<option value="price-desc" >Sort by price: high to low</option>
</select>
</form>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="grid" aria-expanded="true">
<ul class="products columns-3">
<ais-results>
<template scope="{ result }">
<li class="product col-md-4">
<div class="product-outer">
<div class="product-inner highlight">
<span class="loop-product-categories">Smartphones</span>
<a :href='result.url'>
<h3><ais-highlight :class-names="{'ais-highlight': 'highlight'}" :result="result" attribute-name="company"></ais-highlight> <ais-highlight :result="result" attribute-name="model"></ais-highlight> - #{{ result.storage }} GB</h3>
<div class="product-thumbnail">
<img :src="result.photo" alt="" style="height:200px">
</div>
</a>
<div class="price-add-to-cart">
<span class="price">
<span class="electro-price">
<ins><span class="amount">₹ #{{ result.price }}</span></ins>
</span>
</span>
<a rel="nofollow" href="single-product.html" class="button add_to_cart_button">Add to cart</a>
</div><!-- /.price-add-to-cart -->
<div class="hover-area">
<div class="action-buttons">
<a href="#" rel="nofollow" class="add_to_wishlist">
Premium Quality Phone</a>
</div>
</div>
</div><!-- /.product-inner -->
</div><!-- /.product-outer -->
</li>
</template>
</ais-results>
<ais-no-results></ais-no-results>
</ul>
</div>
</div>
<div class="shop-control-bar-bottom">
<p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
<nav class="woocommerce-pagination">
{{ $phones->links('pagination.default') }}
</nav>
</div>
</main><!-- #main -->
</div><!-- #primary -->
</div>
#include('layouts.sidebar')
</div><!-- .container -->
</div><!-- #content -->
</ais-index>
> </div>
> </div>
> </div><!-- .container -->
>
> <script src="{{ asset('js/app.js') }}"></script>
This is my sidebar.blade.php
<div id="sidebar" class="sidebar" role="complementary">
<aside class="widget widget_electro_products_filter">
<h3 class="widget-title">Filters</h3>
<aside class="widget woocommerce">
<h3 class="widget-title">Brands</h3>
<ul>
<div class="companies" id="company">
<ais-refinement-list attribute-name="company" :class-names="{
'ais-refinement-list__count': 'badge',
'ais-refinement-list__item': 'checkbox'
}">
</ais-refinement-list>
</div>
</ul>
</aside>
<aside class="widget woocommerce">
<h3 class="widget-title">Storage</h3>
<ul>
<div class="storages">
<ais-refinement-list attribute-name="storage" :class-names="{
'ais-refinement-list__count': 'badge',
'ais-refinement-list__item': 'checkbox'
}">
</ais-refinement-list>
</div>
</ul>
</aside>
</aside>
<aside class="widget widget_text">
<div class="textwidget">
<a href="#">
<img src="assets/images/banner/ad-banner-sidebar.jpg" alt="Banner"></a>
</div>
</aside>
</div>
And finally app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('Search', require('./components/Search.vue'));
const app = new Vue({
el: '#app'
});
const app2 = new Vue({
el: '#appli'
});
const app3 = new Vue({
el: '#applic'
});
I believe it's an issue with your CSS style. Because when you hover, it adds borders and shadows, it might change the height and you run into an issue with overflow, or something similar.
To debug, I'd advise you to lock the hover on the product (with your browser dev tools) and inspect where is the element after. I believe it's still in the DOM.

include sub-view in master page and clear my data after login

When i using #include in master page blade template for add header and sidebar page,this action makes clear login data.
i've tried.without using include in master page below code printing login data
{{Auth::User()->first_name . ' ' . Auth::User()->family}}
but after add include,with one refresh page all login data is cleared!
master page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap-theme.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style-responsive.css')}}">
<script src="{{URL::asset('asset/js/jquery.min.js')}}"></script>
#yield('css')
</head>
<body>
{{--Header Start--}}
#include('layouts.header')
{{--End Header--}}
{{--Sidebar Start--}}
#include('layouts.sidebar')
{{--End Sidebar--}}
{{--Content Start--}}
#yield('content')
{{--End Content--}}
<script type="text/javascript" src="{{URL::asset('asset/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.nicescroll.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/common-scripts.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.dcjqaccordion.2.7.js')}}"></script>
#yield('js')
</body>
</html>
UPDATE:
call view:
Route::get('/', function () {
return view('index');
});
and this is my header page:
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-reorder tooltips"></div>
</div>
<!--logo start-->
PTA<span>OIMS</span>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification start -->
<ul class="nav top-menu">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge bg-success">6</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">You have 6 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
See All Tasks
</li>
</ul>
</li>
<!-- settings end -->
<!-- inbox dropdown start-->
<li id="header_inbox_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-important">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">You have 5 new messages</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Jonathan Smith</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini2.jpg"></span>
<span class="subject">
<span class="from">Jhon Doe</span>
<span class="time">10 mins</span>
</span>
<span class="message">
Hi, Jhon Doe Bhai how are you ?
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini3.jpg"></span>
<span class="subject">
<span class="from">Jason Stathum</span>
<span class="time">3 hrs</span>
</span>
<span class="message">
This is awesome dashboard.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini4.jpg"></span>
<span class="subject">
<span class="from">Jondi Rose</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is metrolab
</span>
</a>
</li>
<li>
See all messages
</li>
</ul>
</li>
<!-- inbox dropdown end -->
<!-- notification dropdown start-->
<li id="header_notification_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge bg-warning">7</span>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">You have 7 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Server #3 overloaded.
<span class="small italic">34 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-bell"></i></span>
Server #10 not respoding.
<span class="small italic">1 Hours</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Database overloaded 24%.
<span class="small italic">4 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-plus"></i></span>
New user registered.
<span class="small italic">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="fa fa-bank"></i></span>
Application error.
<span class="small italic">10 mins</span>
</a>
</li>
<li>
See all notifications
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav ">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input class="form-control search fa fa-bell-o" placeholder="Search" type="text">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">
#if(Auth::check())
{{
Auth::User()->first_name . ' ' .
Auth::User()->family
}}</span>
#endif
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><i class=" fa fa-suitcase"></i>Profile</li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-bell-o"></i> Notification</li>
<li><i class="fa fa-key"></i>Logout</li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
I solved this problem
in header and sidebar blade, i used this:
<li><i class="fa fa-key"></i>Logout</li>
</ul>
and changed with this code in below:
<li><i class="fa fa-key"></i>Logout</li>
and create route:
Route::get('logout', 'Auth\LoginController#logout');

Resources