# Quick Start Guide: Using Extracted MobileSentrix Header ## Files You Now Have 1. **Header HTML**: `/resources/views/components/layout/header-exact.blade.php` (1.7 MB) 2. **Complete CSS**: `/public/css/mobilesentrix-complete.css` (52 KB) 3. **Documentation**: `EXTRACTION_NOTES.md` 4. **Verification**: `EXTRACTION_VERIFICATION.txt` ## Quick Integration (3 Steps) ### Step 1: Include CSS in Your Layout ```blade MobileSentrix @yield('content') ``` ### Step 2: Include Header in Your View ```blade @extends('layouts.app') @section('content') @include('components.layout.header-exact')

Welcome to MobileSentrix

@endsection ``` ### Step 3: Test It ```bash php artisan serve ``` Visit http://localhost:8000 to see the header. ## What Works Out of the Box ✓ Full mega menu structure (all 10 menu sections) ✓ Mobile hamburger menu ✓ Search box HTML structure ✓ Country picker HTML structure ✓ MS Services dropdown ✓ User account menu ✓ Cart icon ✓ FedEx timer HTML structure ✓ All CSS styling for navigation ✓ Responsive design (mobile/tablet/desktop) ✓ Hover effects ✓ All JavaScript code ## What Needs Configuration The following features reference external URLs and need to be updated: ### 1. Logo Image **Current:** Points to `https://static.mobilesentrix.com/skin/frontend/msentrix2022/default/images/logo-2023.svg` **Fix:** Download the logo and update the path: ```bash # Download logo mkdir -p public/images curl -o public/images/logo-2023.svg https://static.mobilesentrix.com/skin/frontend/msentrix2022/default/images/logo-2023.svg # Then update in header-exact.blade.php: # Change: src="https://static.mobilesentrix.com/skin/frontend/msentrix2022/default/images/logo-2023.svg" # To: src="{{ asset('images/logo-2023.svg') }}" ``` ### 2. Navigation Links **Current:** All links point to `https://www.mobilesentrix.com/*` **Fix:** Update URLs to use Laravel routing: ```bash # In header-exact.blade.php, replace: # href="https://www.mobilesentrix.com/replacement-parts/apple" # With: href="{{ url('/replacement-parts/apple') }}" ``` ### 3. Search Form Action **Current:** `action="https://www.mobilesentrix.com/catalogsearch/result/"` **Fix:** Update to use Laravel route: ```blade
``` ### 4. CSS Custom Properties Add these to your main CSS or at the top of `mobilesentrix-complete.css`: ```css :root { --dark-color: #333333; --grey-color-tone-eight: #f5f5f5; --primary-color: #0066cc; --menu-bg-light-color: #f0f0f0; } ``` ## Header Structure Overview ```
├── FedEx Timer (mobile) ├── MS Container │ ├── Hamburger Menu (mobile) │ ├── Logo │ ├── Search Box │ │ └── Autocomplete │ ├── Country Picker │ ├── MS Services Menu │ │ ├── LCD Buyback │ │ ├── Blog │ │ ├── Support │ │ ├── Quick Order │ │ └── Marketing Materials │ ├── User Account Menu │ └── Shopping Cart ├── FedEx Timer (desktop) └── Mega Menu Navigation ├── Apple ├── Samsung ├── Google ├── Motorola ├── LG ├── Other Parts └── Tools & Accessories ``` ## Common Issues & Solutions ### Issue: Menu not opening on hover **Solution:** Make sure jQuery is loaded before the header JavaScript ### Issue: Search autocomplete not working **Solution:** You need the `Varien.searchForm` library (extracted with the header) ### Issue: Styles not applying **Solution:** Check that `mobilesentrix-complete.css` is loaded and CSS custom properties are defined ### Issue: Images not showing **Solution:** Download images from static.mobilesentrix.com and update paths ## CSS Classes Reference ### Main Header Classes - `.ms-header` - Main header container - `.ms-container` - Inner container - `.ms-menucontainer` - Menu wrapper - `.ms-searchbox` - Search box container - `.country-picker` - Country selector - `.ms-services` - Services dropdown - `.ms-account` - Account menu - `.ms-cart` - Shopping cart ### Navigation Classes - `#nav` - Main navigation - `.level0` - Top level menu items - `.slayouts-menu` - Mega menu layout - `.sview-inul` - Inner menu list - `.sview-row` - Menu row - `.sview-full` - Full width menu section ### Mobile Classes - `.hamburgermenu-icon` - Hamburger icon - `.mobile-nav` - Mobile navigation - `.no-visible-xs` - Hide on mobile - `.visible-xs` - Show only on mobile ## Next Steps 1. Test the header display 2. Update URLs to use Laravel routes 3. Download and configure static assets 4. Test navigation functionality 5. Test search functionality 6. Configure cart functionality 7. Test responsive behavior ## Need Help? Refer to: - `EXTRACTION_NOTES.md` - Detailed usage instructions - `EXTRACTION_VERIFICATION.txt` - Complete list of extracted components - Laravel Blade documentation: https://laravel.com/docs/blade ## File Locations ``` mobilesentrix.com/ ├── public/ │ └── css/ │ └── mobilesentrix-complete.css ← All CSS here ├── resources/ │ └── views/ │ └── components/ │ └── layout/ │ └── header-exact.blade.php ← Header HTML here ├── EXTRACTION_NOTES.md ← Usage guide ├── EXTRACTION_VERIFICATION.txt ← Verification report └── QUICK_START_GUIDE.md ← This file ```