One Page dev

Permalink
Hi,

I'm wondering what is the best way to build a one page theme. My approach was to create a custom page list. From each page a take the block from the main-content area. And assign it to a new area for that is used on the one page.

This approach seemed to work fine till I added a form to one of the pages. When the form is submitted it will give an 404 page not found. This is because the action is posted to the current page. But in reality the current page is not the page where the contact form is located.

I want to build op the one page in sections. The sections can be used in the navigation to create a scroll to effect / animation.

<section class="page-section" id="page-section-1">
  <!-- Blocks go in here -->
</section>


I would like to know what is the best way to deal with one pages. In the code below you can see an example of how I did it at this moment.

<?php
      $pl = new \Concrete\Core\Page\PageList();
      $pl->sortByDisplayOrder();
      $pl->filterByParentID($c->getCollectionID());
      $pl->filterByAttribute('exclude_page_list', 0);
      $pages = $pl->getResults();
      //load heleprs
      $th = Core::make('helper/text');
      $nh = Core::make('helper/navigation');
      $dh = Core::make('helper/date');
   ?>
   <?php foreach ($pages as $page):
      // Prepare data for each page being listed...
      $title = $th->entities($page->getCollectionName());
      $url = $nh->getLinkToCollection($page);

 
razorcommerce replied on at Permalink Reply
razorcommerce
Is it necessary to use different pages if the goal is 1-page? Maybe make the sections out of layouts with a custom template, or just added classes instead? That way you build everything into the one page, and it has the sections, all the blocks including forms will work... easy/peazy. You'd have to make your own navigation I suppose.
rge replied on at Permalink Reply
Thanks for your reply. I have done multiple approaches but all of them are not flexible enough.

1. Hardcode sections in the page_type
<section class="page-section" id="intro">
  <?php
   $a = new Area('intro');
   $a->display($c);
  ?>
</section>
<section class="page-section" id="services">
  <?php
   $a = new Area('services');
   $a->display($c);
  ?>
</section>

The down side is that the customer will not be enable to create more sections him self. Sections can only be reordered by modifying the php file.

2. Just have one area in the page_type
<?php
   $a = new Area('main-content');
   $a->display($c);
  ?>

Not possible to create sections. All blocks are directly after each other. Because of this it is harder to set the right spacing between sections.

So what I want is a flexible solution. If you would sell the template the buyer needs to be enable to use all the default Concrete5 blocks and set-up its own sections. Like service, contact, about etc.
rge replied on at Permalink Best Answer Reply
Fyi

After reading the documentation of the theme "long story short". I found out another way. By creating a page attribute users can set the amount of sections they need. In the view template I than create as many areas as are defined in the page attribute.

Each section will receive a class and id. The id is prefixed with the loop number $i. This will be used for the navigation.

<?php 
defined('C5_EXECUTE') or die (_('Acccess denied.'));
$c = Page::getCurrentPage(); 
$sections = $c->getAttribute('page_sections'); // get the number of secetions 'num attribute'
   $i = 1; 
   while ( $i <= (int)$sections ):
?>   
<section class="pageSection" id="pageSection--<?php echo $i; ?>">
<?php
   $areaName = 'section-' . $i;
   $a = new Area($areaName);
   $a->enableGridContainer();
   $a->display($c);
?>
</section>
MichaelG replied on at Permalink Reply
MichaelG
In the near future, when they address some other feature requests of areas, there's a discussion about having as much controller over layouts as you do an area.

So right now, you can add a class to an area, set the background etc.. and put a grid in there and go to town.

The discussion is that you could easily add classes as well to the grid container in the layout tool. That way sections are unlimited and ready to add all day long.
MichaelG replied on at Permalink Reply
MichaelG
That said - I think the method you have from long story sort is super smart.
rge replied on at Permalink Reply
It would be a very nice addition. I guess that the possibility to add id's should be reimplemented as well. Since they are vital for one page navigation. Currently it is only possible to add classes.

With my current implementation it is also possible to create a onePage nav block. My idea is to get alle the areas from the page where the block is added. For each section you than should be enable to set a name for the anchor in the nav.

Would be nice if the same is possible with feature you described. In the meanwhile I will build the block and share it when it is done.
MichaelG replied on at Permalink Reply
MichaelG
The only downside to this is that you can't rearrange sections. You can rearrange the blocks and redo the classes, but that's.. meh.