DEV Community

Cover image for Laravel Ecommerce Tutorial: Part 10, Settings
Given Ncube
Given Ncube

Posted on • Originally published at flixtechs.co.zw

Laravel Ecommerce Tutorial: Part 10, Settings

#laravel #php

I know in the last post I promised in this post we will be building the home page of our e commerce site but I realized we need to give the user the ability to configure things like site name, socials, currency code, etc.

So in this post we will be using a package, spatie/laravel-settings to store settings in the database retrieve them later to perform custom logic based on the configured value.

To begin let's install the package with composer

composer require spatie/laravel-settings
Enter fullscreen mode Exit fullscreen mode

Publish the assets and migrate the database

http://192.168.1.1/pub/login.htm php artisan vendor:publish --provider="Spatie\LaravelSettings\LaravelSettingsServiceProvider" --tag="migrations"
Enter fullscreen mode Exit fullscreen mode 
php artisan migrate
Enter fullscreen mode Exit fullscreen mode

So here's what we're going to build,

  • A settings index page, showing links to specific settings categories
  • General Settings page for, well, general settings like store name, address and what not
  • Social Settings page for social media links
  • Legal Settings to add things like terms of service and privacy policy, return policy
  • Misc settings for settings we won't be able to fit into these categories

All Settings

Let's start by creating a controller

php artisan make:controller Admin\\SettingsController --test
Enter fullscreen mode Exit fullscreen mode

This controller will just have an index action that http://192.168.1.1/pub/login.htmjust shows the settings index page with links to other settings

Open the newly created controller and add the following snippet

<?php

namespace App\Http\Controllers;

use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\Request;

class SettingsController extends Controller
{
    /**
     * The settings index page
     * 
     * @return Renderable
     */
    public function index(): Renderable
    {
        return view('admin.settings.index');
    }
}
Enter fullscreen mode Exit fullscreen mode

Notice we don't have the admin.settings.index view yet, let's add that by running the following artisan command

php artisan make:view admin.settings.index -e layouts.app
Enter fullscreen mode Exit fullscreen mode

Open the newly created view and paste the following snippet

@extends('layouts.app')

@section('title')
    Settings
@endsection

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>Settings</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item">Settings</div>
            </div>
        </div>

        <div class="section-body">
            <h2 class="section-title">Overview</h2>
            <p class="section-lead">
                Organize and adjust all settings about this site.
            </p>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card card-large-icons">
                            <div class="card-icon bg-primary text-white">
                                <i class="fas fa-cog"></i>
                            </div>
                            <div class="card-body">
                                <h4>General</h4>
                                <p>General settings such as, site title, site description, address and so on.</p>
                                <a href="#" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card card-large-icons">
                            <div class="card-icon bg-primary text-white">
                                <i class="fas fa-search"></i>
                            </div>
                            <div class="card-body">
                                <h4>Legal</h4>
                                <p>Legal settings such as, terms of service and privacy policy.</p>
                                <a href="#" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card card-large-icons">
                            <div class="card-icon bg-primary text-white">
                                <i class="fas fa-mobile"></i>
                            </div>
                            <div class="card-body">
                                <h4>Social</h4>
                                <p>Social networks settings, your Twitter, Facebook and IG handles.</p>
                                <a href="#" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card card-large-icons">
                            <div class="card-icon bg-primary text-white">
                                <i class="fas fa-stopwatch"></i>
                            </div>
                            <div class="card-body">
                                <h4>Misc</h4>
                                <p>Settings about miscellaneous things you might prefer.</p>
                                <a href="#" class="card-cta text-primary">Change Setting <i class="fas fa-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
Enter fullscreen mode Exit fullscreen mode

We will replace the "#" links with routes to respective settings when we create them.

Lastly, let's register the route in the admin group

Route::get('/settings', [SettingsController::class, 'index'])->name(
    'settings.index',
);
Enter fullscreen mode Exit fullscreen mode

Now if you navigate to that route in your browser your settings index page should look something like the image below

settings page

Let's add the link to settings on the sidebar, add this snippet to layouts.partials.sidebar

<li class="nav-item @if (Route::is('admin.settings.*')) active @endif">
    <a href='{{ route('admin.settings.index') }}' class='nav-link'>
        <i class='fas fa-wrench'></i> <span>Settings</span>
    </a>
