location & language

app/Http/Controllers/LocationController.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+
+class LocationController extends Controller
+{
+    /**
+     * Handle location selection request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function select(Request $request): JsonResponse
+    {
+        $locationId = $request->input('location_id');
+        
+        // Store location ID in session
+        session(['location_id' => $locationId]);
+        
+        return response()->json(['success' => true]);
+    }
+}

app/View/Components/LanguageSelector.php

@@ -5,7 +5,7 @@ namespace App\View\Components;
 use Illuminate\View\Component;
 use Illuminate\View\View;
 
-class CountrySelector extends Component
+class LanguageSelector extends Component
 {
     /**
      * Create a new component instance.
@@ -20,6 +20,6 @@ class CountrySelector extends Component
      */
     public function render(): View
     {
-        return view('components.country-selector');
+        return view('components.language-selector');
     }
 }

app/View/Components/LanguageSelectorSidebar.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class LanguageSelectorSidebar extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.language-selector-sidebar');
+    }
+}

app/View/Components/LocationSelector.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Location;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class LocationSelector extends Component
+{
+    public Location $selected;
+
+    public $locations;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        // Get location ID from session, default to 22 if not set
+        $locationId = session('location_id', 22);
+        
+        $this->selected = Location::where('id', $locationId)->first();
+
+        $this->locations = Location::whereNotNull('display_name')
+            ->whereNot('display_name', '=', '')
+            ->orderBy('display_name')
+            ->get();
+ 
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View
+    {
+       
+        return view('components.location-selector');
+    }
+}

app/View/Components/LocationSelectorSidebar.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Location;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class LocationSelectorSidebar extends Component
+{
+    public Location $selected;
+
+    public $locations;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        // Get location ID from session, default to 22 if not set
+        $locationId = session('location_id', 22);
+        
+        $this->selected = Location::where('id', $locationId)->first();
+
+        $this->locations = Location::whereNotNull('display_name')
+            ->whereNot('display_name', '=', '')
+            ->orderBy('display_name')
+            ->get();
+ 
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View
+    {
+       
+        return view('components.location-selector-sidebar');
+    }
+}

resources/views/components/language-selector-sidebar.blade.php

@@ -0,0 +1,22 @@
+<!-- Language selector for sidebar/offcanvas -->
+<div class="dropdown nav">
+    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ __('messages.Country select') }}: USA">
+        <div class="ratio ratio-1x1" style="width: 20px">
+            <img src="/img/flags/en-us.png" alt="USA">
+        </div>
+    </a>
+    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+        <li>
+            <a class="dropdown-item" href="#!">
+                <img src="/img/flags/en-us.png" class="flex-shrink-0 me-2" width="20" alt="United States">
+                {{ __('languages.en') }}
+            </a>
+        </li>
+        <li>
+            <a class="dropdown-item" href="#!">
+                <img src="/img/flags/id.png" class="flex-shrink-0 me-2" width="20" alt="Indonesia">
+                {{ __('languages.id') }}
+            </a>
+        </li>
+    </ul>
+</div>

resources/views/components/location-selector-sidebar.blade.php

@@ -0,0 +1,44 @@
+<!-- Location selector for sidebar -->
+<div class="dropdown nav">
+    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="animate-target location-name-sidebar">{{ $selected->display_name ?? '-'}}</span>
+    </a>
+    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+        @foreach ($locations as $loc)
+            <li>
+                <a class="dropdown-item" href="#" 
+                   onclick="selectLocationSidebar({{ $loc->id }}, '{{ $loc->display_name }}')">
+                    {{ $loc->display_name }}
+                </a>
+            </li>
+        @endforeach
+    </ul>
+</div>
+
+
+
+<script>
+function selectLocationSidebar(locationId, locationName) {
+    // Store location in session via AJAX
+    fetch('/location/select', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        },
+        body: JSON.stringify({
+            location_id: locationId
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Update the displayed location
+            document.querySelector('.location-name-sidebar').textContent = locationName;
+            // Reload page to reflect changes
+            window.location.reload();
+        }
+    })
+    .catch(error => console.error('Error selecting location:', error));
+}
+</script>

resources/views/components/location-selector.blade.php

