CODEWITHSUNDEEP
phplaravelframeworks
Lex
Lex

Reputation: 321

Laravel 8.0 Blade nested @extends @section and @yield not working

I have this template.blade.php with a path of views/templates/template.blade.php with the following code:

// template.blade.php


// some codes here

@include("templates.navigation.navigation")
@yield('header')
@yield('content')
@include('templates.footer.footer')

// some other codes here

Now, in my route, the home.blade.php (accessible at views/home/home.blade.php) was set as the landing page. The homepage needs to borrow a section of code (code for the floating buttons. Each floating button differs depending on the current page). Here's the code for the homepage:

// home.blade.php


@extends('templates.template')
@section('header')
    // some codes here
@endsection

@section('content')
    // some other codes here
    @yield('float-button-module-menu') // the code that needs to be accessed but doesn't work
@endsection

The @yield('float-button-module-menu') would be accessed at views/templates/float-buttons/float-buttons.blade.php. Here's the code for the said webpage:

// float-buttons.blade.php


@extends('home.home') // I suspect that I was wrong at declaring the name for the @extends here
@section('float-button-module-menu')
    // some codes inside the section that needs to be displayed
@endsection

To simplify the question, I need to access the @section('float-button-module-menu') from float-buttons.blade.php inside home.blade.php. I do not know the problem within the logic of this.

EDIT here's the full code for the sections inside float-button.blade.php:

// float-button.blade.php


@extends('home.home')
@section('float-button-module-menu')
<div class="d-flex flex-column position-fixed button button-float-position-buttom-left">
    <div class="button-float d-flex">
        <span class="fas fa-user-cog text-lg text-white align-self-center mx-auto"></span>
    </div>
</div>
@endsection

@section('float-button-anchor')
<div class="button-float d-flex">
    <span class="fas fa-arrow-up text-lg text-white align-self-center mx-auto"></span>
</div>
@endsection

@section('float-button-help')
<div class="button-float d-flex">
    <span class="fas fa-question text-lg text-white align-self-center mx-auto"></span>
</div>
@endsection

// list of buttons would be updated.

Upvotes: 1

Views: 3211

Answers (1)

user8034901
user8034901

Reputation:

Extending views is for when you call/view a blade file directly, for example via return view('templates.float-buttons.float-buttons'). Sounds like this is not what you are looking for. You'd want to @include the file in your home.blade.php. Make the following changes:

home.blade.php:

@extends('templates.template')
@section('header')
    // some codes here
@endsection

@section('content')
    // some other codes here
    @include('templates.float-buttons.float-buttons')
@endsection

float-buttons.blade.php:

<div>
  My Float Buttons Code
</div>

float-buttons.blade.php will just contain the code for your float buttons

Second part

You can pass parameters to @include when including subviews. See if these changes suit your needs:

home.blade.php

@extends('templates.template')
@section('header')
    // some codes here
@endsection

@section('content')
    // some other codes here
    @include('templates.float-buttons.float-buttons', ['type' => 'anchor'])
@endsection

float-buttons.blade.php:

@if ($type == 'anchor')
<div class="button-float d-flex">
    <span class="fas fa-arrow-up text-lg text-white align-self-center mx-auto"></span>
</div>

@elseif ($type == 'help')
<div class="button-float d-flex">
    <span class="fas fa-question text-lg text-white align-self-center mx-auto"></span>
</div>

@else
{{-- if no type parameter is given --}}
<p>
  Parameter 'type' is required
</p>
@endif

You can then basically use @include('templates.float-buttons.float-buttons', ['type' => 'anchor']) or @include('templates.float-buttons.float-buttons', ['type' => 'help']) wherever you need it. And of course feel free to expand the list

Note: A more elegant solution imho would be to create single blade files for each of your cases ('float-buttons-anchor.blade.php, float-buttons-help.blade.php...) and then include the file you need:@include('templates.float-buttons.float-buttons-help')

Upvotes: 4

Related Questions