4

So here is my issue, I have built a universal layout, which is a partial view that has a bunch of placeholders on it. All of the pages built work great that are under the home node in preview and Experience Editor, then I try to run the site in my production (web) version.

The first page works, great and the child pages load but seems to have a problem loading the scripts and css, even though these are using the same universal layout. So, my page does not have any styling and it just looks like a skeleton. I am working with Sitecore version 8.2.

Thanks for any advice

here is the layout being used ... once again Parent Items work, child items using the same layout do not, except in preview and Experience Editor

@model RenderingModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,300,300i,400,400i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">


    <title>Trees for Wildlife</title>

    <link href="Css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="Css/custom_css.css" rel="stylesheet">
    <link href="Css/NWF.css" rel="stylesheet">


    <!-- Owl Carousel Stylesheets -->

    <link rel="stylesheet" href="Css/owl.carousel.min.css">
    <link rel="stylesheet" href="Css/owl.theme.default.css">


    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/custom.js"></script>
    <script src="Scripts/owl.carousel.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

    <div id="main-mobile-search" class="collapse">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Search</button>
            </span>
        </div>
    </div>
    @{
        Sitecore.Data.Fields.CheckboxField heroImageOverlay = (Sitecore.Data.Fields.CheckboxField)Sitecore.Context.Item.Fields["Display Hero Overlay"];
        if (heroImageOverlay.Checked)
        {

            <div id="banner-nav-container" class="microsite-banner">

                <div class="home-banner-overlay"> </div>

                <div class="clearfix"></div>
                <div>
                    @Html.Sitecore().Placeholder("head-content")
                </div>
                <div>
                    @Html.Sitecore().Placeholder("header-content")
                </div>


                <div>
                    @Html.Sitecore().Placeholder("HeroImage")
                </div>

            </div>
        }
        else
        {

            <div>
                @Html.Sitecore().Placeholder("head-content")
            </div>
                        <div>
                            @Html.Sitecore().Placeholder("header-content")
                        </div>
                        <div class="interior-banner-skinny">
                            <div class="skinny-banner-bg skinny-banner-bg-TWF">
                                <!--different themed sections of the site will have its own BG class-->
                                <div class="interior-banner-overlay skinny-overlay">
                                    <div class="container flush-box">
                                        <h1>
                                            Section Title
                                        </h1>
                                    </div>
                                </div><!--overlay-->

                            </div>

                        </div><!-- / banner-->
        }
    }
    <div>
        @Html.Sitecore().Placeholder("main-content")
    </div>

    <div>
        @Html.Sitecore().Placeholder("microsite-footer-sub-navigation")
    </div>
    <div>
        @Html.Sitecore().Placeholder("footer-content")
    </div>
    <div>
        @Html.Sitecore().Placeholder("footerNavigation")
    </div>
    <a href="#top">
        <div style="position: relative">
            <div id="back-to-top" class="hidden-xs">
                <img class="center-block" src="images/arrow-up-circle.svg" onerror="this.onerror=null; this.src='arrow-up-circle.png'" alt="Back to Top">
            </div>
        </div>
    </a>

    <script>
        $('a[href*="top"]:not([href="top"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    </script>

    <div id="mobile_social_sticky" class="hidden-sm hidden-md hidden-lg">
        <div id="mobile-donate-sticky">
            Donate <img class="heart-icon" src="images/heart-icon.svg" onerror="this.onerror=null; this.src='images/heart-icon.png'" alt="Donate">
        </div>

        <div id="mobile-facebook-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/facebook-footer.svg" onerror="this.onerror=null; this.src='images/facebook-footer.png'" alt="Visit our Facebook">
        </div>

        <div id="mobile-twitter-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/twitter-footer.svg" onerror="this.onerror=null; this.src='images/twitter-footer.png'" alt="Visit our Twitter">
        </div>

        <div id="mobile-email-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/email-footer.svg" onerror="this.onerror=null; this.src='images/email-footer.png'" alt="Email to a Friend">
        </div>


    </div>


    <script>
        var searchIcon = document.getElementById("search-icon");
        var closeIcon = document.getElementById("close-icon");
        TweenMax.set(closeIcon, { x: -100 });

        searchIcon.addEventListener('click', function () {
            TweenMax.to(searchIcon, .5, { x: -100 });
            TweenMax.to(closeIcon, .5, { x: 0 });
            console.log('search clicked');
        });

        closeIcon.addEventListener('click', function () {
            TweenMax.to(searchIcon, .5, { x: 0 });
            TweenMax.to(closeIcon, .5, { x: -100 });
            console.log('close clicked');
        });
    </script>


</body>
</html>

errors:

GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Css/owl.carousel.min.css Affiliates:16 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Css/bootstrap/bootstrap.min.css Affiliates:18 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Css/NWF.css Affiliates:24 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Css/owl.theme.default.css Affiliates:17 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Css/custom_css.css Affiliates:30 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Scripts/custom.js Affiliates:27 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Scripts/jquery-3.1.1.min.js Affiliates:29 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Scripts/bootstrap.min.js Affiliates:31 GET http://localhost:10305/Home/Trees%20for%20Wildlife/About%20Us/Scripts/owl.carousel.js

  • 1
    Sounds a little bit like there may be some issue around your layout/partialview handling. Could you please share details of your main layout file? – Mark Cassidy Jun 14 '17 at 12:53
  • Can you include the code to the layout that you are using to pulling the styles/scripts. It sounds like to me that there is an issue with how you are including your references (scripts/styles). They can't be relative, because as you navigate deeper into the site, they won't be relative to the root any longer. You should always use absolute. – Dylan Young Jun 14 '17 at 15:42
2

Yes so the problem is that you have relative script/style paths.

So instead of:

<script src="Scripts/bootstrap.min.js"></script>

You need:

<script src="/Scripts/bootstrap.min.js"></script>

That should fix your issue. You need to do that for every reference.

  • 1
    Please mark Dylan's answer as accepted when you get the chance. For the records and so on. Thanks :-) – Mark Cassidy Jun 15 '17 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.