</li>
Enter fullscreen mode Exit fullscreen mode

Let's move on to general settings

General Settings

Let's start by giving the user the ability to manage general settings, create the settings class by running the following artisan command

 php artisan make:setting GeneralSettings --group=general
Enter fullscreen mode Exit fullscreen mode

Open the recently created setting in App\Settings\GeneralSettings and add the following code

<?php

namespace App\Settings;

use Spatie\LaravelSettings\Settings;

class GeneralSettings extends Settings
{
    /**
     * @var string The name of the site
     */
    public string $site_name;

    /**
     * @var string The contact email of the site
     */
    public string $contact_email;

    /**
     * @var string The sender email of the site
     */
    public string $sender_email;

    /**
     * @var string The legal name of the site
     */
    public string $legal_name;

    /**
     * @var string The phone number of the site
     */
    public string $phone;

    /**
     * @var string The address of the site
     */
    public string $address;

    /**
     * @var string The city of the site
     */
    public string $city;

    /**
     * @var string The country of the site
     */
    public string $country;

    /**
     * @var string The currency of the site
     */
    public string $currency;

    /**
     * @var string The currency symbol of the site
     */
    public string $currency_symbol;

    /**
     * @var string The analytics code of the site
     */
    public string $google_analytics_code;

    /**
     * @var bool The status of the site
     */
    public bool $active;


    public static function group(): string
    {
        return 'general';
    }
}
Enter fullscreen mode Exit fullscreen mode

Now generate the migration for the settings with

php artisan make:settings-migration CreateGeneralSettings
Enter fullscreen mode Exit fullscreen mode

Open the recently created migration and add the following code

<?php

use Spatie\LaravelSettings\Migrations\SettingsMigration;

return new class extends SettingsMigration
{
    public function up(): void
    {
        $this->migrator->add('general.site_name', 'Site Name');
        $this->migrator->add('general.contact_email', 'please@change.me');
        $this->migrator->add('general.sender_email', 'please@change.me');
        $this->migrator->add('general.phone', '077 526 2092');
        $this->migrator->add('general.legal_name', 'Your Business Name');
        $this->migrator->add('general.address', 'Street Address');
        $this->migrator->add('general.city', 'Harare');
        $this->migrator->add('general.country', 'Zimbabwe');
        $this->migrator->add('general.currency', 'USD');
        $this->migrator->add('general.currency_symbol', '$');
        $this->migrator->add('general.google_analytics_code', '');
        $this->migrator->add('general.active', true);
    }
};
Enter fullscreen mode Exit fullscreen mode

Run the migration

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

We will need a controller for general settings

php artisan make:controller Admin\\GeneralSettingsController
Enter fullscreen mode Exit fullscreen mode

We will also need a form request to update the settings so let's generate that using the command below

php artisan make:request UpdateGeneralSettingsRequest
Enter fullscreen mode Exit fullscreen mode

Add the following code to it

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use App\Http\Requests\UpdateGeneralSettingsRequest;
use App\Settings\GeneralSettings;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;

class GeneralSettingsController extends Controller
{
    /**
     * Display the general settings page
     *
     * @param GeneralSettings $settings
     * @return Renderable
     */
    public function show(GeneralSettings $settings): Renderable
    {
        return view('admin.settings.general', [
            'settings' => $settings
        ]);
    }

    /**
     * Update the general settings
     *
     * @param UpdateGeneralSettingsRequest $request
     * @param GeneralSettings $settings
     * @return RedirectResponse
     */
    public function update(UpdateGeneralSettingsRequest $request, GeneralSettings $settings)
    {
        $settings->fill($request->validated());

        $settings->save();

        return redirect()->route('admin.settings.general.show')
            ->with('success', 'You have successfully updated your settings');
    }
}
Enter fullscreen mode Exit fullscreen mode

Let's update the form request to validate the settings update

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Validator;

class UpdateGeneralSettingsRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules(): array
    {
        return [
            'site_name' => 'required|string|max:255',
            'legal_name' => 'required|string|max:255',
            'contact_email' => 'required|string|email|max:255',
            'sender_email' => 'required|string|email|max:255',
            'phone' => 'required|numeric|min:10',
            'address' => 'required|string|max:255',
            'city' => 'required|string|max:255',
            'country' => 'required|string|max:255',
            'currency' => 'required|string|max:3',
            'currency_symbol' => 'required|string|max:2',
            'google_analytics_code' => 'sometimes|nullable|string',
        ];
    }

    /**
     * Configure the validator instance.
     *
     * @param Validator $validator
     * @return void
     */
    public function withValidator(Validator $validator): void
    {
        $validator->after(function ($validator) {
            $validator->setData(
                collect($validator->getData())
                    ->filter(fn ($value) => $value)
                    ->all()
            );
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Now let's add the view

php artisan make:view admin.settings.general -e layouts.app
Enter fullscreen mode Exit fullscreen mode

Then add the following blade snippet

@extends('layouts.app')

@section('title')
    General Settings
@endsection

@section('content')
    <section class="section">
        <div class="section-header">
            <div class="section-header-back">
                <a href="{{ route('admin.settings.index') }}" class="btn btn-icon"><i class="fas fa-arrow-left"></i></a>
            </div>
            <h1>General Settings</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item active"><a href="#">Settings</a></div>
                <div class="breadcrumb-item">General Settings</div>
            </div>
        </div>

        <div class="section-body">
            <h2 class="section-title">All About General Settings</h2>
            <p class="section-lead">
                You can adjust all general settings here
            </p>

            <div id="output-status"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h4>Jump To</h4>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item"><a href="{{ route('admin.settings.general.show') }}" class="nav-link active">General</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">Legal</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">Social</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">Misc</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <form id="setting-form" action="{{ route('admin.settings.general.update') }}" method="POST">
                            @method('PATCH')
                            <div class="card" id="settings-card">
                                <div class="card-header">
                                    <h4>General Settings</h4>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted">General settings such as, site title, site description, address
                                        and so on.</p>
                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Site
                                            Name</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="site_name" class="form-control @error('site_name') is-invalid @enderror" id="site-title" value="{{ old('site_name', $settings->site_name) }}">
                                            @error('site_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Contact Email</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="contact_email" class="form-control @error('contact_email') is-invalid @enderror" id="site-title" value="{{ old('contact_email', $settings->contact_email) }}">
                                            @error('contact_email')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Sender Email</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="sender_email" class="form-control @error('sender_email') is-invalid @enderror" id="site-title" value="{{ old('sender_email', $settings->sender_email) }}">
                                            @error('sender_email')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Legal Business Name</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="legal_name" class="form-control @error('legal_name') is-invalid @enderror" id="site-title" value="{{ old('legal_name', $settings->legal_name) }}">
                                            @error('legal_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Phone</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="phone" class="form-control phone-number @error('phone') is-invalid @enderror" id="site-title" value="{{ old('phone', $settings->phone) }}">
                                            @error('phone')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Address</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="address" class="form-control @error('address') is-invalid @enderror" value="{{ old('address', $settings->address) }}">
                                            @error('address')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Legal Business Name</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror" value="{{ old('city', $settings->city) }}">
                                            @error('city')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Legal Business Name</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="country" class="form-control @error('country') is-invalid @enderror" id="site-title" value="{{ old('country', $settings->country) }}">
                                            @error('country')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Currency</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="currency" class="form-control @error('currency') is-invalid @enderror" value="{{ old('currency', $settings->currency) }}">
                                            @error('currency')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center">
                                        <label for="site-title" class="form-control-label col-sm-3 text-md-right">Currency Symbol</label>
                                        <div class="col-sm-6 col-md-9">
                                            <input type="text" name="currency_symbol" class="form-control @error('currency_symbol') is-invalid @enderror" id="site-title" value="{{ old('currency_symbol', $settings->currency_symbol) }}">
                                            @error('currency_symbol')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="form-control-label col-sm-3 mt-3 text-md-right">Google Analytics
                                            Code</label>
                                        <div class="col-sm-6 col-md-9">
                                            <textarea class="form-control codeeditor codemirror @error('google_analytics_code') is-invalid @enderror" name="google_analytics_code">{{ old('google_analytics_code', $settings?->google_analytics_code) }}</textarea>
                                            @error('google_analytics_code')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer bg-whitesmoke text-md-right">
                                    <button type="submit" class="btn btn-primary" id="save-btn">Save Changes</button>
                                    <a href="#" class="btn btn-danger" type="button">Reset to default</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection
Enter fullscreen mode Exit fullscreen mode

Next let's create the routes to show and update the settings

Route::get('/settings/general', [GeneralSettingsController::class, 'show'])->name(
    'settings.general.show',
);

Route::patch('/settings/general', [GeneralSettingsController::class, 'update'])->name(
    'settings.general.update',
);
Enter fullscreen mode Exit fullscreen mode

Finally add that link to the settings index page to allow easy navigation. Find the div containing the general settings dummy link and replace with a route to the settings show page

<div class="card-body">
    <h4>General</h4>
    <p>General settings such as, site title, site description, address and so on.</p>
    <a href="{{ route('admin.settings.general.show') }}" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
</div>
Enter fullscreen mode Exit fullscreen mode

Your general settings page should like the image below

general settings page

Let's move on to

Legal Settings

In every online store there's terms of service, privacy policies, refund/return policies and these will be drafted by a legal department of sorts and they can't call a developer everytime they change something in the terms.

Let's give them the ability to set this in the settings and as a bonus provide templates (copied from shopify)

Like with the general settings let's make the setting class

php artisan make:setting LegalSettings --group=general
Enter fullscreen mode Exit fullscreen mode

Open the newly created setting class and add the following code

<?php

namespace App\Settings;

use Spatie\LaravelSettings\Settings;

class LegalSettings extends Settings
{
    public string $refund_policy;

    public string $privacy_policy;

    public string $terms_of_service;

    public static function group(): string
    {
        return 'general';
    }
}
Enter fullscreen mode Exit fullscreen mode

Next, let's generate the database migration for this setting

php artisan make:settings-migration CreateLegalSettings
Enter fullscreen mode Exit fullscreen mode

Open the newly created migration and define the migration as follows

<?php

use Spatie\LaravelSettings\Migrations\SettingsMigration;

return new class extends SettingsMigration
{
    public function up(): void
    {
        $this->migrator->add('legal.refund_policy', '');
        $this->migrator->add('legal.privacy_policy', '');
        $this->migrator->add('legal.terms_of_service', '');
    }
};
Enter fullscreen mode Exit fullscreen mode

Of course migrate the database

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

We need a controller to view and update this setting let's generate it with

php artisan make:controller Admin\\LegalSettingsController --test
Enter fullscreen mode Exit fullscreen mode

Open the controller and populate it with

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use App\Http\Requests\UpdateLegalSettingsRequest;
use App\Settings\LegalSettings;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\RedirectResponse;

class LegalSettingsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @param LegalSettings $settings
     * @return Renderable
     */
    public function index(LegalSettings $settings): Renderable
    {
        return view('admin.settings.legal', [
            'settings' => $settings
        ]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param UpdateLegalSettingsRequest $request
     * @param LegalSettings $legalSettings
     * @return RedirectResponse
     */
    public function update(UpdateLegalSettingsRequest $request, LegalSettings $legalSettings): RedirectResponse
    {
        $legalSettings->fill($request->validated());

        $legalSettings->save();

        return redirect()->route('admin.settings.legal.show')
            ->with('success', 'You have successfully updated your settings');
    }
}
Enter fullscreen mode Exit fullscreen mode

This controller returns a view on the index action and updates the setting values on update but notice we don't have the UpdateLegalSettingsRequest yet, let's create that with

php artisan make:request UpdateLegalSettingsRequest
Enter fullscreen mode Exit fullscreen mode

And of course add the following code

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Validator;

class UpdateLegalSettingsRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules(): array
    {
        return [
            'refund_policy' => 'nullable|string',
            'privacy_policy' => 'nullable|string',
            'terms_of_service' => 'nullable|string',
        ];
    }

    /**
     * Configure the validator instance.
     *
     * @param Validator $validator
     * @return void
     */
    public function withValidator(Validator $validator): void
    {
        $validator->after(function ($validator) {
            $validator->setData(
                collect($validator->getData())
                    ->filter(fn ($value) => $value)
                    ->all()
            );
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Now let's register the routes to view and update this setting

Route::get('/settings/legal', [LegalSettingsController::class, 'index'])->name('settings.legal.show');
Route::patch('/settings/legal', [LegalSettingsController::class, 'update'])->name('settings.legal.update');
Enter fullscreen mode Exit fullscreen mode

Just one thing left, let's create the view to display this setting

php artisan make:view admin.settings.legal -e layouts.app
Enter fullscreen mode Exit fullscreen mode

Open the view and add the following html snippet

@extends('layouts.app')

@section('title')
    Legal Settings
@endsection

@section('content')
    <section class="section">
        <div class="section-header">
            <div class="section-header-back">
                <a href="{{ route('admin.settings.index') }}" class="btn btn-icon"><i class="fas fa-arrow-left"></i></a>
            </div>
            <h1>Lega Settings</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item active"><a href="#">Settings</a></div>
                <div class="breadcrumb-item">General Settings</div>
            </div>
        </div>

        <div class="section-body">
            <h2 class="section-title">Legal Settings</h2>
            <p class="section-lead">
                You can create your own legal pages, or create them from templates and customize them. The templates are not legal advice and need to be customized for your store.

                Your saved policies will be linked in the footer of your checkout. You may need to add your policies to menus in your online store

                By using these templates you agree that you’ve read and agreed to the disclaimer
            </p>

            <div id="output-status"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h4>Jump To</h4>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item"><a href="{{ route('admin.settings.general.show') }}" class="nav-link">General</a></li>
                                    <li class="nav-item"><a href="{{ route('admin.settings.legal.show') }}" class="nav-link active">Legal</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">Social</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">Misc</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <form action="{{ route('admin.settings.legal.update') }}" method="POST">
                            @method('PATCH')
                            <div class="card" id="settings-card">
                                <div class="card-header">
                                    <h4>General Settings</h4>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted">Legal settings such as, terms of service and privacy policy
                                        and so on.</p>
                                    <div class="form-group">
                                        <label for="site-title" class="form-control-label">Terms of Service</label>
                                        <textarea name="terms_of_service" class="form-control @error('terms_of_service') is-invalid @enderror" {{ stimulus_controller('ckeditor') }}>{{ old('terms_of_service', $settings->terms_of_service) }}</textarea>
                                        @error('terms_of_service')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                        <div class='mt-3'>
                                            <button type="button" class="btn btn-primary btn-sm">Create from template</button>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="site-title" class="form-control-label">Privacy Policy</label>
                                        <textarea name="privacy_policy" class="form-control @error('privacy_policy') is-invalid @enderror" {{ stimulus_controller('ckeditor') }}>{{ old('privacy_policy', $settings->privacy_policy) }}</textarea>
                                        @error('privacy_policy')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                        <div class='mt-3'>
                                            <button type="button" class="btn btn-primary btn-sm"> Create from template</button>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="site-title" class="form-control-label">Refund Policy</label>
                                        <textarea name="refund_policy" class="form-control @error('refund_policy') is-invalid @enderror" id="" cols="30" rows="10" {{ stimulus_controller('ckeditor') }}>{{ old('refund_policy', $settings->refund_policy) }}</textarea>
                                        @error('refund_policy')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                        <div class='mt-3'>
                                            <button type="button" class="btn btn-primary btn-sm">Create from template</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer bg-whitesmoke text-md-right">
                                    <button type="submit" class="btn btn-primary" id="save-btn">Save Changes</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection
Enter fullscreen mode Exit fullscreen mode

And that's it, all you need to do is add this link to the sidebars and and settings index page

I'm going to end this tutorial here, however, you should probably implement the social settings and add the ability to create legal settings from template.

For legal templates play around with turbo frames,

In the next post we will look at the customer side of the ecommerce store starting with the home page. I know sometimes I take a while to publish the next post but subscribe to the newsletter below to make sure you get an alert when I do.

Happy Codding!

Top comments (0)

Read next

itsmestevieg profile image

Whats new in PHP 8.4

Stevie G -

mdarifulhaque profile image

1072. Flip Columns For Maximum Number of Equal Rows

MD ARIFUL HAQUE -

neotechy profile image

PHP Tips and Tricks for Writing Cleaner and More Efficient Code

NeoTechy -

mdarifulhaque profile image

2257. Count Unguarded Cells in the Grid

MD ARIFUL HAQUE -