Using @push within component to parent view containing @stack

I have a base view product.blade.php generated from a controller. I'm displaying product attributes based on tabs. I'm trying to generate the <li> from the component via @push with the ultimate goal of adding many tabs in the future. However, nothing comes from the @stack method?

product.blade.php:

...


<div class="tablist-container">
    <ul role="tablist">
        @stack('product-tabs')
    </ul>
    <x-store.products.product-details :product="$product" />
</div>

product-details.blade.php (component)

@push('product-tabs')
    <li role="tab" tabindex="0" aria-selected="true" aria-controls="tab--product-details">
        Product Details
    </li>
@endpush

<div id="tab--product-details" role="tabpanel" aria-expanded="true">
    <div
        class="tabpanel--header"
        role="tab"
        tabindex="0"
        aria-selected="true"
        aria-controls="tab--product-details"
    >
        Product details
    </div>
    <div class="tabpanel--content">
        {!! $product->description !!}

        <x-recommended-use :product="$product"/>
    </div>
</div>

Result: Issue

If I move the component above my @stack it works but I need to have the @push after the @stack:

Works:

<x-store.products.product-details :product="$product" />
<ul role="tablist">
    @stack('product-tabs')
</ul>

MarianoMoreyra

5 years ago

Level 25

Hi @grayloon

I don't think stacks are the right choice for what you are trying to achieve.

Maybe you should move the <ul></ul> section inside the component, and instead of a single product, you could pass a collection to the product-details component.

That way, you can just have 2 loops inside your component rendering the ul's on one side, and the tab panels on the other:

product.blade.php:

<x-store.products.product-details :product="$products" />

product-details.blade.php (component):

<div class="tablist-container">
    <ul role="tablist">
    @foreach($products as $product)
        <li role="tab" tabindex="0" aria-selected="true" aria-controls="tab--product-details">
            Product Details
        </li>
    @endforeach
    </ul>

    @foreach($products as $product)
        <div id="tab--product-details" role="tabpanel" aria-expanded="true">
            <div
                class="tabpanel--header"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="tab--product-details"
            >
                Product details
            </div>
            <div class="tabpanel--content">
                {!! $product->description !!}

                <x-recommended-use :product="$product"/>
            </div>
        </div>
    @endforeach
</div>

Or something like that...

Hope this helps!

Please or to participate in this conversation.