We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

[SOLVED] Wayfinder not finding CSS and Javascript chunks?

    • 9145
    • 13 Posts
    ethayne Reply #1, 18 years, 1 month ago
    I’ve used the &cssTpl and &jsTpl parameters so that Wayfinder will add the respective CSS and Javascript chunks to the head of the page that is calling it. But it seems that Wayfinder is not applying them. I’ve been using the FireFTP plugin for Firefox, and it doesn’t show my css styles being added to my navigation.

    Here is the Wayfinder call:
    [!Wayfinder? &startItemTpl=`home_start_item_tpl2` &_limit=`5` &outerTpl=`home_outer_tpl2` &rowTpl=`home_inner_tpl2` &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl` &displayStart=`true` &startId=`69` &excludeDocs=`43,36,29` &level=`1` &firstClass=`first`!]
[!Wayfinder? &startItemTpl=`home_start_item_tpl2` &_limit=`5` &outerTpl=`home_outer_tpl2` &rowTpl=`home_inner_tpl2` &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl` &displayStart=`true` &startId=`70` &excludeDocs=`17` &level=`1` &firstClass=`first`!]
[!Wayfinder? &startItemTpl=`home_start_item_tpl2` &_limit=`5` &outerTpl=`home_outer_tpl2` &rowTpl=`home_inner_tpl2` &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl` &displayStart=`true` &startId=`72` &excludeDocs=`55` &level=`1` &firstClass=`first`!]
[!Wayfinder? &startItemTpl=`home_start_item_tpl2` &_limit=`5` &outerTpl=`home_outer_tpl2` &rowTpl=`home_inner_tpl2` &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl` &displayStart=`true` &startId=`71` &excludeDocs=`14` &level=`1` &firstClass=`first`!]
[!Wayfinder? &startItemTpl=`home_start_item_tpl2` &_limit=`5` &outerTpl=`home_outer_tpl2` &rowTpl=`home_inner_tpl2` &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl` &displayStart=`true` &startId=`375` &excludeDocs=`392` &level=`1` &firstClass=`first`!]


    The name of my CSS chunk is "home_css_tpl" and the Javascript chunk is "home_js_tpl".

    Anyone know a solution?
      • 9145
      • 13 Posts
      ethayne Reply #2, 18 years, 1 month ago
      Just for reference, here are the chunks I’m using as well.

      home_css_tpl:
      #nav_chair_models, #nav_chair_models ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav_chair_models a {
    display: block;
    width: 10em;
}

#nav_chair_models li {
    float: left;
    width: 10em;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}


      home_js_tpl:
      sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


      home_inner_tpl2:
      <li[+wf.classes+]>
    <a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    [+wf.wrapper+]
</li>


      home_outer_tpl2:
      <ul class="nobullet [+wf.classnames+]">
    [+wf.wrapper+]
</ul>


      home_start_item_tpl2:
      <a href="[+wf.link+]" title="[+wf.linktext+] Massage Chairs"><img src="[+image_thumb+]" alt="[+wf.linktext+] Massage Chair Recliner" /></a><br/>
<h2><a href="[+wf.link+]" title="[+wf.linktext+] Massage Chair">[+wf.linktext+]</a></h2>
<ul id="#nav_chair_models">
<li><a href="#">Models available:</a>
    <ul>
        [+wf.wrapper+]
    </ul>
</li>
</ul>


      Hope this helps!
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        sottwell Reply #3, 18 years, 1 month ago
        Wayfinder calls the MODx regClientCSS and regClientStartupScript methods. This means that they either need to be just a URL to an external .css or .js file, or a full block, including the <style...> </style> and <script...></script>tags.

        Also, the way Wayfinder processes these, they will only be added to the head of the document, there is no option to adding a block of javascript in the body of the page (although MODx itself does have this option, it uses a different function which Wayfinder does not invoke.)
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 9145
          • 13 Posts
          ethayne Reply #4, 18 years, 1 month ago
          If I understood you correctly, you meant that my Wayfinder call should have looked more like this:
          &cssTpl=`http://www.aminorstudios.com/dropdown/style.css` &jsTpl=`http://www.aminorstudios.com/dropdown/ie.js`


          I tried that, but I’m still not getting any results...
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            sottwell Reply #5, 18 years, 1 month ago
            No. The snippet parameters should still point to a chunk. I was referring to the chunk contents.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 9145
              • 13 Posts
              ethayne Reply #6, 18 years, 1 month ago
              Okay, that makes sense. But still no luck.

              home_css_tpl:
              <style type="text/css">

#nav_chair_models, #nav_chair_models ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav_chair_models a {
    display: block;
    width: 10em;
}

#nav_chair_models li {
    float: left;
    width: 10em;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

</style>


              home_js_tpl:
              <script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>


              The snippet looks like this:
              &cssTpl=`home_css_tpl` &jsTpl=`home_js_tpl`

                • 28042 ☆ A M B ☆
                • 24,524 Posts
                sottwell Reply #7, 18 years, 1 month ago
                It’s possible that you may have to have those in an external file, and your chunk just contains the URL to these external .css and .js files. From what I saw when I looked over the code, what you’ve done should have worked, but I may have been wrong.
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                  • 9145
                  • 13 Posts
                  ethayne Reply #8, 18 years, 1 month ago
                  Yeah, I’m not sure what’s stopping it, but it’s still not getting through. I’ve got it coded exactly according to the documentation. And I tried just including a URL to the stylesheet in my CSS chunk, but to no avail. I may just have to find another way around this, I guess.
                    • 9145
                    • 13 Posts
                    ethayne Reply #9, 18 years, 1 month ago
                    Well, I finally figured it out!

                    My home_start_item_tpl2 had this in it:
                    <ul id="#nav_chair_models">


                    When it should have said:
                    <ul id="nav_chair_models">


                    So simple...