Getting Started

Minimal Steps to Begin

Installation:

composer require tastyigniter/ti-theme-orange

Publish the theme assets and configuration:

php artisan vendor:publish --provider="TastyIgniter\Orange\OrangeServiceProvider" --tag="orange-assets"
php artisan vendor:publish --provider="TastyIgniter\Orange\OrangeServiceProvider" --tag="orange-config"

Theme Activation: Update your config/app.php to include the Orange theme in the providers array:
```
TastyIgniter\Orange\OrangeServiceProvider::class,
```
Set the default theme in config/orange.php:
```
'default' => 'orange',
```
First Use Case: Replace your existing resources/views/layouts/app.blade.php with the Orange theme’s layout:
```
@extends('igniter.orange::layouts.app')
```
Override specific views by copying them from vendor/tastyigniter/ti-theme-orange/resources/views to your resources/views/igniter/orange directory.

Where to Look First

Documentation: Start with the official Orange Theme docs for setup and configuration.
Blade Templates: Explore vendor/tastyigniter/ti-theme-orange/resources/views to understand the structure and components.
Livewire Components: Check vendor/tastyigniter/ti-theme-orange/resources/js for interactive elements like CartBox, Checkout, and Booking.
Configuration: Review config/orange.php for theme-specific settings like checkout flows, menu options, and SEO configurations.

First Practical Task

Customize the Header:

Copy the header template from vendor/tastyigniter/ti-theme-orange/resources/views/partials/header.blade.php to resources/views/igniter/orange/partials/header.blade.php.
Modify the logo, navigation, or search functionality to match your brand.
Extend the LocalHeader Livewire component (located in vendor/tastyigniter/ti-theme-orange/app/Http/Livewire) to add custom logic, such as dynamic opening hours or promotions.

Implementation Patterns

Core Workflows

1. Theme Customization

Blade Overrides: Override any Blade template by placing a file with the same path in your resources/views/igniter/orange directory. For example:
```
// Override the menu layout
resources/views/igniter/orange/layouts/menu.blade.php
```
SASS Customization: Modify the theme’s styles by extending the resources/sass/orange/app.scss file (published during installation). Use variables defined in _variables.scss for consistent theming.

2. Livewire Component Integration

Extend Components: Extend Livewire components (e.g., CartBox, Checkout) by creating a new class in app/Http/Livewire that extends the original:

namespace App\Http\Livewire;

use TastyIgniter\Orange\Http\Livewire\CartBox as OriginalCartBox;

class CartBox extends OriginalCartBox
{
    public function render()
    {
        // Custom logic
        return view('igniter.orange::livewire.cart-box')->layout('layouts.app');
    }
}

Reuse Components: Include Livewire components in your Blade templates using the @livewire directive:
```
@livewire('cart-box', ['orderType' => $orderType])
```

3. Checkout Flow Customization

Single vs. Two-Page Checkout: Configure the checkout flow in config/orange.php:
```
'checkout' => [
    'flow' => 'two_page', // or 'single_page'
],
```
Payment Methods: Extend the PaymentMethod model or override the Checkout Livewire component to add custom payment gateways.

4. Menu Management

Dynamic Menus: Use the CategoryList and ListMenuItems components to display menus dynamically:

@livewire('category-list', ['locationId' => $locationId])
@livewire('list-menu-items', ['categoryId' => $categoryId])

Hide Unavailable Items: Enable the hide_unavailable_items option in config/orange.php:
```
'menu' => [
    'hide_unavailable_items' => true,
],
```

5. SEO and Metadata

SEO Manager Integration: Use the SEO Manager extension to manage metadata for static pages and menus. Example:

use Spatie\SeoManager\SeoManager;

SeoManager::set('menu.show', [
    'title' => 'Our Menu',
    'description' => 'Explore our delicious menu options.',
]);

Integration Tips

Laravel Mix/Webpack

Asset Compilation: The theme includes a webpack.mix.js file for compiling SASS and JavaScript. Extend it in your webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/orange/app.scss', 'public/css');

Database and Models

Location-Based Features: Use the LocationData class to fetch location-specific data (e.g., reviews, opening hours):

use TastyIgniter\Orange\Data\LocationData;

$locationData = new LocationData($locationId);
$reviews = $locationData->reviews;

API Endpoints

Custom API Routes: Extend the theme’s routes by adding them to your routes/web.php:

Route::prefix('api/orange')->group(function () {
    Route::get('/menu', [\App\Http\Controllers\Orange\MenuController::class, 'index']);
});

Testing

Livewire Component Tests: Use Laravel’s Livewire testing utilities to test components. Example:

use Livewire\Livewire;

public function test_cart_box()
{
    Livewire::test('cart-box')
        ->assertSee('Your Cart')
        ->call('addToCart', $menuItem)
        ->assertSee('Added to Cart');
}

Gotchas and Tips

Pitfalls and Debugging

1. Relative URLs in Pagination

Issue: Paginator URLs may break if not wrapped with the url() helper (fixed in v4.1.5).
Solution: Ensure your Blade templates use {{ url()->current() }} or {{ route('...') }} instead of relative paths.

2. Livewire Component Caching

Issue: Livewire components may not update if cached. Clear the view cache after modifications:
```
php artisan view:clear
php artisan cache:clear
```

3. Coordinate Handling

Issue: Nominatim coordinates must be cast to floats for accurate calculations (fixed in v4.1.6). Older data may cause precision errors.
Solution: Update your database queries to cast coordinates:
```
$coordinates = (float) $location->latitude;
```

4. Checkout Flow Persistence

Issue: Selected payment methods may not persist during checkout (fixed in v4.1.5).

Solution: Ensure your Checkout Livewire component updates the payment_method property correctly:

public $paymentMethod;

public function updatedPaymentMethod()
{
    $this->validate(['paymentMethod' => 'required']);
}

5. Mobile Cart Button

Issue: The mobile cart button may not appear if not included via @teleport (added in v4.0.8).
Solution: Add the following to your layout:
```
@livewire('mobile-cart-button')
```

6. Language Keys

Issue: Newsletter language keys may reference the wrong namespace (fixed in v4.0.11).
Solution: Update your language files to use igniter.orange::default.newsletter instead of igniter.frontend::default.newsletter.

Configuration Quirks

1. Theme Editor

The theme includes a Theme Editor for customizing colors, fonts, and layouts. Access it via:

Route::get('/admin/theme-editor', [\TastyIgniter\Orange\Http\Controllers\ThemeEditorController::class, 'index']);

Tip: Override the editor’s Blade templates if you need additional fields or validation.

2. Static Pages

Static pages (e.g., About, Contact) are managed via the StaticPage model. Use the StaticPageController to display them:
```
@livewire('static-page', ['slug' => 'about'])
```

Ti Theme Orange Laravel Package