Frontend

• Installation
• Getting started
• Usage
  • Banners
  • Sliders
  • MailChimp
  • reCaptcha
  • Contact Form
  • Mail templates
  • Permissions

#Installation

You can install the extension via composer using the following command:

composer require tastyigniter/ti-ext-frontend:"^4.0" -W

Run the database migrations to create the required tables:

php artisan igniter:up

#Getting started

#reCaptcha

Navigate to the Manage > Settings > reCaptcha Settings admin settings page to enter your Site Key and Secret Key. Selecting a language is optional. Please follow the on-page instructions to get these keys.

#MailChimp

Navigate to the Manage > Settings > MailChimp Settings admin settings page to enter your API Key and List ID. Please follow the on-page instructions to get these keys.

#Usage

In the admin user interface you can manage banners and images for the slider. Manage banners on the Design > Banners & Sliders page and slider on the Manage > Settings > Slider Settings page.

The Orange theme provides frontend components to display the banners, subscribe form, and contact form, and reCAPTCHA. You can use these components in your theme to display the respective content. Learn more about the available components in the Orange theme documentation.

#Banners

#Creating banners

You can programmatically create a banner using the Igniter\Frontend\Models\Banner model:

use Igniter\Frontend\Models\Banner;

$banner = Banners::create([
    'name' => 'Banner Name',
    'code' => 'unique-code',
    'type' => 'image',
    'image_code' => 'path/to/image.jpg',
    'click_url' => 'https://example.com',
    'language_id' => 1,
    'status' => true,
]);

The following attributes are available on the Igniter\Frontend\Models\Banner model:

• name: (string) The name of the banner. Required.
• code: (string) A unique code for the banner. Required.
• language_id (integer): The language ID for the banner. Required.
• status (boolean): Whether the banner is displayed. Required.
• type: (string) The type of banner. Required. Available options are image, custom.
• custom_code: (string) The HTML markup for a custom banner. Required if type is custom.
• click_url: (string) The URL to redirect to when the image banner is clicked. Required if type is image.
• alt_text (string): The alt text for the image banner. Required if type is image.
• image_code (string): The path to the image file. Required if type is image.

#Displaying banners

You can display banners on your front-end pages using the Igniter\Frontend\Models\Banner model to fetch the banner by code:

use Igniter\Frontend\Models\Banner;

$banner = Banners::isEnabled()->whereCode('unique-code')->first();

You can then display the banner in your blade view file using the following code:

@if($banner->isCustom())
    {!! $banner->custom_code !!}
@elseif($banner->isImage())
    @foreach((array)$banner->image_code as $bannerUrl)
        <a href="{{ $banner->click_url }}">
            <img src="{{ media_thumb($bannerUrl, ['width' => 96, 'height' => 96]) }}" alt="{{ $banner->alt_text }}">
        </a>
    @endforeach
@endif

#Sliders

#Creating sliders

You can programmatically create a slider using the Igniter\Frontend\Models\Slider model:

use Igniter\Frontend\Models\Slider;

$slider = Slider::create([
    'name' => 'Slider Name',
    'code' => 'unique-code',
]);

$slideOne = $model->newMediaInstance();
$slideOne->addFromFile('path/to/file.jpg', 'images')

$slideTwo = $model->newMediaInstance();
$slideTwo->addFromFile('path/to/file-2.jpg', 'images')

$slider->media()->saveMany([$slide, $slideTwo]);

The following attributes are available on the Igniter\Frontend\Models\Slider model:

• name: (string) The name of the slider. Required.
• code: (string) A unique code for the slider. Required.
• images: (Collection) An array of Media models for the slider.

#Displaying sliders

You can display sliders on your front-end pages using the Igniter\Frontend\Models\Slider model to fetch the slider by code:

use Igniter\Frontend\Models\Slider;

$slider = Slider::whereCode('unique-code')->first();

You can then display the slider in your blade view file using the following code:

@if($slider)
    <div class="slider">
        @foreach($slider->images as $slide)
            <img src="{{ $slide->getThumb() }}" alt="{{ $slide->getCustomProperty('title') }}">
        @endforeach
    </div>
@endif

#MailChimp

#Subscribing to MailChimp

You can programmatically subscribe an email to a MailChimp list using the Igniter\Frontend\Models\Subscribe model:

use Igniter\Frontend\Models\Subscribe;

$subscribe = Subscribe::firstOrCreate([
    'email' => '[email protected]',
]);

$subscribe->subscribeToMailchimp($listId, $options);

#reCaptcha

#Displaying reCaptcha

To display a reCaptcha on your front-end pages, you can use the recaptcha component in your theme:

@php
    $captchaSettings = \Igniter\Frontend\Models\CaptchaSettings::instance();
@endphp

<div class="g-recaptcha" data-sitekey="{{ $captchaSettings->api_site_key }}"></div>
<div class="text-danger">{{ $errors->first('g-recaptcha-response') }}</div>
<script
    type="text/javascript"
    src="https://www.google.com/recaptcha/api.js?hl={{ $captchaSettings->lang }}"
    async defer
></script>

#Validating reCaptcha

You can validate a reCaptcha token using the recaptcha validation rule:

$request->validate([
    'g-recaptcha-response' => ['required', 'recaptcha'],
]);

#Contact Form

#Sending contact form emails

You can programmatically send a contact form email using the Igniter\Frontend\Actions\SendContactMail action:

use Igniter\Frontend\Actions\SendContactMail;

(new SendContactMail())([
    'full_name' => 'John Doe',
    'contact_topic' => 'General Inquiry',
    'contact_email' => '[email protected]',
    'contact_telephone' => '1234567890',
    'contact_message' => 'Hello, this is a test message.',
]);

#Mail templates

The Frontend extension registers the following mail templates:

• igniter.frontend::mail.contact - Contact form email template

You can send this email template using the SendContactMail action.

#Permissions

The Frontend extension registers the following permissions:

• Igniter.FrontEnd.ManageSettings: Control who can manage reCaptcha and MailChimp settings in the admin area.
• Igniter.FrontEnd.ManageBanners: Control who can manage banners in the admin area.
• Igniter.FrontEnd.ManageSlideshow: Control who can manage sliders in the admin area.

For more on restricting access to the admin area, see the TastyIgniter Permissions documentation.