Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

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

Closed
kantsverma opened this issue Dec 21, 2021 · 1 comment
Closed

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

kantsverma opened this issue Dec 21, 2021 · 1 comment

Comments

@kantsverma
Copy link

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>
@kantsverma
Copy link
Author

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kantsverma