SilverStripe Strips

Introducing SilverStripe Strips: a fast and scalable method to building modular webpages

The traditional approach to building Layouts

When we started building sites in SilverStripe we adopted a very traditional approach: building out page templates in the [templates/Layout directory]. These pages were made up of a combination of includes and inline markup.

Here is an example of a typical page style in one of our builds:

Example: templates/Layout/ServicePage.ss

<% include HeroBanner %>
<section class="main-content">
   ...
   {$Content}
   ...
</section>
<% include CallToAction %>
<% include EnquiryForm %>

Your process and templates may look similar to this.

While this method is tried and true, it can be time-consuming and tedious. You end up building out as many layouts as there are unique page styles for the project.

How can we improve on this process?

As we developed our client’s websites, we found many projects used similar elements across separate pages. These elements often appeared in a different order, too.

Consider the following scenario:

These two pages are almost identical. The only difference is that the ‘content block’ and ‘call to action’ appear at different points on the page. Traditionally, we would have needed to create an entirely new page template to facilitate this change (and come up with a new name, too).

This is where the strip method becomes so valuable.

When building using strips, you craft the strip directly inside the CMS, duplicate them, reuse them, and reorder them. You can even nest them within each other.

Here is an example of the strips at work on a current live site:

The strips are created and managed through a GridField which provides flexibility and some valuable functionality.

We have included the GridFieldExtensions module to add additional functions to the GridField. This supports the strip system in two ways: 

• Managing multiple classes: The MultiClass component allows us to add different strip types to the page. This way each strip can have its own unique set of fields and templates.
• Drag and drop reordering: The OrderableRows component provides the ability to drag and drop reorder the strips. 

Implementation

Page object: site/code/Page.php

First we setup a many_many relationship from Page to our Strip object. It is important that we make this relationship a many_many so that global or repeated strips can be included on multiple pages. We also add an extra field to the many_many relationship so we can control the order of the strips in the context of the relationship.

private static $many_many = [
   'Strips' => 'Strip'
];

// Add a SortOrder field to the relationship to allow for reordering
private static $many_many_extraFields = [
   'Strips' => [
      'SortOrder' => 'Int'
   ]
];

Next, we set up the GridField. The GridField uses the multiclass editor plugin from the GridFieldExtensions.

// Set the columns to be displayed in the gridfield
$dataColumns = new GridFieldDataColumns();
$dataColumns->setDisplayFields(
    [
        'Title'         => 'Title',
        'singular_name' => 'Type'
    ]
);

// Get available strips from 'strips' folder as an array
$multiClassConfig = new GridFieldAddNewMultiClass();
$multiClassConfig->setClasses($this->AvailableStrips());

// Set up autocompleter to add existing strips
$autocompleter = new GridFieldAddExistingAutocompleter('toolbar-header-right', ['Title']);
$autocompleter->setResultsFormat('$Title ($ClassName)');

// Create the gridfield
$stripsGridField = GridField::create('Strips', 'Strips', $this->Strips(),
    GridFieldConfig::create()->addComponents(
        new GridFieldToolbarHeader(),
        new GridFieldDetailForm(),
        new GridFieldEditButton(),
        new GridFieldDeleteAction('unlinkrelation'),
        new GridFieldDeleteAction(),
        new GridFieldTitleHeader(),
        new GridFieldOrderableRows('SortOrder'),
        $autocompleter,
        $multiClassConfig,
        $dataColumns
    )
);

$fields->addFieldsToTab(
    'Root.Strips',
    [
        $stripsGridField
    ]
);

We then create a method for automatically populating the dropdown for the MultiClass editor. All php files under /site/code/strips will be returned as an array.

private function AvailableStrips()
{
    // TODO Is there a better method for getting this folder?
    $stripFolder = BASE_PATH . '/site/code/strips';
    $strips      = [];

    foreach (new DirectoryIterator($stripFolder) as $file) {
        if ($file->isFile()) {
            $fileName  = $file->getFilename();
            $fileParts = pathinfo($fileName);
            // Only add PHP files
            if ($fileParts['extension'] == 'php') {
                array_push($strips, $fileParts['filename']);
            }
        }
    }
    // Sort strips alphabetically
    asort($strips);

    return $strips;
}

Strip object: site/code/Strip.php

Next, we set up a base class for our strips. I have commented inline with the purpose of each section.

site/templates/Layout/Page.ss

1 <% loop $Strips.Sort(SortOrder) %> 
2 {$Me}
3 <% end_loop %>

CallToActionStrip object: site/code/CallToActionStrip.php

CallToActionStrip template: site/templates/Includes/CallToActionStrip.ss

<section class="call-to-action-strip"> 
  {$Image}
  <p class="text">{$Text}</p>
  <a href="{$PageLink.Link}" class="button">{$ButtonText}</a> 
</section>