include sub-view in master page and clear my data after login - laravel
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');
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>
Isotope filter is not working in Vue Laravel
First of all I'm new in Vue. I'm trying to use Isotope in Vue component in Laravel.
The code is working fine in HTML. Here are the working codes
main.js
if ($('.grid').length) {
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
_project.blade.php
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="row grid">
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item trending">
<div class="maan-project-item">
<div class="project-img">
<a href="{{ route('product','the-slug') }}"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title">Sala - Startup & SaaS WordPress</h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item html">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item code">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item ui">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item wordpress">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Above codes are working.
Now I'm trying to do this with VueJS.
First, I've install isotope from their official site with npm
npm install isotope-layout
Then I've create this vue component file
project.vue
<template>
<!-- Project Area -->
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" class="is-checked" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="project-grid">
<div class="project-grid-item mix trending" v-for="project in projects">
<div class="maan-project-item">
<div class="project-img">
<img src="assets/front/images/project/project.png" alt="Image">
<span class="project-category">{{ project.category.name }}</span>
</div>
<div class="maan-content">
<h3 class="maan-title">{{ project.name }}</h3>
<div class="author">
<img src="assets/front/images/author/author.png" alt="">
<div>by <span class="font-medium">Maan Theme</span> in {{ project.category.name }}</div>
</div>
<div class="project-price">
<div class="sales">Sales : <span>{{ project.total_sale }}</span></div>
<div class="price">Price : <span>${{ project.regular_price }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project Area -->
</template>
<script>
import Isotope from "isotope-layout"
export default {
components: {
Isotope,
},
data: function(){
return {
projects : [],
}
},
mounted() {
this.loadProjects();
this.filterProjects();
},
methods: {
loadProjects : function(){ //this function is working, projects are loading from database
axios.get('api/projects')
.then((response)=>{
this.projects = response.data.projects
})
.catch(function(error){
console.log(error)
});
},
filterProjects : function(){
const $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
}
}
</script>
I've an error in console
Uncaught TypeError: $(...).isotope is not a function
I don't know my question is well structured or not. Ask my if you need any additional information.
Carousel doesn't work bootstrap 5. Someone can help me?
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>
Is it possible for me to expand the grid of the main content area?
I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
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.