[Sage 10] How to use and create a component - Like, for example /app/View/Components/Alert.php

Hey all,

I was tinkering with making a custom component for product images. This should process some arguments. If I look at the file /app/View/Components/Alert.php I get the feeling that this is something I could use as a boilerplate.

From what I understand you can call it and pass 2 arguments, $type and message, then it grabs the view from components.alert and renders it.

The thing is that I don’t know how to call this Alert component and pass arguments from, for example, /resources/views./page.blade.php.

How would I accomplish this?

It’s always like this. You’re stuck for over a day, post a question and find the answer… <x-alert />
But then I copy the Alert.php files and rename the class to ProductImage And it does not render with <x-productimage /> I did a composer dump-autoload but no go.

The Blade documentation is a good place to start: https://laravel.com/docs/7.x/blade#components

I think the Acorn WP-CLI command also has a command to help you create components. If you run wp acorn it’ll list the available commands.

@alwaysblank. Thanks Ben, that gave all the missing info I needed.

One thing though. Even though I got it working a Sage 10 project folder is not able to call php artisan make:component Alert It has no artisan.

Acorn has wp acorn make:component myName It prints Component created successfully. But there is no trace of this newly created component. Not in the app/ and the resources/views/ folder. Not even id I search project wide for this name in camelCasing or kebab-casing. So where would it live.

If I re-run the command it says it already exists. Plus is there documentation on Acorn? It might give me hints on how to work with components. But I don’t see documentation on it.

Lately. I managed to create it manually by cloning the /app/View/Components/Alert.php Rename the file, class and view render in the return. Then create a custom view component in the /resources/views/components

Running wp acorn make:component TestComponent results in creating two files:

  • app/View/Components/TestComponent.php
  • resources/views/components/test-component.blade.php

I did the above on a Sage 10 site I’m working on, and got the above result.

If you’re trying to find files that have been created by an automated process, a good way to do that is to run git status: So long as you’ve been keeping up with your commits, it will clearly show the files that have just been added.

3 Likes

Son of a gun… I stand corrected. You are right, I’m sorry. I had two terminals open one for the parent theme and one for the child theme. Looks like I was working in the other terminal than expected. I found the files, yes. Thanks Ben, this makes it all a lot easier :slight_smile:

1 Like

I can’t seem to get this working. Get this error:

Problem 1
- Root composer.json requires roots/acorn ^1.1 → satisfiable by roots/acorn[v1.1.0].
- roots/acorn v1.1.0 requires illuminate/cache ^7.0 → found illuminate/cache[v7.0.0, …, 7.x-dev] but the package is fixed to v8.27.0 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

Tim, do you want to collaborate on a system together perhaps? We can share ideas and such, I’m also using TailwindCSS. Perhaps via discord if you want?

Wait really? Wow. We need Acorn docs so badly :wink:

I came to the conclusion acorn has troubles with multiple Sage themes in the wp themes folder. This is the main reason I didn’t got it to work. It saw two sage themes and asked me about 8 times which theme I wanted to install the component in. Selecting each time the right theme still did not help. It installed one of two files in the one theme and one file in the other theme. Another time it just kept installing it in the wrong theme. This is why it did not show up in my git status.

I’m sorry @AurelianSpodarec I don’t think I’ll be the right person for a collab :slight_smile: I’m not very experienced. Plus for me the components in sage 10 just worked (after the frustration mentioned above). If you don’t get acorn to work you can still manually place the files in those directories without acorn. Take a look at the preinstalled Alert components and copy/paste it to make your own.

I’m not that experienced either, but we all have different ideas that can make the workflow better :slight_smile:

Yeah, I did that, ended up creating this for my button, if you’re curious:

<?php

namespace App\View\Components;

use Roots\Acorn\View\Component;

class Button extends Component
{

    // TODO: Add error handling

    public $buttonVariant;
    public $buttonKind;
    public $buttonRadius;
    public $buttonSize;

    public $message;


    public $variant = [
        'primary'   => 'button-primary',
        'secondary' => 'button-secondary',
        'teritary'  => 'button-teritary',
        'success'   => 'button-success',
        'warning'   => 'button-warning',
        'danger'    => 'button-danger',
        'info'      => 'button-info',
        'white'     => 'button-white',
    ];

    public $kind = [
        'solid'   => 'button-solid',
        'outline' => 'button-outline',
        'clear'   => 'button-clear',
    ];

    public $radius = [
        'none'   => 'button-radius-none',
        'small'  => 'button-radius-small',
        'medium' => 'button-radius-black',
        'large'  => 'button-radius-black',
        'full'   => 'button-radius-full',
    ];

    public $size = [
        'sm'     => 'button-sm',
        'medium' => 'button-medium',
        'large'  => 'button-large',
    ];


    public function __construct($variant = 'primary', $kind = 'solid', $radius = 'none', $size = 'medium', $message = null)
    {
        $this->buttonVariant = $this->variant[$variant] ?? $this->variant['default'];
        $this->buttonKind = $this->kind[$kind] ?? $this->kind['default'];
        $this->buttonRadius = $this->radius[$radius] ?? $this->radius['medium'];
        $this->buttonSize = $this->size[$size] ?? $this->size['medium'];

        $this->message = $message;
    }


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

This topic was automatically closed after 42 days. New replies are no longer allowed.