Cara mudah membuat breadcrumb dengan Laravel

E-Commerce sangat mementingkan SEO, salah satu faktor yang dapat mendukung baiknya SEO pada e-commerce adalah adanya breadcrumb. Pada tutorial ini saya coba membagi bagaimana membuat Breadcrumb dengan Laravel.

Package yang kita gunakan adalah package yang ada pada link ini:
https://github.com/davejamesmiller/laravel-breadcrumbs

Laravel yang saya gunakan versi 5.2.x. Settingannya pun berbeda dengan versi 5.3 ataupun versi yang sebelumnya. Jadi pastikan laravel kamu sama dengan saya ketika ingin mencoba tutorial laravel ini πŸ™‚

Awalnya, kita download saja package davejamesmiller tersebut. Caranya pake composer aja ketik di terminal tepat pada project laravel kamu dengan perintah:

composer require davejamesmiller/laravel-breadcrumbs

Jika sudah, buka file config/app.php lalu tambahkan service provider seperti kode dibawah ini:

'providers' => [
    // ...
    DaveJamesMiller\Breadcrumbs\ServiceProvider::class,
],

Jika sudah, lalu tambahkan facade aliasnya:

'aliases' => [
    // ...
    'Breadcrumbs' => DaveJamesMiller\Breadcrumbs\Facade::class,
],

Kita sekarang setting format css dan html breadcrumb yang kita mau. Seperti breadcrumb dengan style seperti bootstrap 2 atau bootstrap 3 dan sebagainya. Untuk awal, kita buat style bootstrap 3 saja dulu. Perintahnya adalah ketik pada terminal perintah ini.

php artisan vendor:publish

Pastikan ada file yang otomatis dibuat yaitu file config/breadcrumbs.php

Jika sudah, buka file tersebut dan pastikan isinya itu adalah kode seperti dibawah ini:

<?php

return [

  'view' => 'breadcrumbs::bootstrap3',

];

Lanjut ya, jika selesai sekarang kita buat file dengan nama breadcrumbs.phpΒ di folder /app/Http/. Bersebelahan dengan file routes.php

Nah sekarang kita buat breadcrumb contoh saja ya. Berikut adalah contohnya:

<?php 

Breadcrumbs::register('home', function($breadcrumbs)
{
    $breadcrumbs->push('Home', route('front.index'));
});

Terlihat diatas, saya daftarkan / register satu breadcrumb dengan nama ‘home’. Lalu dalam register tersebut daya tambahkan breadcrumb dengan kode seperti $breadcrumbs->push(‘Home’, route(‘front.index’));

Lalu lihat terdapat method push yang berfungsi untuk menambahkan item breadcrumb. Parameter pertama adalah nama dari breadcrumb lalu parameter kedua adalah link dari nama tersebut. Penamaan link tersebut diambil dari route name yang kita daftarkan pada routes.php.

Selesai? Belum…

Sekarang kita tampilkan pada view. Anggap saya ada view lalu menyisipkannya mudah dengan cara seperti kode dibawah ini.

{!! Breadcrumbs::render('home') !!}

Render breadcrumb dengan nama ‘home’. Mudah bukan πŸ™‚

Belum selesai, sekarang kita buat contohnya adalah breadcrumb seperti ini: Home – Category – Nama Product. Bagaimana buatnya?

Mari kita registerkan dulu breadcrumb dengan pattern seperti ini. Buka kembali file breadcrumb.php yang ada di Http lalu tambahkan kode seperti dibawah ini.

Breadcrumbs::register('category', function($breadcrumbs, $category) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($category->name, route('category.front.index', $category->slug));
});

Breadcrumbs::register('product', function($breadcrumbs, $product) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($product->category_name, route('category.front.index', $product->category_slug));
    $breadcrumbs->push($product->name, route('product.front.index', $product->slug));
});

Lihat, saya meregister 2 nama breadcrumb baru. Breadcrumb pertama diatas, saya daftarkan breadcrumb dengan format: “Home” – “Nama Category”. Terlihat pada kodenya, ada parameter kedua yaitu $category. Variable tersebut didapat dari view yang di inject ke dalam breadcrumb ini. Jika di view terlihat seperti berikut:

{!! Breadcrumbs::render('category', $categories) !!}

Pada view, $categories ini adalah variable yang didapat dari Controller. Jadi cara inject nya seperti kode diatas.

Lalu Breadcrumb kedua diatas, saya daftarkan dengan format yang kita mau sebelumnya. Lihat cara panggil agar breadcrumb bertingkat dengan memanggil ->parent lalu di ->push kembali.

Pada view, cara panggil breadcrumb kedua tersebut seperti kode dibawah ini:

{!! Breadcrumbs::render('product.front.index', $products) !!}

$products adalah variable yang didapat dari controller. Pastikan dalam variable $products terdapat category_name dan category_slug dimana kedua hal itu digunakan oleh breadcrumb dengan nama ‘category’

Semoga di tutorial ini bisa dimengerti. Ada yang ga ngerti ya tinggalkan saja pertanyaan πŸ™‚

Semoga bermanfaat πŸ™‚

2 thoughts on “Cara mudah membuat breadcrumb dengan Laravel”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.