Help with Wave 2
Hi, Would like some help with Wave 2
Layout
I want to have different Layout view files, not everything in one file.
Currently have app.php in themes/tallstack/layout
- a layout for the app (signed in)
- a layout for the web (not signed in)
App does not require SEO headers
Why is @checkout in every page load :( I like to keep my pages lean. Is there a way for me to update so I have a checkout page instead?
What issues will arrise from these changes? (if any)
References to views
What is this @include('theme::
How is this handled by Laravel?
Where can I find documentation on how this works?
Do I need to reference views like this too?
Demo header ??
What is this?
@if(config('wave.demo') && Request::is('/'))
@include('theme::partials.demo-header')
@endif
I feel like there should be an app layout php file that creates flags, or separates some of the code out of the view. This would also help understand what is going on. At least more than at the moment.
Toast Messages
Do you have a tutorial showing creating a custom form, with TALL, with live toast messages in Wave?
Lang - Translations - Multi language
I'm creating an app that is for 2 languages to start EN, ES My first language is EN. The first group beta of end users only speak ES.
How much of the wave app/interface is run through __(...)?
Side note: Question Preview Panel - the preview panel here when writing a long post does not have scroll bars, so can only see a limited amount of what I wrote.
PS: I don't know if these questions should be posted here, or in another place. Let me konw if want it moved.
Hey Chris,
It’s totally fine to customize your layout and split it into separate view files, as that’s how Laravel is designed to be flexible. For example, having a layout for the app (signed in) and another for the web (not signed in) is a common approach, and it’ll make things much more maintainable. You can create separate layouts for each use case under themes/tallstack/layout and load them as needed in your controllers or routes.
Regarding the @checkout being on every page, you can definitely move that to a specific checkout page to keep your other pages lean. This change shouldn't cause any major issues, but just ensure that the checkout functionality works properly to the checkout page, after you make the changes.
The @include('theme::...') this pas part of the Themes package you can check it out here. This package allows you to easily switch between different themes in your Laravel application. As discussed in your other quesiton here, you can feel free to replace the theme directive with the actual path to the view file if you prefer.
The demo-header you see in the condition @if(config('wave.demo') && Request::is('/')) is just a demo banner shown on the homepage, feelf ree to remove it if you don't need it:
For toast messages, we don't have a dedicated tutorial on how to do this, but you can use the code base in Wave as a reference, for example:
Regarding the multi-language support, Laravel provides the __() helper for translations, you can use that with Wave as well. You can check out the Laravel documentation on localization here. If you are interested in multi-language support for Voyager, you can check out the Voyager documentation.
Thanks for reporting the scroll bar issue in the question preview panel! We'll look into that.
And it’s perfectly fine to post your questions here in the forum!
- Bobby
No problem! Good luck with your project!
Strange, I can see toast code, see Livewire sending the request, see the response in dev tools, But cannot see a toast.
Toast is working; This is working in Dev Tools Console
popToast('success', 'Test message.');
Livewire sending request and browser receives a proper response...
Logs are empty.
Not sure how to troubleshoot further.
Okay, tried something else and interesting...
Note: I'm doing this in my own custom Controller, a custom View, custom route added in web.php, however the view extends the theme app layout like all other pages do
Added this to the bottom of the layout app file:
Result:
So, where is the original event listener, how can I check why it isn't loading with the themes app layout when I'm not in wave admin?
The popToast func should already be avilable here:
Can you share a code snippet of the Livewire component that is not working for you?
Livewire/PHP // dispatchBrowserEvent code copied from a file found in Wave /or Voyager
public function addPlot()
{
// Display success toast notification
$this->dispatchBrowserEvent('popToast', ['type' => 'success', 'message' => 'Livewire popToast message']);
}
The event works, as I can see a valid Livewire response with data payload in the DevTools > Network tab.
The popToast js function is in that file you mentioned (tallstack/assets/js/app.js), and works fine. This was tested yesterday.
Laravel Mix is doing its job, each time I change the file, it builds and notifies me. Also, I can see the JS file is being loaded by the browser with the popToast code. well that's proven in a previous post...
What doesn't seem to work is catching the Browser Event from Livewire with the information. I don't know where/what file you have catching that event so that I can see why it's not being loaded/included.
So, the event is triggered on livewire response, but whatever is suposed to be catching the event is not working.
Testing... okay figured it out...
Adding this to app.js works
document.addEventListener('popToast', function(obj) {
console.debug('popToast event received object/data:');
console.debug(obj);
console.debug(obj.detail);
console.debug(obj.detail.type);
console.debug(obj.detail.message);
popToast(obj.detail.type, obj.detail.message);
});
1
Happy to hear that you've got this working and thanks for sharing the solution here! 🙌