|
| 1 | +# Basic usage |
| 2 | + |
| 3 | +--- |
| 4 | + |
| 5 | +- [Determining the view to use](#determining-view) |
| 6 | +- [Determining the Page class](#the-page-class) |
| 7 | +- [Available data](#available-data) |
| 8 | +- [Using draft content](#draft-content) |
| 9 | + |
| 10 | + |
| 11 | +Once [installed](/{{route}}/{{version}}/installation) you can start working with Storyblok in your Laravel application just by creating the appropriate Blade views. |
| 12 | + |
| 13 | +The package will consume Storyblok’s JSON responses and automatically convert them to nested PHP objects. The type of object created can be set just by matching the filename to that of the Storyblok component. This is covered in more detail in the [blocks documentation](/{{route}}/{{version}}/blocks). |
| 14 | + |
| 15 | +The best way to understand this is to `dd($story)` in Blade file and check out the document structure. |
| 16 | + |
| 17 | +Create the following folder `resources/views/storyblok/pages`, this is the default location where you will store all of your Blade views but you are free to use any structure you want. You can read more about how the package selects which view is loaded and how to define your own rules in the [views documentation](/{{route}}/{{version}}/views). |
| 18 | + |
| 19 | +> {info} You can change the default view path in the `storyblok.php` configuration file |
| 20 | +
|
| 21 | +--- |
| 22 | + |
| 23 | +<a name="determining-view"> |
| 24 | +## Determining the view to use |
| 25 | +</a> |
| 26 | + |
| 27 | +Every `Page` has a `views()` method that returns an array of possible views to pass to Laravel’s `view()->first()` function ([see the Laravel docs](https://laravel.com/docs/7.x/views)). The package looks for a Blade file matching the name of the [Content Type](https://www.storyblok.com/docs/the-key-concept#content-types) component used for the current page in Storyblok, that doesn’t exist then `page.blade.php` will be tried. |
| 28 | + |
| 29 | +If you have a Content Type component called `episode` being used for the page then it will look for an `episode.blade.php` file in `resources/views/storyblok/pages`. |
| 30 | + |
| 31 | +Each `Block` implements `views()` and `render()` methods that will give you a list of possible views to use and render the block. You can read more about this in the [blocks documentation](/{{route}}/{{version}}/blocks). |
| 32 | + |
| 33 | +--- |
| 34 | + |
| 35 | +<a name="the-page-class"> |
| 36 | +## Determining the Page class |
| 37 | +</a> |
| 38 | + |
| 39 | +By default it uses the `App\Storyblok\Page` class. To provide your own object for the page create a class in `App\Storyblok\Pages` and name it as the Studly case version of the Content Type from Storyblok. Be sure to extend `Riclep\Storyblok\Page` or the website’s default `Page` if you want common functionality. |
| 40 | + |
| 41 | +In the `episode` example above you’d create an `Episode` class like so: |
| 42 | + |
| 43 | +```php |
| 44 | +<?php |
| 45 | +// episode.php |
| 46 | + |
| 47 | +namespace App\Storyblok\Pages; |
| 48 | + |
| 49 | +class Episode extends App\Storyblok\Page |
| 50 | +{ |
| 51 | + |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +<a name="available-data"> |
| 56 | +## Available Data |
| 57 | +</a> |
| 58 | + |
| 59 | +The selected view will be passed the complete `Page` object in a variable called `$story` which contains all the processed data for the current page. To display your content just print it to the screen, if our Episode has fields for `title`, `text` and a `nested` field containing child blocks we’d access them as so: |
| 60 | + |
| 61 | +```html |
| 62 | +<main> |
| 63 | + <header> |
| 64 | + <h1>{{ $story->title }}</h1> |
| 65 | + </header> |
| 66 | + |
| 67 | + <section> |
| 68 | + {{ $story->text }} |
| 69 | + |
| 70 | + <div> |
| 71 | + {{ $story->nested[0]->name }}<br> |
| 72 | + {{ $story->nested[0]->role }} |
| 73 | + </div> |
| 74 | + </section> |
| 75 | +</main> |
| 76 | + |
| 77 | +``` |
| 78 | + |
| 79 | +If the `text` field was rich-text it would automatically be converted in a `Riclep\Storyblok\Fields\RictText` class. Printing it to screen will automatically covert it to HTML. |
| 80 | + |
| 81 | +The nested blocks will be transformed into `App\Storyblok\Block` classes and all of their fields processed and converted. You can of course override this. If the JSON for the block looked like this: |
| 82 | + |
| 83 | +```json |
| 84 | +{ |
| 85 | + "name": "Richard Le Poidevin", |
| 86 | + "_uid": "xxx", |
| 87 | + "role": "Host", |
| 88 | + "component": "person", |
| 89 | + "_editable": "xxx" |
| 90 | +} |
| 91 | +``` |
| 92 | + |
| 93 | +Creating a class called `Person` in `App\Storyblok\Blocks` would make this block become that type. Within this block you are free to manipulate the data and fields as desired. |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +<a name="draft-content"> |
| 98 | +## Using draft content |
| 99 | +</a> |
| 100 | + |
| 101 | +By default Storyblok will only load draft content when inside their visual editor. Sometimes it’s helpful to have access to draft content during development. To load draft content outside of the editor make a new .env variable like so. |
| 102 | + |
| 103 | +```php |
| 104 | +STORYBLOK_DRAFT=true |
| 105 | +``` |
| 106 | + |
| 107 | +> {warning} Be careful not to use draft content in production! Either remove the env variable or set it to false. |
| 108 | +
|
| 109 | + |
| 110 | +Every time you publish in Storyblok the webhook will clear Laravel’s cache but the package provides a `storyblok.clear-cache` route if you need to do this manually in your code. You can of course clear the cache with Artisan too. If you’re using a taggable Cache driver the package uses the `storyblok` tag. |
0 commit comments