We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 47432
    • 48 Posts
    Hi,
    i love onepage design, is there a way yo have the menu anchors (#id) to wayfinder
    i'm a total beginner
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Put each section on its own resource.

      For your Wayfinder rowTpl, use something like this:
      <a href="[[+wf.link]]#[[+wf.title]]">[[+wf.linktext]]</a>

      You also need to specify the &titleOfLinks to be alias.

      Use getResources with the includeContent property, and use a tpl like this:
      <section id="[[+alias]]">
      [[+content]]
      </section>
        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
        • 47432
        • 48 Posts
        Thank you,
        i'm gonna try it smiley
        One more question, i know that one page sites are bad for seo, but they are nice and trendy, and i'm a designer
        is it also better for seo when having each section in a different resource ?
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          The search engines will have no idea how the page is built. They will only see the one page. The different resources is to make it easier for you to develop and manage the site.
            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
            • 47432
            • 48 Posts
            Thank for your answer
              • 47432
              • 48 Posts
              Hi,
              i'm trying to do that but i'm lost :-(
              i had each section code, copy the code in a chunk and make the getresources call like that
              here for the about section:
              [[!getresources?
              &parents= `0`
              &depth=`1`
              &limit=`1`
              &tpl=`aboutTpl`
              &includeContent=`1`
              &includeTVs=`1`
              &processTVs=`1`
              &showHidden=`1`
              
              ]]


              i made a template about, and inside had the chunk aboutTpl
              and create a resource about (with about alias) and asign the template about

              in the chunk aboutTpl i replace a part of the text by [[*content]]
              and also try to have a tv as title, and asign the tv to template about

              but it don't work, the page works, but the content who appears in about is the one from the page home
              and the tv don't appear...

              What is wrong ?

              i have rebuilt everything here : http://webstantly.com/seenmodx2/
                • 28042 ☆ A M B ☆
                • 24,524 Posts
                That is really, really ugly HTML. Let's see if we can't clean it up a bit. Be back soon wink
                  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
                  • 28042 ☆ A M B ☆
                  • 24,524 Posts
                  Step one... here's the top part (just the menu for now, slider not yet implemented)

                  I took all of the .css files and put them in assets/theme/seentheme/css/
                  I took all of the .js files and put them in assets/theme/seentheme/js/
                  I took all of the images and put them in assets/theme/seentheme/images/

                  The slider images will go in assets/images/seentheme/slider/ (with a Media source pointing to that directory)

                  The SeenTheme template - this is for the single-page output. The menu is still hard-coded at this point, will have to study it a bit to port it to Wayfinder.
                  <!DOCTYPE html>
                  <!-- This site was created in Webflow. http://www.webflow.com-->
                  <!-- Last Published: Sun May 04 2014 16:56:28 GMT+0000 (UTC) -->
                  <html style="" class="w-mod-js w-mod-no-touch w-mod-video w-mod-no-ios wf-opensans-n3-active wf-opensans-i3-active wf-opensans-n4-active wf-opensans-i4-active wf-opensans-n6-active wf-opensans-i6-active wf-opensans-n7-active wf-opensans-i7-active wf-opensans-n8-active wf-opensans-i8-active wf-merriweather-n3-active wf-merriweather-n4-active wf-merriweather-n7-active wf-merriweather-n9-active wf-droidserif-n4-active wf-droidserif-n7-active wf-lato-n1-active wf-lato-i1-active wf-lato-n3-active wf-lato-i3-active wf-lato-n4-active wf-lato-i4-active wf-lato-n7-active wf-lato-i7-active wf-lato-n9-active wf-lato-i9-active wf-active" data-wf-site="535e446be6ef15215d000b88">
                  <head>
                  <meta charset="[[++modx_charset">
                  <title>SEEN THEME - Home</title>
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <meta name="generator" content="Webflow">
                  <base href="[[++site_url]]">
                  <style type="text/css">
                    .gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div {
                      font-size:10px}
                    </style>
                  <link href="assets/theme/seentheme/css/css.css" rel="stylesheet" type="text/css">
                  <style type="text/css">
                    @media print {  
                      .gm-style .gmnoprint, .gmnoprint {    
                        display:none  }
                      }
                    @media screen {  
                      .gm-style .gmnoscreen, .gmnoscreen {    
                        display:none  
                        }
                      }
                  </style>
                  <style type="text/css">
                    .gm-style {
                      font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none
                    }
                  </style>
                    <link rel="stylesheet" type="text/css" href="assets/theme/seentheme/css/normalize.css">
                    <link rel="stylesheet" type="text/css" href="assets/theme/seentheme/css/webflow.css">
                    <link rel="stylesheet" type="text/css" href="assets/theme/seentheme/css/seen-theme.css">
                    <script style="" src="assets/theme/seentheme/js/webfont.js"></script>
                    <link href="assets/theme/seentheme/css/css_002.css" rel="stylesheet">
                    <script>
                      WebFont.load({
                        google: {
                          families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Merriweather:300,400,700,900","Droid Serif:400,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"]
                        }
                      });
                    </script>
                    <script type="text/javascript" src="assets/theme/seentheme/js/modernizr.js"></script>
                    <link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
                  <script src="assets/theme/seentheme/js/js.js" type="text/javascript"></script>
                  <script src="assets/theme/seentheme/js/commonutilmarkermap.js" charset="UTF-8" type="text/javascript"></script><script src="assets/theme/seentheme/js/infowindow.js" charset="UTF-8" type="text/javascript"></script><script src="assets/theme/seentheme/js/onion.js" charset="UTF-8" type="text/javascript"></script><script src="assets/theme/seentheme/js/controlsstats.js" charset="UTF-8" type="text/javascript"></script></head>
                  <body>
                  
                  [[$menu]]
                  
                  [[*content]]
                  
                  
                    <script type="text/javascript" src="assets/theme/seentheme/js/jquery.js"></script>
                    <script type="text/javascript" src="assets/theme/seentheme/js/webflow.js"></script>
                    <!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
                  
                  <script src="assets/theme/seentheme/js/main.js"></script></body></html>


                  I took the whole menu section and put it in a chunk named "menu" - this will get edited to use Wayfinder calls. And I took the "top" section and put it in the "home" resource's content.

                  Next to get the "top" section's slider working.
                    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
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    Ok. I decided to get the general layout done first.

                    I took each section and put it in its own resource. Pagetitles and such can be adjusted as required later.

                    I took the footer section and put it in a chunk named "footer".

                    I added this to the main template after the [[*content]] tags and before all the javascript:
                    [[getResources? &parents=`10` &includeContent=`1` &tpl=`@CODE [[+content]]`]]
                    
                    [[$footer]]


                    You'll probably want to add something to the getResources properties to indicate sort by and sort order, like &sortby=`menuindex` &sortdir=`ASC` so that you can re-arrange the sections if you want to.
                      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
                      • 28042 ☆ A M B ☆
                      • 24,524 Posts
                      At this point, you will at least have the general layout. Sliders and images and the dynamic menu still need to be developed. I'll do the top slider, just to give you the idea.

                      Oh, and the form will have to be adapted to use FormIt. See http://rtfm.modx.com/extras/revo/formit/formit.tutorials-and-examples/formit.examples.simple-contact-page

                      Since this is a one-page display, and you really don't want the whole page refreshing on form submit, I'd make that into an AJAX form. But that's another story.
                        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