why I can't setlocale from file web.php routes, this's code:
Route::get('language/{lang}', function ($lang) {
App()->setLocale($lang);
session()->put('locale', $lang);
return redirect()->back();
})->name('langroute');
and this one is menu select:
<li class="nav-item btn-rotate dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLang" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img width="25" src="{{ asset('assets_front/images/'.App::getLocale().'.png') }}" class="img-responsive img-bandera" alt="#lang('idioma') #lang('navigation.languages-'. App::getLocale())">
<p>
<span class="d-lg-none d-md-block">{{ trans_choice('words.idioma', 1) }}</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLang">
#foreach (Config::get('app.languages') as $language)
#if ($language != App::getLocale())
<a class="dropdown-item" href="{{ route('langroute', $language) }}">
<img width="25" src="{{ asset('assets_front/images/'.$language.'.png') }}" class="img-responsive img-bandera" alt="#lang('idioma') #lang('navigation.languages-'. App::getLocale())">
#lang('navigation.languages-'. $language)
</a>
#endif
#endforeach
</div>
</li>
what I'm wrong?
Related
Why there is so much problems with this pagination from livewire? i have been see many topics of this.. and srsly i don't get it.. what wrong im doing? https://i.imgur.com/PENGFjf.gifv <- problem
if i go manualy and i write "?page=2" in url adress it is working, but i don't have any actions inside, clicking in pagination buttons
| "laravel/framework": "^8.54",
| "laravel/jetstream": "^2.3",
| "laravel/sanctum": "^2.6",
| "laravel/tinker": "^2.5",
| "livewire/livewire": "^2.5"
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
return view('livewire.shop-component', ['products' => Product::paginate(9)])->layout('layouts.base');
}
public function paginationView()
{
return 'livewire.custom-pagination';
}
}
Custom pagination is copy from vendor - bootstrap pagination
<div>
#if ($paginator->hasPages())
<nav class="pagination justify-content-center">
<ul class="pagination mt-30 mb-30">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.previous')">
<span class="page-link" aria-hidden="true">‹</span>
</li>
#else
<li class="page-item">
<button type="button" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="#lang('pagination.previous')">‹</button>
</li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
#if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
#endif
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="page-item active" wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
#else
<li class="page-item" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="#lang('pagination.next')">›</button>
</li>
#else
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.next')">
<span class="page-link" aria-hidden="true">›</span>
</li>
#endif
</ul>
</nav>
#endif
</div>
shop-component
https://i.imgur.com/bob483q.png
<div>
#foreach ($products as $product)
<div class="col-sm-6 col-lg-4 mb-30">
<div class="card product-card">
<div class="card-body">
<div class="product-thumbnail position-relative">
<span class="badge badge-danger top-right">New</span>
<a href="single-product.html">
<img class="first-img" src="{{ asset('assets/img/product/1.png') }}" alt="thumbnail" />
</a>
<!-- product links -->
<ul class="actions d-flex justify-content-center">
<li>
<a class="action" href="wishlist.html">
<span data-toggle="tooltip" data-placement="bottom" title="add to wishlist" class="icon-heart">
</span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#compare">
<span data-toggle="tooltip" data-placement="bottom" title="Add to compare" class="icon-shuffle"></span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#quick-view" >
<span data-toggle="tooltip" data-placement="bottom" title="Quick view" class="icon-magnifier"></span>
</a>
</li>
</ul>
</div>
<div class="product-desc py-0 px-0">
<h3 class="title">
{{ $product->name }}
</h3>
<div class="star-rating">
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star de-selected"></span>
</div>
<div class="d-flex align-items-center justify-content-between" >
<span class="product-price">{{ $product->regular_price }}</span>
<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" >
<i class="icon-basket"></i>
</button>
</div>
</div>
</div>
</div>
</div>
#endforeach
{{-- Paginacja produktów --}}
{{ $products->links() }}
</div>
php artisan livewire:publish --config
php artisan livewire:publish --assets
second , make sure to add this lines in the main template.
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>
MY SLIDER OF CATEGORY TEST IS DISPLAYED THIS WAY IN THE PICTURE i.e images appear below each other
enter image description here...I have tried change the category test with another category but i could not fix it.. i guess the issue mighty be how to display the active image slide first then the rest come after-wards
My view blade is
#foreach ($data['testSlider'] as $slide )
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class=""></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
#endforeach
MY SLIDER CONTROLLER HAS
use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;
public function test()
{
$data['slider'] = Slider::all();
$data['slidercategory'] = SliderCategory::all();
$data['testSlider'] = Slider::with([
'SliderCategory' => function ($attachmentQuery) {
$attachmentQuery->where('title', 'test Slider');
}
])->get();
return view('testboot', compact('data'));
}
Your images are repeating because you are making an entire carousel for each image instead of adding the images to the first carousel.
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
#foreach ($data['testSlider'] as $slide )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
#endforeach
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
#foreach ($data['testSlider'] as $slide )
<li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
#endforeach
</ol>
</div>
I'm trying to add this bootstrap nav menu to my Laravel application, but in smaller screensize when I click on the hamburger icon it won't open.
I checked similar questions here and tried the solutions but none of them worked for me.
I also checked, bootsrap css and js are properly included in the document, in my footer first comes jquery, then popper then bootstrap.js.
Here is my header code:
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}"><img src="{{ asset('public/assets/frontend/images/logo.png') }}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('frontend.courses') }}">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('contact') }}">Contact</a></li>
#guest
<li class="nav-item"><a class="btn btn-red" href="{{ route('login') }}">Sign In</a></li>
#else
#if(Auth::user())
<li class="nav-item logged-in">
<div class="dropdown">
<a href="" class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg" aria-hidden="true"></i> My Dashboard
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#if(Auth::user()->role_id == 1)
<a class="dropdown-item" href="{{ url('admin') }}">Admin</a>
#endif
<a class="dropdown-item" href="#">My Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Log out</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</div>
</li>
#endif
#endguest
</ul>
</div>
</div>
</nav>
</header>
I also have these error messages in the console:
Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test ()
at HTMLDivElement. (collapse.js:346)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at S.fn.init.a._jQueryInterface [as collapse] (collapse.js:337)
at HTMLDivElement. (collapse.js:385)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at HTMLButtonElement. (collapse.js:381)
at HTMLDocument.dispatch (jquery-3.5.0.min.js:2)
I got it.
Thanks to this answer: https://stackoverflow.com/a/61198996/7133015
This is an incompatibility between bootstrap and kquery (3.5.0). needed to switch back to jquery 3.4.1
I have a dynamic menu and sub menu in my website and want to make not clickable menu to only those menu that have sub menu.
here is code
#foreach($levels as $category)
<li class="text-black-50">
<a href="/category/{{ $category->slug }}" title="">
{{ $category->name }}
</a>
</li>
#if($category->children->count() > 0 )
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
#foreach($category->children as $child)
<li>
{{ $child->name }}
</li>
#endforeach
</ul>
</li>
#else
#endif
#endforeach
I quick solution over your code is don't use href att when the menu has a submenu. Using your code:
#foreach($levels as $category)
<li class="text-black-50">
#if($category->children->count() > 0 )
<a href="/category/{{ $category->slug }}" title="">
{{ $category->name }}
</a>
#else
<a style="pointer-events: none; cursor: default;">
{{ $category->name }}
</a>
#endif
</li>
#if($category->children->count() > 0 )
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
#foreach($category->children as $child)
<li>
{{ $child->name }}
</li>
#endforeach
</ul>
</li>
#else
#endif
#endforeach
I hope It's helps!
Im using the laravel auth. When a guest user access to the app we should see the links:
Item 1, Item 2, Login and Item 3
When he login, for example with the name John, he should see the links:
Item 1, Item 2, John, Item 3
But its not working, when the user logins just appears the links:
John, Item 3
The Item1 and Item2 dont appears. Do you know why?
<ul class="navbar-nav">
#guest
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endguest
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
#guest is used for non-login user.
You should change it to
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#endguest
#if(\Auth::check())
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endif
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
Everything between #guest and #else will only appear if the user is not logged in.
Putting Item 1 and Item 2 right after the #guest directive means, you want Item 1 and Item 2 to appear if the user it is not logged in
Change you code to
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endauth
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
You can read more about those directives here
Change it to:
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#endguest
#auth
<li class="nav-item dropdown">
....
</li>
#endauth
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>