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

Welcome to part 2 of this series. I recommend you check out part 1 before reading this article. In this part we write the theme tabs code, add the specification lines to tab one and  add the video from YouTube to second tab.

1. Lets add the video line for Product.php

add 'Video' => 'Text', to private static $db like so:

private static $db = array (
        'Title' => 'Varchar',
        'Description' => 'Text',
        'Color' => 'Text',
        'Size' => 'Text',
        'Video' => 'Text', //Video
and also fields like so:

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

2. Dev/build your code by opening in your preferred browser

3. Now we need to add the video ID. You can find a YouTube video ID by looking at the video URL, the video ID is the part after v= In this article I am using the video: so the ID for this video is: kSmQDld8QTY

4. Now lets add the scripts lines to the themes/yourthemename/templates/ :

<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/waypoints-sticky.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/jquery.tabslet.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/rainbow-custom.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/jquery.anchor.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/waypoints.min.js"></script>
<script src="{$ThemeDir}/js/initializers.js"></script>

5. Add to themes/yourthemename/templates/Layout/ folder using code:

<% loop Products %>
<div class="Product">
<h2><a href="$link" title="$Title">$Title</a></h2>
<a href="$link" title="$Title">$Photo.SetHeight(150)</a>
<div class="clear"></div>
<% end_loop %>

6. Add themes/yourthemename/templates/Layout/ folder with code :

<% loop $Products %>
<% loop Photo %>
<img class="left" alt="$Title" src="$SetHeight(200).URL">
<% end_loop %>
<div class="clear"></div>
<% end_loop %>
<div class='tabs' data-toggle="tabslet">
<ul class='horizontal'>
<li><a href=".Description">Description</a></li>
<li><a href=".Video">Video</a></li>
<% loop $Products %>
<div class='Description'>
<table style="text-align:left;" border="0" cellpadding="0" cellspacing="0">
  <tr class="$EvenOdd">
  <tr class="$EvenOdd">
<div class='Video'>
<iframe width="560" height="315" src="$Video?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
<% end_loop %>

7. Flush the design changes using ?flush=all  at the end of your website URL.

In next part of this series we will build the code we just added with CSS and also add the 3 tab with its content

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 *