@@ -0,0 +1,44 @@
+<!-- City selector visible on screens > 768px wide (md breakpoint) -->
+<div class="dropdown d-none d-md-block nav">
+    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="animate-target location-name">{{ $selected->display_name ?? '-'}}</span>
+    </a>
+    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+
+
+        @foreach ($locations as $loc)
+            <li>
+                <a class="dropdown-item" href="#" 
+                   onclick="selectLocation({{ $loc->id }}, '{{ $loc->display_name }}')">
+                    {{ $loc->display_name }}
+                </a>
+            </li>
+        @endforeach
+    </ul>
+</div>
+
+<script>
+function selectLocation(locationId, locationName) {
+    // Store location in session via AJAX
+    fetch('/location/select', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        },
+        body: JSON.stringify({
+            location_id: locationId
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Update the displayed location
+            document.querySelector('.location-name').textContent = locationName;
+            // Reload page to reflect changes
+            window.location.reload();
+        }
+    })
+    .catch(error => console.error('Error selecting location:', error));
+}
+</script>

resources/views/home/fashion-v1.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.landing', ['title' => 'Fashion Store v.1'])
+@extends('layouts.landing', ['title' => 'AsiaGolf Store'])
 
 @section('content')
     <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
@@ -199,24 +199,18 @@
           </button>
 
           <!-- Country selector visible on screens > 768px wide (md breakpoint) -->
-          <x-country-selector />
+          <x-language-selector />
 
-          <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+          <!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
-          <div class="dropdown d-none d-md-block nav">
+          <x-location-selector />
-            <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="animate-target">Washington</span>
-            </a>
-            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
-              <li><a class="dropdown-item" href="#!">Chicago</a></li>
-              <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
-              <li><a class="dropdown-item" href="#!">New York</a></li>
-              <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
-            </ul>
-          </div>
         </div>
 
         <!-- Navbar brand (Logo) -->
-        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">Cartzilla</a>
+        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
+        
+          <img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
+            <img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
+        </a>
 
         <!-- Button group -->
         <div class="d-flex align-items-center">
@@ -297,52 +291,10 @@
             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
           </div>
 
-          <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+          <!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
           <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
-            <div class="dropdown nav">
+            <x-language-selector-sidebar />
-              <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+            <x-location-selector-sidebar />
-                <div class="ratio ratio-1x1" style="width: 20px">
-                  <img src="/img/flags/en-us.png" alt="USA">
-                </div>
-              </a>
-              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
-                <li>
-                  <a class="dropdown-item" href="#!">
-                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
-                    United Kingdom
-                  </a>
-                </li>
-                <li>
-                  <a class="dropdown-item" href="#!">
-                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
-                    France
-                  </a>
-                </li>
-                <li>
-                  <a class="dropdown-item" href="#!">
-                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
-                    Deutschland
-                  </a>
-                </li>
-                <li>
-                  <a class="dropdown-item" href="#!">
-                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
-                    Italia
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div class="dropdown nav">
-              <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="animate-target">Washington</span>
-              </a>
-              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
-                <li><a class="dropdown-item" href="#!">Chicago</a></li>
-                <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
-                <li><a class="dropdown-item" href="#!">New York</a></li>
-                <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
-              </ul>
-            </div>
           </div>
           <div class="offcanvas-body pt-1 pb-3 py-lg-0">
             <div class="container pb-lg-2 px-0 px-lg-3">

resources/views/layouts/partials/title-meta.blade.php

@@ -1,10 +1,13 @@
 <meta charset="utf-8">
 
+<!-- CSRF Token -->
+<meta name="csrf-token" content="{{ csrf_token() }}">
+
 <!-- Viewport -->
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
 
 <!-- SEO Meta Tags -->
-<title>Cartzilla | {{ $title }}</title>
+<title>{{ config('app.name') }} | {{ $title }}</title>
 <meta name="description" content="Cartzilla - Multipurpose Bootstrap E-Commerce HTML Template">
 <meta name="keywords"
     content="online shop, e-commerce, online store, market, multipurpose, product landing, cart, checkout, ui kit, light and dark mode, bootstrap, html5, css3, javascript, gallery, slider, mobile, pwa">

routes/web.php

@@ -3,6 +3,7 @@
 use App\Http\Controllers\HomeController;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\RoutingController;
+use App\Http\Controllers\LocationController;
 
 Route::group(['prefix' => '/dummy'], function () {
     Route::get('', [RoutingController::class, 'index'])->name('root');
@@ -12,4 +13,7 @@ Route::group(['prefix' => '/dummy'], function () {
     
 });
 
+// Location selection route
+Route::post('/location/select', [LocationController::class, 'select'])->name('location.select');
+
 Route::get('/', [HomeController::class, 'index'])->name('home');