In a project i have a livewire V3 full page component with a paginated list in it. The component is embedded in a layout file. In the layout file i want to update the canonical tags (Current Previous Next) on page change. The problem is that livewire pagination does not do a full page refresh, so the properties in te head section are not updated when jumping to another page.

How can i force updating the props in the layout file when jumping to another page? Here is some example code:

The component (php part) BlogSectionList.php

public function render()
{   
    $blogSections = BlogSection::where('active', true)->paginate(10);

$seoSettings = [
        'current' => $blogSections->url($blogSections->currentPage()),
        'prev' => $blogSections->previousPageUrl(),
        'next' => $blogSections->nextPageUrl(),
        "canonical" => "https://casas-kimpencio.com/website/blog",
        "metaDescrNl" => $blogSectionsParam->meta_descr_nl,
        "metaTitleNl" => $blogSectionsParam->meta_title_nl,
        "pageCreate" => $blogSectionsParam->created_at,
        "pageUpdate" => $blogSectionsParam->updated_at,
        "imageUrl" => env('APP_URL') . '/' . $homePageParam->about_us_image, 
        "imageExt" => $homePageParam->about_us_image_extension,
    ];
    
    $this->links = [
        'current' => $blogSections->url($blogSections->currentPage()),
        'prev' => $blogSections->previousPageUrl(),
        'next' => $blogSections->nextPageUrl(),
    ];

    return view('livewire.front.blogs.blog-section-list', compact('blogSections'))->layoutData($seoSettings);

Code for blog-section-list.blade.php

<div id="blog-section-list">
@push('head') 
    {{$links['current']}}
    {{$links['prev']}}
    {{$links['next']}}  
@endpush
<section id="content" class="content">
        <div class="container mb-4 mt-4">
            <div class="heading_container">
                <h1 class="h1-blue">
                    {{$seoSettings['current']}}
                    {{$seoSettings['prev']}}
                    {{$seoSettings['next']}}  
                </h1>
                <h2>
                        {{$links['current']}}
                        {{$links['prev']}}
                        {{$links['next']}}  
                </h2>
            </div>
        </div>

It seems that $links is updated on every page change in the BODY section but NOT in the HEAD section. how can i fix this?

0

There are 0 best solutions below