Silverstripe 3.1 Gridfield page-type design using tabs on front-end. Part 1

In this tutorial, I tell you how to use jQuery tabs in your front-end design. We will build a page-type where we can add fields for tabs with different contents like: Description, Specification,  Video etc.

Required modules: SortableGridField
Required Javascipt: jQuery Tabslet,

In first part of this tutorial we make Page-type  Product Category with Products as dataobjects. In the products we have Fields Description and Specification fields like color and size. Also we upload the required js files for theme

In the second part we will start to write the theme tabs code, add the Specification lines to tab one and  add the video from YouTube to second tab.

In third part we make the design for the tabs content to make them look better and add some more nice stuff to the third tabs

1. Create the file Product.php in the folder mysite/code/. In the code example below, we’ve added the fields: Title, Description, Color and Size.

<?php class Product extends DataObject {

    private static $db = array (
        'Title' => 'Varchar',
        'Description' => 'Text',
        'Color' => 'Text',
        'Size' => 'Text',

    private static $has_one = array (
        'Photo' => 'Image'
        'ProductCategory' => 'ProductCategory',

    public function getCMSFields() {
        $fields = FieldList::create(
            $uploader = UploadField::create('Photo')


        return $fields;
function Link(){ 
        return $this->ProductCategory()->Link() .'show/'.$this->ID;    

2. Lets add also the ProductCategory.php to folder mysite/code/ with code:

<?php class ProductCategory extends Page {
    private static $has_many = array (
        'Products' => 'Product',

    public function getCMSFields() {
        $fields = parent::getCMSFields();
        $fields->addFieldToTab('Root.Main', GridField::create(
            'Products on this category',

        return $fields;
class ProductCategory_Controller extends Page_Controller
function show(){ 
      return array(); 
private static $allowed_actions = array(
function Product(){ 
      if(isset($this->request) && $this->request->param('ID')){ 
         return DataObject::get_by_id('Product', (int)$this->request->param('ID')); 

3. Dev/build your code using on browser address line
4. Add page called: Product Category using ProductCategory as page type and you will see page like thisadmin-after-adding-category

5. Add Product and fill the fields:add-product

6. Now lets make the layout for the Product Category. Add file named to themes/yourthemename/templates/Layout/ folder.

7. Download the jQuery Tabslet and copy files listed below from Tabslet-master\demo\javascripts to themes/yourthemename/js/ folder so that vendor files are in vendor folder:

  • vendor/waypoints-sticky.min.js
  • vendor/jquery.tabslet.js
  • vendor/rainbow-custom.min.js
  • vendor/jquery.anchor.js
  • vendor/waypoints.min.js
  • initializers.js

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *