Templates · Blade or Twig

Templates

As described at routing, every route endpoint will use a specific twig or blade template to render the page. Every template will receive several variables, that you can use to build the page.

Home Page

Path	Route	Blade	Twig
/	shop.home	home.blade.php	home.twig

When opening the root url of a shop, the home template gets rendered. By default, there are no variables injected into this view.

If you need data (like categories or products) on your homepage, then you need to specify them in the config/vanilo.json file:

{
    "cloud": {
        "home": {
            "inject": {
                "products": "product.latest(4)",
                "brands": "taxonomy.bySlug(brands)"
            }
        }
    }
}

The example above will take the 4 latest products (created most recently) and the taxonomy "brands" and inject them into the home view as $products and $brands variables:

{{-- home.blade.php --}}
<h2>Shop By Brand</h2>

@foreach($brands->getRootLevelTaxons() as $brand)
  <h3><a href="{{ url_of($brand) }}">{{ $brand->name }}</a></h3>
@endforeach

<h2>Latest Products</h2>
@foreach($products as $product)
  <article>
    <h3><a href="{{ url_of($product) }}">{{ $product->title }}</a></h3>
    <img src="{{ $product->getFirstMediaUrl('default', 'medium') ?: asset('/img/default/product_medium.jpg') }}" />
  </article>
@endforeach

Taxon (Category) Page

Path	Route	Blade	Twig
/c/{taxonomy}/{taxon}	shop.taxon.show	taxon/show.blade.php	taxon/show.twig
/c/{taxonomy}/{parent}/{taxon}	shop.taxon.show.with-parent	taxon/show.blade.php	taxon/show.twig

The category page displays a single taxon, and - almost always - the products within that taxon.

The following variables are available in the taxon show template:

Variable
$taxon	The taxon that is currently being shown
$products	The collection of products within the taxon
$filters	The filters for the given page
$taxonomies	The collection of all taxonomies in the shop

Product List

Path	Route	Blade	Twig
/p	shop.product.index	product/index.blade.php	product/index.twig

This page is rarely used, but can be useful for shops with a smaller number of products, or when there's no need for categorization. The template receives the same variables as the taxon show page, but the $taxon variable is always null:

Variable
$taxon	NULL
$products	The collection of products
$filters	The filters for the given page
$taxonomies	The collection of all taxonomies in the shop

Product Filtering

Product Page

Cart

Checkout

Inject Global Variables

cloud.view.share

Template Helper Functions

There are several helper functions that you can use in your templates

• format_price()
• product_title()
• url_of
• page_url()
• configuration_to_text()
• md2html()