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(
            TextField::create('Title'),
            TextField::create('Color'),
            TextField::create('Size'),
            TextField::create('Video'),
            TextareaField::create('Description'),
            $uploader = UploadField::create('Photo')
        );
 
        $uploader->setFolderName('Product-photos');
        $uploader->getValidator()->setAllowedExtensions(array('png','gif','jpeg','jpg'));
 
        return $fields;
}

2. Dev/build your code by opening http://your-site.com/dev/build?flush=1 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: https://www.youtube.com/watch?v=kSmQDld8QTY so the ID for this video is: kSmQDld8QTY

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

<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 ProductCategory.ss to themes/yourthemename/templates/Layout/ folder using code:

<h1>$Title</h1>
<% 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>
</div>
<% end_loop %>

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

<% loop $Products %>
<% loop Photo %>
<img class="left" alt="$Title" src="$SetHeight(200).URL">
<% end_loop %>
<p>$Description</p>
<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>
</ul>
<% loop $Products %>
<div class='Description'>
<table style="text-align:left;" border="0" cellpadding="0" cellspacing="0">
  <tr class="$EvenOdd">
    <td>Color:</td>
    <td>$Color</td>
  </tr>
  <tr class="$EvenOdd">
    <td>Size:</td>
    <td>$Size</td>
  </tr>
</table>
</div>
<div class='Video'>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/$Video?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<% end_loop %>
</div>

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!