Giters

caffeinated / themes

:art: Laravel Themes package with support for the Caffeinated Modules package.

Home Page:https://caffeinatedpackages.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Layout not working for other view instead of home inside themes/frontend

kantsverma opened this issue · comments

commented

I am using this packages and following the video everything working fine but when I tried to create a new view so its navigation and footer not loading and also the Js and CSS not loading from the App as well as the Guest view.

Below is the Route code:

Route::middleware('theme:frontend')->name('frontend.')->group( function() {
    //dd('***');
    Route::view('/', 'home')->name('home'); // landing 
    Route::view('/how-it-work', 'howitwork')->name('howitwork');  

});

require __DIR__.'/auth.php';
require __DIR__.'/admin.php';

App View:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'ClipCost') }}</title>
    <!-- Scripts -->
    <script src="{{ mix('js/app.js', 'themes/frontend') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ mix('css/app.css', 'themes/frontend') }}" rel="stylesheet">
    <link href="{{ asset('themes/frontend/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{ asset('themes/frontend/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('themes/frontend/css/responsive.css') }}" rel="stylesheet">
    <link href="{{ asset('themes/frontend/css/slick.min.css') }}" rel="stylesheet">
    <link href="{{ asset('themes/frontend/css/font-awesome.min.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        @include('layouts.navigation')

        <main class="py-4">
            {{ $slot }}
        </main>
    </div>
    @include('layouts.footer')    
    <script src="{{ asset('themes/frontend/js/jquery-3.5.1.slim.min.js')}}"></script>
    <script src="{{ asset('themes/frontend/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{ asset('themes/frontend/js/jquery.min.js')}}"></script>
    <script src="{{ asset('themes/frontend/js/bootstrap.min.js')}}"></script>
    <script src="{{ asset('themes/frontend/js/simpleMobileMenu.js')}}"></script>
    <script src="{{ asset('themes/frontend/js/slick.min.js')}}"></script>
    <script>
        var btn = $('#button');
        
        $(window).scroll(function() {
        if ($(window).scrollTop() > 300) {
        btn.addClass('show');
        } else {
        btn.removeClass('show');
        }
        });
        
        btn.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop:0}, '300');
        });
        
        
        
        /*slick slider*/
        $(document).ready(function(){
        $('.carousel-slick,.carousel-slick-1').slick({
        speed: 500,
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        dots:false,
        centerMode: true,
        prevArrow:"<span class='arrow prev'><i class='fa fa-angle-left'></i></span>",
        nextArrow:"<span class='arrow next'><i class='fa fa-angle-right'></i></span>",
        responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
            // centerMode: true,
        
        }
        
        }, {
        breakpoint: 800,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            dots: false,
            infinite: true,
        }
        },  {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            infinite: true,
            autoplay: true,
            autoplaySpeed: 2000,
        }
        }]
        });
        });
        
        /*bottom slider*/
        $(document).ready(function(){
        $('.bottom-slider').slick({
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        dots:false,
        arrows: true,
        centerMode: true,
        infinite:true,
        prevArrow:"<span class='arrow prev'><i class='fa fa-angle-left'></i></span>",
        nextArrow:"<span class='arrow next'><i class='fa fa-angle-right'></i></span>",
        responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
        
            // centerMode: true,
        }
        
        }, {
        breakpoint: 800,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            dots: false,
            infinite: true,
        }
        },  {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            infinite: true,
            autoplay: true,
            autoplaySpeed: 2000,
        }
        }]
        });
        });
    </script>
</body>
</html>

View i.e How it Work:

<x-app-layout>
<div class="services-header-banner mt-3">
    <div class="container">
    <div class="row">
        <div class="col-md-12">
          How it work will show here 
        </div>
    </div>
    </div>
</div>
</x-app-layout>
commented

Resolved it was my mistake accident removed the .blade extension from the view