Assets and resources
Introduction
Your app might contain custom styles in the form of CSS classes or other assets that is needed for your app to display correctly in the admin section of Strata.
Including your assets
A good approach is to include any CSS stylesheets on any Blade files that include custom CSS classes
by pushing them to the styles stack. This will include them in the head section after the base
Strata stylesheets.
1@extends('lego::layouts.lego')2 3@push('styles') 4 <link href="{{ asset('vendor/shopify/css/shopify.css') }}" rel="stylesheet">5@endpush6 7@section('content')8 <!-- ... -->Likewise for any custom scripts your app might depend upon, those can be pushed to the scripts
stack, which will include them before the end of the body tag.
Publishing your assets
If you have assets that can be published and are needed from the public\vendor\ directory for your
app to display correctly, then it is important that these assets gets published when the app is
installed. You can register any publishable tags
with Strata with the publishOnInstall() method, which takes an array of tags.
Remember to run
lego:installafter adding this code to your service provider to publish your app's assets.
1public function boot() 2{ 3 if ($this->app->runningInConsole()) { 4 $this->publishes([ 5 __DIR__.'/../public' => public_path('vendor/my-app/'), 6 ], 'my-app-assets'); 7 } 8} 9 10public function registerApp(LegoManager $lego)11{12 $lego->registerApp(function (App $app) {13 return $app14 ->name('my-app')15 ->settings(MyAppSettings::class)16 ->publishOnInstall([ 17 'my-app-assets',18 ]);19 });20}Including frontend views
Certain apps have Blade views that should be included on the frontend facing pages, such as JavaScripts snippets that should go in the <head> section of a page for example. You can let the app know that it should include these files at specific sections of the layout.
1use Helix\Lego\Apps\Services\IncludeFrontendViews; 2 3public function registerApp(LegoManager $lego) 4{ 5 $lego->registerApp(function (App $app) { 6 return $app 7 ->name('myapp') 8 ->settings(MyAppSettings::class) 9 ->includeFrontendViews(function (IncludeFrontendViews $views) { 10 return $views11 ->addToHead(['myapp::head'])12 ->addToBody(['myapp::body'])13 ->addToEnd(['myapp::end']);14 });15 });16}Important! Make sure you "return" the
$viewsin the closure.
You can add to the "head", "body", and "end" (footer) of the page. Each method (addToHead, addToBody, and addToEnd) accepts either a string or an array of Blade includes.
This would be the same as adding @include('myapp::head') to your Blade layout file.
This depends on that the app layout has added the three necessary includes to the main layout file at the respectable places:
See Layouts for more information.
Ordering of includes
Certain includes are important that they are included before others. If you for example are using an A/B testing snippet, it might be critical that it is the first view to be included when the page renders. So you can set some sane defaults for the user when defining which views should be included by adding a second parameter. This will be the priority of were in the order of all the other apps' includes it will be inserted at. This should be a number from zero (0) to one hundred (100). The higher the number the earlier it will be rendered.
1public function registerApp(LegoManager $lego) 2{ 3 $lego->registerApp(function (App $app) { 4 return $app 5 ->name('important-app') 6 // ... 7 ->includeFrontendViews(function (IncludeFrontendViews $views) { 8 return $views->addToHead(['important-app::head'], 100); 9 });10 });11} 1public function registerApp(LegoManager $lego) 2{ 3 $lego->registerApp(function (App $app) { 4 return $app 5 ->name('unimportant-app') 6 // ... 7 ->includeFrontendViews(function (IncludeFrontendViews $views) { 8 return $views->addToHead(['unimportant-app::head'], 1); 9 });10 });11}Here we have two different apps that both want's to include views to the head section. By setting important-app's priority to 100 this will ensure it is include before the unimportant-app.