I have simple breadcrumbs on my page
<ul class="breadcrumb">
<li>
<i class="glyphicon glyphicon-home"></i>
Home
</li>
<?php $link = URL::to('/'); ?>
#for($i = 1; $i <= count(Request::segments()); $i++)
<li>
#if($i < count(Request::segments()) & $i > 0)
<?php $link .= "/" . Request::segment($i); ?>
{{Request::segment($i)}}
#else {{Request::segment($i)}}
#endif
</li>
#endfor
</ul>
This produce breadcrumbs like Home / Page / etc
The problem here is that I have views in my router is like this
Route::get('/users/profile', ['uses' => 'UsersController#viewProfile', 'before' => 'auth|csrf']);
Route::get ('/admin/pages/edit/{pageId}', ['uses' => 'AdminController#pageEdit', 'before' => 'admin']);
So for both routes breadcrumbs will be
Home / Users / Profile
Home / Admin / Pages / Edit / 1
Here middle path in breadcrumb is not existing in this case / Users / and / Edit / .. There are a lot pages like this. Is there a way to avoid this?
Edit:
I know I just can change routes in my router but I don't want. So need some other way to achieve this..
You can use this, and then add a condition (line 24) that:
#if ($title != 'Users' && $title != 'Edit')
<span>{{ $title }}</span>
#endif
Alternatively, if you have lots of these values that you would like to avoid, then you can write an array and check them with the same approach.
Related
I am working on a blogging application in Laravel 8.
The ArticlesController controller I have this method to display the paginated articles:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use App\Models\ArticleCategory;
use App\Models\Article;
use App\Models\Comment;
class ArticlesController extends FrontendController {
// Articles per page
protected $per_page = 12;
public function index(Request $request) {
// Search query
$qry = $request->input('search');
$articlesQuery = Article::where('title', 'like', '%' . $qry . '%')
->orWhere('short_description', 'like', '%' . $qry . '%')
->orWhere('content', 'like', '%' . $qry . '%');
// Search results count
if ($qry) {
$article_count = $articlesQuery->count();
}
$articles = $articlesQuery->orderBy('id', 'desc')->paginate($this->per_page);
$featured_articles = Article::where('featured', 1)->orderBy('id', 'desc')->get();
return view('themes/' . $this->theme_directory . '/templates/index',
array_merge($this->data, [
'search_query' => $qry,
'articles' => $articles,
'featured_articles' => $featured_articles,
'article_count' => $article_count ?? null
])
);
}
}
The pagination, in the plain HTML template, looks like this:
<nav class="pgn">
<ul>
<li>
<a class="pgn__prev" href="#0">Prev</a>
</li>
<li><a class="pgn__num" href="#0">1</a></li>
<li><span class="pgn__num current">2</span></li>
<li><a class="pgn__num" href="#0">3</a></li>
<li><span class="pgn__num dots">…</span></li>
<li><a class="pgn__num" href="#0">4</a></li>
<li>
<a class="pgn__next" href="#0">Next</a>
</li>
</ul>
</nav>
The goal
The goal is to keep the pagination structure above, in Laravel's Blade.
The problem
The code below works for the "Next" and "Prev" buttons, but not the links in between.
<nav class="pgn">
<ul>
<li>
<a class="pgn__prev" href="{{ $articles->withQueryString()->previousPageUrl() }}">Prev</a>
</li>
{!! $articles->withQueryString()->links() !!}
<li>
<a class="pgn__next" href="{{ $articles->withQueryString()->nextPageUrl() }}">Next</a>
</li>
</ul>
</nav>
Questions
What causes this bug?
What is the easiest fix?
To create a custom pagination, I'd recommend to make use of a custom "view".
Basically, what would you have to do (which you have already done), is define a limit, and then basically do the following:
you create your view file (which will be the custom paginator) - name it however you want to name it. I'll name it custom.blade.php
This view has to be created after running the command: php artisan vendor:publish --tag=laravel-pagination
here you can find a bit more in the documentation about it: https://laravel.com/docs/9.x/pagination#customizing-the-pagination-view
#if ($paginator->onFirstPage())
<li class="disabled"><span>← Previous</span></li>
#else
<li>
<a class="pgn__prev" href="{{ $articles->withQueryString()->previousPageUrl() }}">Prev</a>
</li>
#endif
#foreach ($elements as $element)
#if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
#endif
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="active my-active"><span>{{ $page }}</span></li>
#else
<li>{{ $page }}</li>
#endif
#endforeach
#endif
#endforeach
#if ($paginator->hasMorePages())
<li>
<a class="pgn__next" href="{{ $articles->withQueryString()->nextPageUrl() }}">Next</a>
</li>
#else
<li class="disabled"><span>Next</span></li>
#endif
And finally, on the view where you want to make use of the custom pagination:
{{ $articles->links(‘path.pagination.custom') }}
(just make sure to have the correct path)
edit: It's a bit hard for me to give a definitive answer without looking at the project itself, but I hope this at least helps somehow.
Here I want to make one submenu active out of four submenu. This is for dynamic slug .
<div class="solution_tabs">
#foreach($allMenu as $menu)
<ul class="submenu">
#if(isset($menu->submenus))
#foreach($menu->submenus as $submenu)
#if(isset($submenu->page->slug))
<li class="active">{{ $submenu->name}}</li>
#else
<li>{{ $submenu->name}}</li>
#endif
#endforeach
#endif
</ul>
#endforeach
</div>
same as this image,i want one active submenu from dynamic submeun of the menu
You should compare the current URL with your link URLs in order to detect coincidences. One way to accomplish it could be injecting request in your blade file, using
#inject('request', 'Illuminate\Http\Request')
and then check for matches like this:
<li class="{{ $request->segment(1) == $submenu->page->slug ? 'active' : '' }}">{{ $submenu->name}}</li>
Please note that segment() is 0 based, so segment(1) works when your url is like example.com/segment(0)/page->slug
Im currently using Laravel 5.3 and was wondering if there is a option for the customization of the Three Dots deperator. (skips page 9-10, which is to late)
Example
Currently the Three dots initiate if there are more than 11 pages... Which isnt quiet useful if your site is responsive. if there are to many pages so it breaks into 2 lines.
Example2
I cannot find anything regarding there being options for $resource->links(). But if there is please tell me! Much appreciated.
Edit: it has to do with the following function:
vendor/laravel/framework/src/Illuminate/Pagination/LengthAwarePaginator.php (page: 128, render()). The current function does not support a second variable. So i guess i have to rebuild it?
This is a solution for Laravel 5.5+. Here is what it does:
Shows the first and the last page.
Shows previous and next two pages from the current page.
Three dots only appear on the left after the current page is greater than 4.
Three dots only appear on the right after the current page is less than the 4 - (count of pages).
<!-- Pagination Elements -->
#foreach ($elements as $element)
<!-- Array Of Links -->
#foreach ($element as $page => $url)
<!-- Use three dots when current page is greater than 4. -->
#if ($paginator->currentPage() > 4 && $page === 2)
<li class="page-item disabled"><span class="page-link">...</span></li>
#endif
<!-- Show active page else show the first and last two pages from current page. -->
#if ($page == $paginator->currentPage())
<li class="page-item active"><span class="page-link">{{ $page }}</span></li>
#elseif ($page === $paginator->currentPage() + 1 || $page === $paginator->currentPage() + 2 || $page === $paginator->currentPage() - 1 || $page === $paginator->currentPage() - 2 || $page === $paginator->lastPage() || $page === 1)
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
#endif
<!-- Use three dots when current page is away from end. -->
#if ($paginator->currentPage() < $paginator->lastPage() - 3 && $page === $paginator->lastPage() - 1)
<li class="page-item disabled"><span class="page-link">...</span></li>
#endif
#endforeach
#endforeach
Output:
Page 1 (first page)
Page 3
Page 10 (last page)
Option 1 :
You can customize default files but don't change vendor files directly. Publish them and then add modifications to that.
php artisan vendor:publish --tag=laravel-pagination
This command will automatically create the folder /resources/views/vendor/pagination and you have your files for modification.
You can get more information here : laravel pagination
Option 2:
Maybe you want to get rid of the files that are generated by default. Or, perhaps you want to assign another file to be responsible for your default pagination view.
All of this is possible, but you will need to inform the AppServiceProvider for this action by calling the new pagination views in the boot() method:
use Illuminate\Pagination\Paginator;
public function boot(){
Paginator::defaultView('your-pagination-view-file-name');
Paginator::defaultSimpleView('your-pagination-view-file-name');
}
Get information for defaultView and defaultSimpleView here :laravel pagination
I have created new file for pagination and added in AppServiceProvider.
#if ($paginator->hasPages())
<ul class="blog-pagenation">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="disabled"><a>«</a></li>
#else
<li>«</li>
#endif
#if($paginator->currentPage() > 3)
<li class="hidden-xs">1</li>
#endif
#if($paginator->currentPage() > 4)
<li><a>...</a></li>
#endif
#foreach(range(1, $paginator->lastPage()) as $i)
#if($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
#if ($i == $paginator->currentPage())
<li class="active"><a class="active">{{ $i }}</a></li>
#else
<li>{{ $i }}</li>
#endif
#endif
#endforeach
#if($paginator->currentPage() < $paginator->lastPage() - 3)
<li><a>...</a></li>
#endif
#if($paginator->currentPage() < $paginator->lastPage() - 2)
<li class="hidden-xs">{{ $paginator->lastPage() }}</li>
#endif
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li>»</li>
#else
<li class="disabled"><a>»</a></li>
#endif
</ul>
#endif
By using this i am able to get 3 dots in starting and ending you have to customize classes based on your themes.
Adding to the previous response, once you generate the vendor view files with the artisan command php artisan vendor:publish you can create a new one in that folder and call it for example custom.blade.php and put the following code:
#if ($paginator->hasPages())
<ul class="custom-pagination">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="disabled pageNumber"><span>« Prev</span></li>
#else
<li><a class="pageNumber" href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page === $paginator->currentPage())
<li class="active pageNumber"><span>{{ $page }}</span></li>
#elseif (($page === $paginator->currentPage() + 1 || $page === $paginator->currentPage() + 2)
|| $page === $paginator->lastPage())
<li><a class="pageNumber" href="{{ $url }}">{{ $page }}</a></li>
#elseif ($page === $paginator->lastPage()-1)
<li class="disabled"><span>...</span></li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li><a class="pageNumber" href="{{ $paginator->nextPageUrl() }}" rel="next">Next »</a></li>
#else
<li class="disabled pageNumber"><span>Next »</span></li>
#endif
</ul>#endif
The important part of the code for the three dots is in the {{-- Array Of Links --}} portion. I think this more or less does what you need but may require additional tweaking.
then you can use it in your view like this:
<div class="pagination">
#if ($users instanceof \Illuminate\Pagination\LengthAwarePaginator)
{{ $users->links('vendor.pagination.custom') }}
#endif
</div>
I have issue with grouping breadcrumbs. Following is my code:
Breadcrumbs::register('front', function($breadcrumbs) {
$breadcrumbs->push('Home', URL::to('/'));
});
Breadcrumbs::group(['prefix' => 'front', 'parent' => 'front'], function($breadcrumbs)
{
Breadcrumbs::register('product', function($breadcrumbs) {
$breadcrumbs->push(trans('front.product'), route('product'));
});
});
And following error occurs:
FatalErrorException in
/project/vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php
line 219: Call to undefined method
DaveJamesMiller\Breadcrumbs\Manager::group()
I am trying to use breadcrumb as per following example, but no luck:
https://github.com/davejamesmiller/laravel-breadcrumbs/issues/84
Fast Breadcrumbs, don't forget create layout for optimize code.
#include('page.breadcrumbs')
<nav class="breadcrumb" style="font-size: 18px;">
<?php $breadcrumb = ''?>
#for($i = 0; $i <= count(Request::segments()); $i++)
<?php $breadcrumb .= Request::segment($i).'/'; ?>
#if($i == 1)
<a class="breadcrumb-item" href="{{url($breadcrumb).'/inicio'}}">{{Request::segment($i).' / '}}</a>
#elseif($i == count(Request::segments()))
<a class="breadcrumb-item active" href="{{url($breadcrumb)}}">{{Request::segment($i)}}</a>
#else
<a class="breadcrumb-item" href="{{url($breadcrumb)}}">{{Request::segment($i).' / '}}</a>
#endif
#endfor
</nav>
I am using this tutorial for creating a custom pagination in Laravel 4.2.
I am getting this code-
<ul class="pagination">
<li class="disabled">
<span>«</span>
</li>
<li class="active">
<span>1</span>
</li>
<li>
2
</li>
<li>
»
</li>
</ul>
for pagination buttons.
But I need to add some AJAX and some JS call with ID's.
So, I want this kind of code for this buttons-
<ul class="pagination">
<li class="disabled" id="prev">
<span>«</span>
</li>
<li class="active" id="page[1]">
<span>1</span>
</li>
<li id="page[2]">
2
</li>
<li id="next">
<span>»</span>
</li>
</ul>
Is it possible?
Please help me.
Thanks in advance for helping.
i will give a simpler approach....
put this in anywhere in views folder. let's say you put it (and named it) as partials/pagination.blade.php
put the following code in pagination.blade.php (modify it to match your view)
#if ($paginator->getLastPage() > 1)
<ul class="pagination">
<li>Previous</li>
#for ($i = 1; $i <= $paginator->getLastPage(); $i++)
<li>{{ $i }}</li>
#endfor
<li>Next</li>
</ul>
#endif
Note: above code is a sample. change the layout to suit your need.
i prefer a tags while writing links.
while calling the paginator, use the following,
{{$paginator->links('partials.pagination')}}
No need to go through all those complicated process.
but more of a chance is, whatever you are trying to do, can be done purely with javascript.
You can extend the lluminate\Pagination\Presenter class and implement its abstract methods. For example (Put it in app/extension folder):
class CustomPresenter extends Illuminate\Pagination\Presenter {
public function getActivePageWrapper($text)
{
$url = $this->paginator->getUrl($this->paginator->getCurrentPage());
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);
return '<li id="page['.$params['page'].']" class="active">'.$text.'</li>';
}
public function getDisabledTextWrapper($text)
{
return '<li class="disabled">'.$text.'</li>';
}
public function getPageLinkWrapper($url, $page, $rel = null)
{
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);
$id = $params['page'];
return '<li id="page['.$id.']">'.$page.'</li>';
}
}
Add an entry in composer > autoload > classmap section like this:
//...
"app/tests/TestCase.php",
"app/extensions"
To use the Custom Presenter:
At first, create a view (custom-presenter.php) in app/views directory. Then, replace pagination option in the app/config/view.php configuration file with the new view's name, like this:
'pagination' => 'custom-presenter'
Finally, the following code would be placed in your custom presenter view:
<ul class="pagination">
<?php echo with(new CustomPresenter($paginator))->render(); ?>
</ul>
For prev and next use this JavaScript (I've used jQuery) and include this in you template:
<script>
$(function(){
$('ul.my-custom-pagination>li:first').attr('id', 'prev')
$('ul.my-custom-pagination>li:last').attr('id', 'next')
});
</script>
Above JS code will set the id=prev and id=next, otherwise there will be duplicate ids for first two lis and last two lis. At last, run composer dump from terminal. This an output of this implementation:
<ul class="pagination my-custom-pagination">
<li id="prev">«</li>
<li id="page[1]">1</li>
<li id="page[2]">2</li>
<li id="page[3]" class="active">
3</li><li class="disabled" id="next">»
</li>
</ul>
Read more on the manual.