Sage 10 - Composer / Components

[Davide_Prevosto]

Hello everybody,

I am looking for some concrete examples for the best usage of Composer and Components. Do you have any good example to share, please?

Thank you all.

DP

[Jacek]

With composers you can pass function to partials views. Before with Sober Controller you had access only to templates what was limited.

For example, I have a partial filter blog in my file partials / filter-blog.blade.php

To pass data to this partial view I have to prepare in composers file FilterBlog.php with the same class name. Next in protected static method you have to list views as it is commented.

<?php

namespace App\View\Composers;

use Roots\Acorn\View\Composer;

class FilterBLog extends Composer
{
    /**
     * List of views served by this composer.
     *
     * @var array
     */
    protected static $views = [
        'partials.filter-blog',
    ];

    /**
     * Data to be passed to view before rendering.
     *
     * @return array
     */
    public function with()
    {
        return [
            'filter_categories' => $this->filter_categories(),
        ];
    }

    public function filter_categories()
    {
        $args = [
            'orderby' => 'name',
            'order'   => 'ASC',
            'hide_empty' => true,
        ];

        $cats = get_categories( $args );

        return $cats;
    }

}

In my filter-blog.blade.php right now I have access to this data

@php var_dump($filter_categories); @endphp

[SergiArias]

With components, you can create a image component that renders the content if it’s a svg, uses a lorempicsum image as placeholder if you didn’t give a url, or uses the wp_attachment function if you give an url.

It’s basically a black box that abstracts a lot of possibilities in one simple tag.

Also, if you use tailwind, instead of creating a class for a component (eg. a card component), you can abstract it to a blade component so it contains all the tailwind classes but at the same time you understand what it is when you read it.

[Davide_Prevosto]

Thank you @SergiArias, do you have a Components sample code maybe? Over Alert.php already in the repo, I mean. For example, do you have the example about images you have mentioned?

My best

[SergiArias]

Yes, I have this example from an old project. I am not sure it works 100% now as I had to do some dirty code to adapt it to the wordpress attachment function.

In a view:

 <x-img class="ls:hidden" :img="$header_img"/>

The Component class:

<?php

namespace App\View\Components;

use Roots\Acorn\View\Component;

class img extends Component
{
    /**
     * The img.
     *
     * @var string
     */
    public $img;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($img = null)
    {
        $this->img = $img;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return $this->view('components.img');
    }
}

And the component view:

@if (isset($img['id']))
  @php
    $attrsArray = (array) $attributes;
    $attrsArray = reset($attrsArray);
    unset($attrsArray['img']);
  @endphp
  {!! wp_get_attachment_image($img['id'], 'full', null, $attrsArray) !!}
@elseif(isset($img['url']))
  <img {{ $attributes }} src="{!! $img['url'] !!}" alt="dummy image">
@else
  <img {{ $attributes }} src="https://loremflickr.com/1200/628/art" alt="dummy image">
@endif